Recent Code - Template For News Site - CSS Stylesheet
Validate
- 1:@charset "utf-8";
- 2:/* CSS Document */
- 3: html,body,div,img,a img,p,span,a:link,ul,li,form{
- 4:margin:0px;
- 5:padding:0px;
- 6:list-style:none;
- 7:line-height:normal;
- 8:vertical-align:baseline;
- 9:}
- 10: a{
- 11:text-decoration:none;
- 12:}
- 13: .clearers{
- 14:display:block;
- 15:height:0px;
- 16:line-height:0px;
- 17:position:relative;
- 18:font-size:0px;
- 19:visibility:hidden;
- 20:clear:both;
- 21:overflow:hidden;
- 22:}
- 23: .clearer{
- 24:visibility:hidden;
- 25:display:block;
- 26:height:0px;
- 27:font-size:0px;
- 28:overflow:hidden;
- 29:clear:both;
- 30:}
- 31: body{
- 32:background-color:#eaedf1;
- 33:padding-left:3px;
- 34:padding-right:3px;
- 35:font-family:"Trebuchet MS", Arial, Helvectica, sans-serif;
- 36:padding-bottom:50px;
- 37:vertical-align:baseline;
- 38:}
- 39: h1,h2,h3,h4,h5,h6{
- 40:margin:0px;
- 41:padding:0px;
- 42:vertical-align:baseline;
- 43:overflow:hidden;
- 44:}
- 45: img{
- 46:}
- 47: a img{
- 48:border:none;
- 49:}
- 50: .header{
- 51:position:relative;
- 52:width:964px;
- 53:margin-left:auto;
- 54:margin-right:auto;
- 55:background-color:#FFFFFF;
- 56:height:120px;
- 57:}
- 58: .header .logo{
- 59:margin-top:31px;
- 60:position:relative;
- 61:float:left;
- 62:top:6px;
- 63:margin-left:8px;
- 64:display:inline;
- 65:}
- 66: .header .slogan{
- 67:margin-top:56px;
- 68:margin-left:10px;
- 69:position:relative;
- 70:float:left;
- 71:text-align:left;
- 72:font-size:15px;
- 73:line-height:20px;
- 74:color:#383d46;
- 75:}
- 76: .header .user{
- 77:position:relative;
- 78:float:right;
- 79:padding-top:32px;
- 80:padding-right:16px;
- 81:}
- 82: .header .user .username{
- 83:font-family:Myriad Pro;
- 84:text-align:right;
- 85:font-size:16px;
- 86:line-height:23px;
- 87:color:#252525;
- 88:}
- 89: .header .user .links{
- 90:position:relative;
- 91:display:block;
- 92:}
- 93: .header .user .links li{
- 94:position:relative;
- 95:float:left;
- 96:font-family:Myriad Pro;
- 97:font-size:15px;
- 98:line-height:24px;
- 99:color:#1e63b2;
- 100:padding-left:12px;
- 101:}
- 102:.header .user .links li a,
- 103: .header .user .links li a:visited{
- 104:color:#1e63b2;
- 105:text-decoration:none;
- 106:}
- 107: .header .user .links li a:hover{
- 108:text-decoration:underline;
- 109:}
- 110: .header .menuContainer{
- 111:display:block;
- 112:height:30px;
- 113:width:964px;
- 114:position:absolute;
- 115:bottom:0px;
- 116:left:0px;
- 117:background-color:#63666b;
- 118:z-index:1;
- 119:background-image:url(images/menuBG.jpg);
- 120:background-repeat:repeat-x;
- 121:background-position:top;
- 122:}
- 123: .header .menuContainer .menuLeft{
- 124:position:absolute;
- 125:left:0px;
- 126:top:0px;
- 127:z-index:1;
- 128:}
- 129: .header .menuContainer .menuRight{
- 130:position:absolute;
- 131:right:0px;
- 132:top:0px;
- 133:z-index:1;
- 134:}
- 135: .header .menu{
- 136:font-family:"Trebuchet MS", Arial, Helvectica, sans-serif;
- 137:font-size:14px;
- 138:line-height:21px;
- 139:color:#ffffff;
- 140:display:block;
- 141:position:relative;
- 142:z-index:2;
- 143:left:4px;
- 144:height:30px;
- 145:}
- 146: .header .menu li{
- 147:position:relative;
- 148:display:block;
- 149:float:left;
- 150:line-height:19px;
- 151:}
- 152:.header .menu li a,
- 153: .header .menu li a:visited{
- 154:color:#ffffff;
- 155:display:block;
- 156:float:left;
- 157:padding:6px;
- 158:padding-left:12px;
- 159:padding-right:12px;
- 160:height:18px;
- 161:line-height:18px;
- 162:}
- 163: .header .menu li a:hover{
- 164:color:#59A9F9;
- 165:}
- 166: .header .menu .selected{
- 167:text-align:left;
- 168:color:#0077ee;
- 169:background-color:#f7f7f7;
- 170:}
- 171:.header .menu .selected a,
- 172: .header .menu .selected a:visited{
- 173:color:#0077ee;
- 174:}
- 175: .header .menuContainer .search{
- 176:position:absolute;
- 177:top:1px;
- 178:right:12px;
- 179:padding:0px;
- 180:margin:0px;
- 181:z-index:2;
- 182:}
- 183: .header .menuContainer .search .input{
- 184:font-family:"Trebuchet MS", Arial, Helvectica, sans-serif;
- 185:text-align:left;
- 186:font-size:13px;
- 187:line-height:18px;
- 188:color:#8e8e8e;
- 189:background-position:top left;
- 190:background-repeat:no-repeat;
- 191:height:18px;
- 192:border:solid 1px;
- 193:width:200px;
- 194:overflow:hidden;
- 195:position:relative;
- 196:float:left;
- 197:top:3px;
- 198:margin-right:4px;
- 199:padding-left:4px;
- 200:}
- 201: .header .menuContainer .search .submit{
- 202:position:relative;
- 203:top:3px;
- 204:width:60px;
- 205:float:left;
- 206:}
- 207: .content{
- 208:position:relative;
- 209:margin-left:auto;
- 210:margin-right:auto;
- 211:margin-top:12px;
- 212:width:964px;
- 213:}
- 214: .cornerTopLeft{
- 215:overflow:hidden;
- 216:width:7px;
- 217:height:7px;
- 218:background-image:url(images/cornerTopLeft.jpg);
- 219:background-repeat:no-repeat;
- 220:position:absolute;
- 221:top:0px;
- 222:left:0px;
- 223:}
- 224: .cornerTopRight{
- 225:overflow:hidden;
- 226:width:7px;
- 227:height:7px;
- 228:background-image:url(images/cornerTopRight.jpg);
- 229:background-repeat:no-repeat;
- 230:position:absolute;
- 231:top:0px;
- 232:right:0px;
- 233:}
- 234: .cornerBottomLeft{
- 235:overflow:hidden;
- 236:width:7px;
- 237:height:7px;
- 238:background-image:url(images/cornerBottomLeft.jpg);
- 239:background-repeat:no-repeat;
- 240:float:left;
- 241:position:relative;
- 242:left:-10px;
- 243:bottom:-10px;
- 244:margin-top:-7px;
- 245:clear:left;
- 246:}
- 247: .cornerBottomRight{
- 248:overflow:hidden;
- 249:width:7px;
- 250:height:7px;
- 251:background-image:url(images/cornerBottomRight.jpg);
- 252:background-repeat:no-repeat;
- 253:float:right;
- 254:position:relative;
- 255:right:-10px;
- 256:bottom:-10px;
- 257:margin-top:-7px;
- 258:clear:right;
- 259:}
- 260: .content .left{
- 261:position:relative;
- 262:width:636px;
- 263:padding:10px;
- 264:background-color:#FFFFFF;
- 265:float:left;
- 266:font-family:'Lucida Grande','Lucida Sans','Lucida Sans Unicode',sans-serif;
- 267:}
- 268: .content .left .info{
- 269:position:relative;
- 270:display:block;
- 271:padding-top:2px;
- 272:height:20px;
- 273:font-size:11px;
- 274:line-height:19px;
- 275:}
- 276: .content .left .info .trail{
- 277:text-align:left;
- 278:color:#444444;
- 279:position:relative;
- 280:float:left;
- 281:}
- 282: .content .left .info .last_updated{
- 283:text-align:right;
- 284:color:#6d6d6d;
- 285:position:relative;
- 286:float:right;
- 287:}
- 288: .content .left .hr{
- 289:border-bottom:solid 1px;
- 290:border-color:#CCCCCC;
- 291:margin-bottom:12px;
- 292:}
- 293: .content .left .main{
- 294:position:relative;
- 295:width:350px;
- 296:float:left;
- 297:padding-bottom:10px;
- 298:}
- 299: .content .left .main .topStory{
- 300:border:solid 1px;
- 301:border-color:#CCCCCC;
- 302:position:relative;
- 303:margin-bottom:10px;
- 304:line-height:0px;
- 305:vertical-align:top;
- 306:}
- 307:.content .left .main h1,
- 308:.content .left .main h1 a,
- 309: .content .left .main h1 a:visited{
- 310:position:relative;
- 311:font-family:Georgia;
- 312:text-align:left;
- 313:font-size:24px;
- 314:line-height:31px;
- 315:overflow:hidden;
- 316:color:#143c67;
- 317:margin-bottom:8px;
- 318:font-weight:normal;
- 319:vertical-align:top;
- 320:}
- 321: .content .left .main h1 a:hover{
- 322:color:#0099FF;
- 323:}
- 324: .content .left .main p{
- 325:text-align:justify;
- 326:font-size:12px;
- 327:line-height:25px;
- 328:padding-right:5px;
- 329:padding-bottom:5px;
- 330:padding-left:1px;
- 331:color:#131313;
- 332:}
- 333:.content .left .main a.readMore,
- 334: .content .left .main a.readMore:visited{
- 335:text-align:left;
- 336:font-size:13px;
- 337:margin-right:10px;
- 338:line-height:21px;
- 339:color:#143c67;
- 340:float:right;
- 341:text-decoration:none;
- 342:}
- 343: .content .left .main a.readMore:hover{
- 344:color:#1b81ff;
- 345:}
- 346: .content .left .recent{
- 347:position:relative;
- 348:float:right;
- 349:width:264px;
- 350:padding-right:6px;
- 351:display:block;
- 352:padding-bottom:10px;
- 353:}
- 354:.content .left .recent h4,
- 355: .content h4{
- 356:font-weight:normal;
- 357:text-align:left;
- 358:font-size:16px;
- 359:line-height:20px;
- 360:color:#143c67;
- 361:margin:0px;
- 362:padding:0px;
- 363:margin-bottom:8px;
- 364:}
- 365: .content .left .recent ul{
- 366:display:block;
- 367:text-align:left;
- 368:color:#2f2f2f;
- 369:}
- 370: .content .left .recent li{
- 371:position:relative;
- 372:margin-bottom:10px;
- 373:padding-left:13px;
- 374:font-size:12px;
- 375:line-height:19px;
- 376:background-image:url(images/bullet.jpg);
- 377:background-position:-3px 4px;
- 378:background-repeat:no-repeat;
- 379:}
- 380:.content .left .recent li a,
- 381: .content .left .recent li a:visited{
- 382:line-height:19px;
- 383:}
- 384:body a,
- 385: body a:visited{
- 386:color:#2f2f2f;
- 387:}
- 388: body a:hover{
- 389:color:#0099FF;
- 390:}
- 391: .content .left .categories{
- 392:display:block;
- 393:position:relative;
- 394:margin-top:20px;
- 395:}
- 396: .content .left .categories h4{
- 397:text-align:left;
- 398:font-size:16px;
- 399:line-height:22px;
- 400:overflow:hidden;
- 401:color:#143c67;
- 402:font-weight:normal;
- 403:margin-bottom:10px;
- 404:}
- 405: .content .left .categories .category{
- 406:padding-bottom:6px;
- 407:padding-left:4px;
- 408:font-size:12px;
- 409:line-height:19px;
- 410:color:#2f2f2f;
- 411:float:left;
- 412:position:relative;
- 413:display:block;
- 414:width:310px;
- 415:padding-bottom:15px;
- 416:}
- 417: .content .left .categories .category ul li{
- 418:display:block;
- 419:padding-left:13px;
- 420:font-size:12px;
- 421:line-height:19px;
- 422:background-image:url(images/bullet.jpg);
- 423:background-position:-3px 4px;
- 424:background-repeat:no-repeat;
- 425:position:relative;
- 426:}
- 427:.content .left .categories .category ul li a,
- 428: .content .left .categories .category ul li a:visited{
- 429:line-height:19px;
- 430:font-size:12px;
- 431:}
- 432:.content .left a.viewAllStories,
- 433: .content .left a.viewAllStories:visited{
- 434:font-size:14px;
- 435:line-height:20px;
- 436:color:#143c67;
- 437:text-decoration:none;
- 438:clear:both;
- 439:float:right;
- 440:margin-right:5px;
- 441:margin-bottom:2px;
- 442:}
- 443: .content .left a.viewAllStories:hover{
- 444:color:#1b81ff;
- 445:}
- 446: .content .right{
- 447:display:block;
- 448:position:relative;
- 449:float:right;
- 450:width:276px;
- 451:background-color:#FFFFFF;
- 452:padding:10px;
- 453:margin-bottom:12px;
- 454:font-size:13px;
- 455:line-height:19px;
- 456:color:#2f2f2f;
- 457:}
- 458: .content .right ul{
- 459:position:relative;
- 460:display:block;
- 461:margin-top:10px;
- 462:}
- 463: .content .right ul li{
- 464:position:relative;
- 465:position:relative;
- 466:padding-bottom:13px;
- 467:padding-right:6px;
- 468:display:block;
- 469:line-height:20px;
- 470:}
- 471:.content .right ul li a,
- 472: .content .right ul li a:visited{
- 473:line-height:19px;
- 474:margin:0px;
- 475:}
- 476: .content .right ul li img{
- 477:position:relative;
- 478:padding:3px;
- 479:background-image:url(images/iconBG.jpg);
- 480:background-repeat:no-repeat;
- 481:float:left;
- 482:display:block;
- 483:height:44px;
- 484:margin-right:8px;
- 485:width:44px;
- 486:vertical-align:top;
- 487:}
- 488: .content .right ul li .lastcomment{
- 489:display:block;
- 490:font-size:12px;
- 491:line-height:20px;
- 492:color:#396fb2;
- 493:margin-top:2px;
- 494:}
- 495: .footer{
- 496:font-family:'Lucida Grande','Lucida Sans','Lucida Sans Unicode',sans-serif;
- 497:clear:both;
- 498:margin-top:42px;
- 499:position:relative;
- 500:width:944px;
- 501:padding:10px;
- 502:padding-top:0px;
- 503:margin-left:auto;
- 504:margin-right:auto;
- 505:background-color:#FFFFFF;
- 506:}
- 507: .footer h4{
- 508:font-family:"Trebuchet MS", Arial, Helvectica, sans-serif;
- 509:font-family:'Lucida Grande','Lucida Sans','Lucida Sans Unicode',sans-serif;
- 510:text-align:left;
- 511:font-size:17px;
- 512:line-height:normal;
- 513:color:#3d3d3d;
- 514:}
- 515: .footer .more{
- 516:position:absolute;
- 517:top:-27px;
- 518:line-height:23px;
- 519:}
- 520: .footer .blue{
- 521:color:#0479ef;
- 522:}
- 523: .footer .sitelinks{
- 524:position:relative;
- 525:padding:0px;
- 526:padding-top:10px;
- 527:margin:0px;
- 528:list-style:none;
- 529:}
- 530: .footer .sitelinks .category{
- 531:width:145px;
- 532:padding:5px;
- 533:display:block;
- 534:line-height:19px;
- 535:vertical-align:top;
- 536:display:block;
- 537:margin:0px;
- 538:float:left;
- 539:}
- 540: .footer .sitelinks .category li{
- 541:text-align:left;
- 542:font-size:12px;
- 543:line-height:21px;
- 544:color:#3d3d3d;
- 545:margin-top:4px;
- 546:}
- 547:.footer .sitelinks .category li a,
- 548: .footer .sitelinks li a:visited{
- 549:line-height:21px;
- 550:}
- 551: .footer .sitelinks .category h4{
- 552:text-align:left;
- 553:font-size:14px;
- 554:line-height:20px;
- 555:color:#3d3d3d;
- 556:overflow:hidden;
- 557:}
- 558: .footer .copy{
- 559:position:absolute;
- 560:left:10px;
- 561:bottom:-25px;
- 562:text-align:left;
- 563:font-size:12px;
- 564:line-height:normal;
- 565:color:#3d3d3d;
- 566:}
- 567: .footer .links{
- 568:position:absolute;
- 569:right:10px;
- 570:bottom:-25px;
- 571:text-align:right;
- 572:font-size:12px;
- 573:line-height:normal;
- 574:color:#3d3d3d;
- 575:}
- 576: .footer .links li{
- 577:float:left;
- 578:padding-right:10px;
- 579:padding-left:10px;
- 580:border-left:solid 1px;
- 581:border-color:#999999;
- 582:}
- 583: .footer .links .first{
- 584:border:none;
- 585:}
