style/bluenightsky/styles.css

   1 /* Created by http://freehtml5templates.com */
   2
   3 /* reset */
   4 * {
   5 margin: 0;
   6 padding: 0;
   7 }
   8
   9 /* render html5 elements as block */
  10 header, footer, section, aside, nav, article {
  11 display: block;
  12 }
  13
  14 body {
  15 line-height: 1;
  16 background: #0d144a;
  17 font-family: Verdana, Arial, Helvetica, sans-serif;
  18 color: #333;
  19 font-size: 14px;
  20 line-height: 18px;
  21 }
  22
  23 /* layout */
  24
  25 #wrapper {
  26 width: 940px;
  27 margin: 0 auto;
  28 margin-top: 20px;
  29 margin-bottom: 20px;
  30 border: 3px solid #888;
  31 background: #d5def7;
  32 /* curved border radius */
  33 -moz-border-radius: 10px;
  34 -webkit-border-radius: 10px;
  35 }
  36
  37 nav {
  38 width: 940px;
  39 height: 50px;
  40 margin: 0 auto;
  41 background: #000;
  42 }
  43
  44 #main {
  45 width: 940px;
  46 margin: 0 auto;
  47 padding-top: 30px;
  48 background: #d5def7 url(images/colbg.png) repeat-y;
  49 overflow: hidden;
  50 }
  51
  52 #content {
  53 float: right;
  54 width: 640px;
  55 margin: 0 0 10px 0;
  56 padding: 10px 30px 5px 0;
  57 }
  58
  59 #sidebar {
  60 float: left;
  61 padding: 10px 0 0 20px;
  62 width: 220px;
  63 }
  64
  65 footer {
  66 width: 940px;
  67 margin: 0 auto;
  68 clear: both;
  69 }
  70
  71 /* basics */
  72
  73 h1,h2,h3,h4,h5,h6 {
  74 font-weight: bold;
  75 clear: both;
  76 color: #333;
  77 }
  78
  79 a:link, a:visited {
  80 color:#004C9A;
  81 }
  82
  83 a:hover, a:active {
  84 color: #333;
  85 }
  86
  87 p {
  88 margin-bottom: 18px;
  89 }
  90
  91 li {
  92 padding-left: 5px;
  93 }
  94
  95 /* nav */
  96
  97 nav {
  98 margin: 0 auto;
  99 display: block;
 100 float: left;
 101 }
 102
 103 nav .menu {
 104 font-size: 16px;
 105 font-weight: bold;
 106 margin-left: 12px;
 107 }
 108
 109 nav .menu ul {
 110 list-style: none;
 111 margin: 0;
 112 }
 113
 114 nav .menu li {
 115 float: left;
 116 position: relative;
 117 }
 118
 119 nav .menu a {
 120 display: block;
 121 text-decoration: none;
 122 color: #ccc;
 123 padding: 0 30px;
 124 line-height: 50px;
 125 }
 126
 127 nav .menu a:hover {
 128 color: #fff;
 129 text-decoration: underline;
 130 }
 131
 132 /* nav 1-level dropdowns */
 133 nav .menu li ul {
 134 display: none;
 135 z-index: 8888;
 136 }
 137
 138 nav .menu ul li a {
 139 display: block;
 140 text-decoration: none;
 141 color: #FFF;
 142 background: #000;
 143 margin-left: 1px;
 144 white-space: nowrap;
 145 }
 146 nav .menu ul li a:hover {
 147 background: #333;
 148 }
 149
 150 nav .menu li:hover ul {
 151 display: block;
 152 position: absolute;
 153 }
 154
 155 nav .menu li:hover li {
 156 float: none;
 157 }
 158
 159 nav .menu li:hover a {
 160 background: #333;
 161 }
 162
 163 nav .menu li:hover li a:hover {
 164 background: #333;
 165 }
 166
 167 /** HEADER */
 168
 169 header {
 170 padding: 20px 0 0 0;
 171 }
 172
 173 header img {
 174 clear: both;
 175 display: block;
 176 }
 177
 178 header>h1 {
 179 float: left;
 180 margin: 0 0 18px 10px;
 181 width: 600px;
 182 font-size: 40px;
 183 line-height: 36px;
 184 }
 185
 186 header>h1 a:link, header>h1 a:visited {
 187 color: #333;
 188 font-weight: bold;
 189 text-decoration: none;
 190 text-shadow: 0px 2px 3px #555;
 191 }
 192
 193 header>h2 {
 194 color: #777;
 195 clear: right;
 196 float: right;
 197 font-style: italic;
 198 font-size: 14px;
 199 margin: 14px 10px 18px 0;
 200 }
 201
 202 /** ARTICLES **/
 203
 204 article {
 205 float: left;
 206 padding: 20px 10px 10px 10px;
 207 width: 620px;
 208 }
 209
 210 .featured {
 211 width: 620px;
 212 float: left;
 213 margin-bottom: 10px;
 214 background: #BDBFE1;
 215 /* curved border radius */
 216 -moz-border-radius: 10px;
 217 -webkit-border-radius: 10px;
 218 }
 219
 220 article .featuredthumb {
 221 float: left;
 222 width: 200px;
 223 height: 200px;
 224 /* curved border radius */
 225 -moz-border-radius: 10px;
 226 -webkit-border-radius: 10px;
 227 }
 228
 229 article .featuredtitle {
 230 float: right;
 231 width: 400px;
 232 font-size: 20px;
 233 font-weight: bold;
 234 line-height: 1.8em;
 235 }
 236
 237 article .featuredstory {
 238 float: right;
 239 width: 400px;
 240 }
 241
 242 article .thumb {
 243 float: right;
 244 width: 80px;
 245 height: 80px;
 246 /* curved border radius */
 247 -moz-border-radius: 10px;
 248 -webkit-border-radius: 10px;
 249 }
 250
 251 article .title {
 252 float: left;
 253 width: 500px;
 254 font-size: 16px;
 255 font-weight: bold;
 256 margin-bottom: 10px;
 257 }
 258
 259 article .story {
 260 float: left;
 261 width: 500px;
 262 font-size: 12px;
 263 }
 264
 265 .even {
 266 border-top: 1px solid #999;
 267 border-bottom: 1px solid #999;
 268 }
 269
 270
 271
 272 #content h1, h2, h3, h4, h5, h6 {
 273 color: #333;
 274 margin: 0 0 20px 0;
 275 line-height: 1.5em;
 276 }
 277
 278 .alignleft, img.alignleft {
 279 display: inline;
 280 float: left;
 281 margin-right: 10px;
 282 }
 283
 284 .alignright, img.alignright {
 285 display: inline;
 286 float: right;
 287 margin-left: 10px;
 288 }
 289
 290 .aligncenter, img.aligncenter {
 291 clear: both;
 292 display: block;
 293 margin-left: auto;
 294 margin-right: auto;
 295 }
 296
 297 #lightboxthumbs {
 298 text-align: center;
 299 padding-bottom: 10px;
 300 }
 301
 302 .frameit {
 303 border: 5px #0D144A solid;
 304 margin-right: 18px;
 305 /* curved border radius */
 306 -moz-border-radius: 10px;
 307 -webkit-border-radius: 10px;
 308 }
 309
 310 .frameitlast {
 311 border: 5px #0D144A solid;
 312 /* curved border radius */
 313 -moz-border-radius: 10px;
 314 -webkit-border-radius: 10px;
 315 }
 316
 317 /* sidebar and footer widget blocks */
 318
 319 .tabwidget {
 320 width: 200px;
 321 font: 10px normal Verdana, Arial, Helvetica, sans-serif;
 322 }
 323
 324 ul.tabs {
 325 margin: 0;
 326 padding: 0;
 327 float: left;
 328 list-style: none;
 329 height: 32px;
 330 border-bottom: 1px solid #999;
 331 border-left: 1px solid #999;
 332 width: 100%;
 333 }
 334
 335 ul.tabs li {
 336 float: left;
 337 margin: 0;
 338 padding: 0;
 339 height: 31px;
 340 line-height: 31px;
 341 border: 1px solid #999;
 342 border-left: none;
 343 margin-bottom: -1px;
 344 background: #e0e0e0;
 345 overflow: hidden;
 346 position: relative;
 347 }
 348
 349 ul.tabs li a {
 350 text-decoration: none;
 351 color: #000;
 352 display: block;
 353 font-size: 1.2em;
 354 padding: 0 5px;
 355 border: 1px solid #fff;
 356 outline: none;
 357 }
 358
 359 ul.tabs li a:hover {
 360 background: #ccc;
 361 }
 362
 363 html ul.tabs li.active, html ul.tabs li.active a:hover  {
 364 background: #BDBFE1;
 365 border-bottom: 1px solid #BDBFE1;
 366 }
 367
 368 .tab_container {
 369 border: 1px solid #999;
 370 border-top: none;
 371 clear: both;
 372 float: left;
 373 width: 100%;
 374 margin-bottom: 20px;
 375 background: #BDBFE1;
 376 -moz-border-radius-bottomright: 5px;
 377 -khtml-border-radius-bottomright: 5px;
 378 -webkit-border-bottom-right-radius: 5px;
 379 -moz-border-radius-bottomleft: 5px;
 380 -khtml-border-radius-bottomleft: 5px;
 381 -webkit-border-bottom-left-radius: 5px;
 382 }
 383
 384 .tab_content {
 385 padding: 20px;
 386 font-size: 1.2em;
 387 line-height: 1.5em;
 388 }
 389
 390 .tab_content ul {
 391 list-style: none;
 392 }
 393
 394 .tab_content h3 {
 395 border-bottom: 1px dashed #03327d;
 396 }
 397
 398 .tab_content a {
 399 color: #0A50C0;
 400 }
 401
 402 .tab_content a:hover, a:active {
 403 color: #333;
 404 }
 405
 406 .tab_content img {
 407 float: left;
 408 margin-right: 15px;
 409 border: 1px solid #03327d;
 410 padding: 5px;
 411 }
 412
 413
 414 aside .standard h3 {
 415 font-size: 18px;
 416 text-shadow: 0px 2px 3px #ddd;
 417 }
 418
 419 aside .standard ul {
 420 list-style: square;
 421 color: #bbb;
 422 margin: -15px 0 15px 25px;
 423 }
 424
 425 #footer-area {
 426 background: #525588;
 427 color: #FFF;
 428 font-size: 90%;
 429 padding: 18px 0;
 430 overflow: hidden;
 431 /* curved border radius */
 432 -moz-border-radius-bottomright: 8px;
 433 -moz-border-radius-bottomleft: 8px;
 434 -webkit-border-bottom-left-radius: 8px;
 435 -webkit-border-bottom-right-radius: 8px;
 436 }
 437
 438 .footer-segment {
 439 float: left;
 440 margin-right: 20px;
 441 margin-left: 20px;
 442 width: 190px;
 443 }
 444
 445 footer aside h4 {
 446 color: #faf0e6;
 447 font-size: 16px;
 448 line-height: 1.5em;
 449 }
 450
 451 footer ul {
 452 list-style: none;
 453 margin: -15px 0;
 454 }
 455
 456 footer a:link, footer a:visited {
 457 color: #ccc;
 458 }
 459
 460 footer a:hover {
 461 text-decoration: underline;
 462 }
 463
 464 footer p {
 465 margin-top: -15px;
 466 color: #faf0e6;
 467 }