/********************************************************** * Version : 2.0 * Project : Progym Junior AA * Madeby : Mathieu allaire **********************************************************/ /****************************** * HTML TAG RESET & CLEARFIX ******************************/ body,div,dl,dt,dd,ul,ol,li,h1, h2,h3,h4,h4,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; vertical-align: bottom; } a,h1 { overflow: hidden; outline: none; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h4,h6 { font-size: 100%; font-weight: normal; overflow: hidden; } q:before,q:after { content: ''; } abbr,acronym { border: 0;} .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear { display: inline-block; } html[xmlns] .clear { display: block; } * html .clear { height: 1%; } /****************************** * GENERAL ELEMENTS/CLASSES ******************************/ body { background: #1a1a1a; color: #404040; font-family: arial, sans-serif; font-size: 11px; } .hide { display: none; } a { color: #e51b23; } a:hover { text-decoration: none; } /****************************** * BASE/LAYOUT ******************************/ #container { width: 1000px; margin: 0 auto; padding: 30px 0; } /* ----------- HEADER ----------- */ #header { position: relative; background: transparent url(../images/header.png) no-repeat; width: 1000px; height: 110px; } #header h1 { display: none; } #header #ads_banner { position: absolute; top: 17px; right: 20px; } /* ----------- NAV ----------- */ #nav { background: transparent url(../images/nav.png) repeat-x; height: 40px; padding-left: 8px; } #nav li { position: relative; float: left; background: transparent url(../images/link.png) repeat-x; margin: 4px 3px 0 3px; } #nav li .tl { position: absolute; top: 0; left: 0; background: transparent url(../images/tl.png) no-repeat; width: 3px; height: 33px; text-indent: -9999px; } #nav li .tr { position: absolute; top: 0; right: 0; background: transparent url(../images/tr.png) no-repeat; width: 3px; height: 33px; text-indent: -9999px; } #nav .active { background: transparent url(../images/link-hover.png) repeat-x !important; } #nav .active .tl { background: transparent url(../images/tl-hover.png) no-repeat !important; } #nav .active .tr { background: transparent url(../images/tr-hover.png) no-repeat !important; } #nav .active a { text-decoration: underline; } #nav li a { display: block; height: 33px; padding: 0 22px; color: #fff; font-weight: bold; font-size: 14px; text-decoration: none; line-height: 33px; } #nav li a:hover { text-decoration: underline; } #nav .home a { width: 50px; } #nav .about a { width: 64px; } #nav .team a { width: 50px; } #nav .schedule-results a { width: 153px; } #nav .media a { width: 115px; } #nav .sponsors a { width: 110px; } #nav .contact a { width: 90px; } /* ----------- CONTENT ----------- */ #content { background: #fff; padding: 5px 4px 25px 4px; } #info-bar { position: relative; background: transparent url(../images/info-bar.png) repeat-x; height: 36px; margin-bottom: 5px; padding: 0 10px; border-left: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; line-height: 30px; } #info-bar p { height: 34px; } #info-bar #date { position: absolute; top: 0; right: 0; background: transparent url(../images/icons/calendar.png) no-repeat 5px 9px; padding: 0 10px 0 25px; border-left: 1px solid #d8d8d8; } #info-bar #date span { color: #e51b23; } #sidebar { float: left; width: 301px; } #sidebar .box { margin-bottom: 5px; } #sidebar .box h2 { background: transparent url(../images/sidebar-box-h.png) no-repeat; width: 291px; height: 30px; padding: 11px 0 0 10px; color: #fff; font-weight: bold; font-size: 14px; } #sidebar .box-content { background: #c3171e; padding: 5px; } #sidebar .box-footer { background: transparent url(../images/sidebar-box-f.png) no-repeat; width: 301px; height: 7px; } #next-games { width: 290px; margin-bottom: 5px; color: #fff; } #next-games th { text-align: center; padding-bottom: 5px; font-size: 12px; } #next-games td { text-align: center; padding: 5px 0; } #next-games .zebra { background: #b7161c; } #mvp img { display: block; width: 130px; margin: 0 auto; border: 3px solid #f01c25 } #mvp p { text-align: center; font-weight: bold; color: #fff; padding-top: 5px; font-size: 12px; } #main-sponsors li { background: transparent url(../images/main-sponsor.png) no-repeat; width: 293px; height: 76px; margin-bottom: 5px; } #main-sponsors li a { display: block; width: 293px; height: 76px; } #main-sponsors #progym img { display: block; position: relative; left: 85px; top: 4px; } #main-sponsors #living-room img { display: block; position: relative; left: 55px; top: 14px; } #main-sponsors #sta img { display: block; position: relative; left: 70px; top: 3px; } #main-sponsors #normandin img { display: block; position: relative; left: 80px; top: 3px; } .see-all { color: #fff; font-weight: bold; text-decoration: none; margin-left: 10px; } .see-all:hover { text-decoration: underline; } #social { background: #fff; border: 3px solid #f01c25; } #social li { border-bottom: 1px solid #dddddd; } #social li a { display: block; background: #fff; padding: 5px 5px 12px 5px; text-decoration: none; color: #404040; font-weight: bold; } #social li a:hover { background: #f7f7f7; } #social li a img { position: relative; top: 4px; } #social .last { border-bottom: 0; } #main { float: left; width: 688px; margin-left: 3px; } #main .box h2 { background: transparent url(../images/main-box-h.png) no-repeat; width: 675px; height: 28px; padding: 13px 0 0 13px; color: #fff; font-weight: bold; font-size: 14px; } #main .box { background: transparent url(../images/main-box.png) repeat-y; width: 688px; } #main .box-content { padding: 10px 15px; } #main .box-footer { background: transparent url(../images/main-box-f.png) no-repeat; width: 688px; height: 10px; } #main .post { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #dddddd; } #main .post h3 { font-weight: bold; font-size: 14px; padding-bottom: 5px; } #main .post-info { height: 15px; padding: 0 0 5px 0; } #main .post-info li { float: left; } #main .post-info li span { padding: 0 5px; } #main .post p { margin-bottom: 10px; padding-right: 10px; line-height: 16px; text-align: left; } #slideshow { background: url(../images/slideshow.png) no-repeat; height: 289px; overflow: hidden; margin-bottom: 5px; padding: 5px 0 0 5px; } #slideshow dl { width: 678px; height: 284px; } #slideshow img { display: block; width: 528px; } #slideshow .slides dt { cursor: pointer; height: 50px; line-height: 50px; font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; background: transparent url(../images/spines.png) top left no-repeat; color: #fff; } #slideshow .slides dt:hover { color: #b0151b; background-position: center left; } #slideshow .slides dt.active, #slideshow .slides dt.active:hover { cursor: default; color: #404040; background-position: bottom left; } #slideshow .slides dt .index { font-size: 28px; line-height: 45px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #b0151b; } #slideshow .slides dt.active .index { color: #c0c0c0; } #banner { background: url(../images/banner-bg.png) no-repeat; height: 145px; overflow: hidden; margin-bottom: 5px; padding: 3px 0 0 5px; } #banner img { display: block; width: 678px; height: 142px; } .contact #address li { margin-bottom: 2px; } #all-sponsors { display: block; width: 615px; margin: 10px 0 0 20px } /* ----------- FOOTER ----------- */ #footer { position: relative; background: #fff url(../images/footer.png) no-repeat bottom left; width: 1000px; height: 70px; border-top: 1px solid #dddddd; } #footer ul { height: 18px; margin: 15px 0 0 10px; } #footer ul li { float: left; height: 18px; } #footer ul li a { color: #e51b23 } #footer ul li span { padding: 0 5px; } #footer #copyright { margin-left: 10px; font-weight: bold; color: #464646; } #footer #madeby { position: absolute; top: 25px; right: 20px; background: #fff url(../images/ma.png) no-repeat top left; width: 48px; height: 18px; text-indent: -9999px; } #footer #madeby:hover { background: #fff url(../images/ma.png) no-repeat bottom left !important; }