/*================================================= * Version : 2.0 * Project : RadioActive 99.1 * Programer : Mathieu Allaire *=================================================*/ /****************************** * GENERAL ELEMENTS/CLASSES ******************************/ body { background: #404040 no-repeat top center; color: #404040; font-family: arial, sans-serif; font-size: 11px; } .hide { display: none; } .underline { display: inline-block; border-bottom: 1px solid #ff1125 } .box h2 { color: #fff; font-weight: bold; font-size: 14px; padding: 8px 0 0 10px; } .first-hover { height: 28px !important; border-bottom: 1px solid #dddddd !important; } .dark { background: #404040 url(../images/dark-bg-repeat.png) repeat-x; } .dark-color { background: transparent url(../images/dark-bg.jpg) no-repeat top center; } .light { background: #e6e6e6 url(../images/light-bg-repeat.png) repeat-x; } .light-color { background: transparent url(../images/light-bg.jpg) no-repeat top center; } /* ----------- FORMS */ .input-text { background: #fffad5 url(../images/input-bg.png) repeat-x; width: 415px; padding: 4px; border: 1px solid #b2b2b2; -moz-border-radius: 2px; -webkit-border-radius: 2px; font-family: arial; font-size: 11px; } .input-text:hover, .input-text:focus { border: 1px solid #404040; } textarea { background: #fffad5 url(../images/input-bg.png) repeat-x; width: 415px; height: 80px; padding: 4px; border: 1px solid #b2b2b2; -moz-border-radius: 2px; -webkit-border-radius: 2px; font-family: arial; font-size: 11px; } textarea:hover, textarea:focus { border: 1px solid #404040; } #error { background: transparent url(../images/icons/error.png) no-repeat center left; padding: 0 0 0 15px; margin-bottom: 15px !important; color: #e11f2c; } #success { background: transparent url(../images/icons/success.png) no-repeat center left; padding: 0 0 0 15px; margin-bottom: 15px !important; color: #9acc0e; } .button-1 { display: block; background: transparent url(../images/button-1.png) no-repeat; width: 109px; height: 21px; padding: 6px 0 0 20px; margin: 0 auto; color: #404040; text-decoration: none; } .button-2 { display: block; background: transparent url(../images/button-2.png) no-repeat; width: 68px; height: 21px; padding: 6px 0 0 18px; margin: 0 auto; color: #404040; text-decoration: none; } /****************************** * LAYOUT ******************************/ #container { width: 939px; margin: 0 auto 30px auto; } /* ----------- HEADER */ #header { position: relative; height: 115px; } #header h1 { position: absolute; top: 60px; left: 30px; background: transparent url(../images/logo.png) no-repeat; width: 235px; height: 35px; text-indent: -9999px; } #header h1 a { display: block; width: 221px; height: 32px; } #header ul { position: absolute; bottom: 10px; right: 30px; } #header ul li { float: left; color: #808080; } #header ul li span { padding: 0 5px; } #header ul li a { color: #fff; text-decoration: none; } #header ul li a:hover { text-decoration: underline; } #colors li a { float: left; display: block; width: 9px; height: 9px; margin: 3px 2px 0 0; text-indent: -9999px; } #colors #dark { background: transparent url(../images/icons/dark.png) no-repeat top left;} #colors #light { background: transparent url(../images/icons/light.png) no-repeat top left; } #colors .active { background-position: top right !important; } /* ----------- NAVIGATION */ #nav { position: relative; z-index: 110; background: transparent url(../images/nav-bg.png) no-repeat; width: 939px; height: 49px; padding: 5px 0 0 5px; } #nav li { position: relative; float: left; height: 33px; padding: 14px 0 0 0; text-align: center; } #nav a { display: inline-block; text-transform: uppercase; font-weight: bold; font-size: 14px; color: #313131; text-decoration: none; } #nav a:hover { border-bottom: 1px solid #ff1125 } #nav .active a { border-bottom: 1px solid #ff1125; } #nav a img { position: relative; top: -3px; } #nav #link-01 { width: 110px; } #nav #link-02 { width: 153px; } #nav #link-03 { width: 237px; } #nav #link-04 { width: 146px; } #nav #link-05 { width: 126px; } #nav #link-06 { width: 156px; } .dropdown:hover { background: #ff1b2b; color: #fff; } .dropdown .tl, .dropdown .tr { display: none; } .dropdown:hover .tl { display: block; position: absolute; top: 0; left: 0; background: transparent url(../images/dropdown-tl.png) no-repeat; width: 5px; height: 6px; text-indent: -9999px; } .dropdown:hover .tr { display: block; position: absolute; top: 0; right: 0; background: transparent url(../images/dropdown-tr.png) no-repeat; width: 5px; height: 6px; text-indent: -9999px; } .dropdown a { background: transparent url(../images/icons/arrow-drop-1.png) no-repeat center right; padding: 0 14px 0 0; } .dropdown:hover a { background: transparent url(../images/icons/arrow-drop-2.png) no-repeat center right; color: #fff !important; } .dropdown a:hover { border-bottom: 0 !important; } #nav li ul { position: absolute; top: -9999px; left: 0px; z-index: 100; background: #fff url(../images/dropdown-top.png) repeat-x; width: 300px; padding: 4px 0 0 0; } #nav li:hover ul { top: 44px; } #nav li ul li { display: block; float: none; padding: 0; height: 35px; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; font-weight: normal; font-size: 12px; } #nav li ul li a { display: block; background: none; height: 15px; padding: 10px 10px 10px 20px; border-bottom: 0 !important; text-transform: none; font-weight: normal; font-size: 11px; color: #313131 !important; text-decoration: none; text-align: left; } #nav li ul li a:hover { background: #f2f2f2; height: 15px; font-weight: bold; } #nav li ul li span { display: block; position: absolute; top: 15px; left: 8px; background: transparent url(../images/icons/dots.png) no-repeat top left; width: 4px; text-indent: -9999px; } #nav li ul li:hover span { background-position: top right; } #nav li ul .last, #nav li ul .last a:hover { -moz-border-radius: 0 0 4px 4px; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; } /* ----------- CONTENT */ #content { background: #fff; padding: 0 0 50px 0; } /* ------ TOP BAR */ #top { position: relative; height: 21px; padding: 5px 5px 0 5px; margin: 0 5px; border-bottom: 1px solid #dddddd } #top #breadcrumb li { float: left; } #top #breadcrumb li span { padding: 0 5px; } #top #breadcrumb li span img { position: relative; top: -2px; } #top #breadcrumb li a { color: #404040 } #top #breadcrumb .first a { text-decoration: none; font-weight: bold; color: #ff1125 } #top #colors { position: absolute; right: 8px; top: 7px; } #top #colors li { float: left; margin: 0 5px 0 0; } /* ------ MAIN LEFT */ #main { float: left; width: 606px; padding: 10px 5px 10px 10px; } #main .box { background: transparent url(../images/bg-main-box.png) repeat-y; width: 606px; } #main .box-foot { background: transparent url(../images/f-main-box.png) no-repeat; width: 606px; height: 26px; } #main .box h2 { background: transparent url(../images/h-main-box.png) no-repeat; width: 596px; height: 27px; } #main .inner-box h3 { background: #f2f2f2 url(../images/title-border.png) repeat-x bottom left; height: 39px; } #main .inner-box h3 span { display: block; background: #fff; width: 200px; height: 29px; padding: 10px 0 0 0; border-right: 1px solid #dddddd; font-weight: bold; color: #404040; text-align: center; } /* --- home */ #home .news { margin: 8px; padding: 10px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #808080; } #home .news h3 { background: transparent url(../images/icons/sheet.png) no-repeat center left; padding: 0 0 0 20px; font-size: 16px; font-weight: bold; color: #404040 } #home .news .info { height: 25px; } #home .news .info li { float: left; color: #404040 ; } #home .news .info li a:hover { text-decoration: none; } #home .news .info span { padding: 0 5px; } #home .news .info .first a { color: #ff1125 } #home .news .info .last a { color: #404040; } #home .news .info .last img { margin: 0 0 0 4px; } #home .news div .face { float: left; width: 58px; height: 44px; padding: 0 6px 0 0; } #home .news a { color: #ff1125 } #home .news-text { } #home .news div p { margin: 0 0 10px 0; color: #404040 ; } #home #pagination { height: 25px; margin-left: 10px; } #home #pagination li { float: left; margin: 0 5px 0 0; } #home #pagination li a { color: #000; } /* --- presenters */ #presenters { margin: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #808080; } #presenters .presenter { background: #fff; padding: 10px; height: 45px; border-bottom: 1px solid #dddddd; } #presenters .presenter.last { border-bottom: 0; } #presenters .presenter:hover { background: #f2f2f2; } #presenters .presenter .face { float: left; } #presenters .presenter div { float: left; width: 300px; margin: 0 0 0 5px; } #presenters .presenter h4 { font-weight: bold; color: #404040; font-size: 14px; } #presenters .email { color: #ff1125; } #presenters .email:hover { text-decoration: none; } #presenters .more { position: relative; padding: 0 0 0 15px; color: #404040; text-decoration: none; } #presenters .more span { position: absolute; top: 1px; left: 0; background: transparent url(../images/icons/more.png) no-repeat center left; width: 10px; text-indent: -9999px; } #presenters .more:hover { color: #ff1125; } #presenters .more:hover span { background-position: center right; } /* --- profile */ #profile { margin: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #404040; } #profile .face { float: left; padding: 5px; margin: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #profile ul { float: left; width: 460px; margin: 8px 8px 8px 0; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #404040; } #profile ul li { background: #fff; height: 26px; padding: 12px 0 0 10px; border-bottom: 1px solid #dddddd; } #profile ul li:hover { background: #fffad5; } #profile ul .last { border-bottom: 0; } #profile ul li a { color: #404040; } #profile ul li a:hover { text-decoration: none; } #profile ul li strong { background: transparent url(../images/icons/dot-red.png) no-repeat center left; padding: 0 0 0 10px; } /* --- contact */ #contact { margin: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #808080; } #contact #emails { height: 20px; padding: 10px 10px 5px 20px; border-bottom: 1px solid #dddddd; } #contact #emails li { float: left; background: transparent url(../images/icons/email.png) no-repeat center left; padding-left: 22px; margin: 0 5px 0 10px; } #contact #emails li a { color: #000; } #contact #emails li a:hover { text-decoration: none; } #contact #contact-info { height: 60px; padding: 20px 10px; } #contact #contact-info ul { float: left; margin: 0 50px 0 0; } #contact #contact-info ul li { margin: 0 0 3px 0; } #contact form { padding: 15px 15px 0 15px; } #contact #form-info { padding: 0 0 10px 0; } #contact form p { margin: 0 0 5px 0; } #contact form div { margin: 0 0 10px 0; } #contact form label { float: left; width: 130px; padding: 4px 0 0 0; font-weight: bold; color: #404040; } #contact form #required { padding-right: 5px; margin: 0 0 10px 0; text-align: right; } #contact form #submit { margin: 0 0 0 470px; font-weight: bold; } #contact form #submit:hover { color: #6c9511; } /* --- contests */ #contests { margin: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #808080; } #contests table td { padding: 6px 5px; border-bottom: 1px solid #dddddd; color: #404040; } #contests table .last td { border-bottom: 0; } #contests .name { background: transparent url(../images/icons/dot-red.png) no-repeat 10px center; width: 345px; padding-left: 23px; } #contests .date { background: #fffad5; width: 100px; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; text-align: center; } #contests .date img { position: relative; top: -1px; left: -2px; } #contests .participate { width: 140px; } #contests .participate a strong { font-weight: bold; color: #ed1928; } #contests .participate a:hover strong { color: #404040; } #contests #no-contests { padding: 10px; font-weight: bold; } /* --- participate */ #participate { margin: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #808080; } #participate #contest-name { background: transparent url(../images/icons/dot-red.png) no-repeat 10px center; height: 20px; padding: 10px 10px 5px 22px; border-bottom: 1px solid #dddddd; color: #404040; } #participate form { padding: 15px 15px 0 15px; } #participate #participate-info { padding: 0 0 10px 10px; } #participate form p { margin: 0 0 5px 0; } #participate form div { margin: 0 0 10px 0; } #participate form label { float: left; width: 130px; padding: 4px 0 0 0; font-weight: bold; color: #404040; } #participate form #required { text-align: right; padding-right: 5px; margin: 0 0 10px 0; } #participate form #submit { margin: 0 0 0 470px; font-weight: bold; } #participate form #submit:hover { color: #6c9511; } #participate #clue-contest { margin-bottom: 20px; } /* --- schedule */ #schedule { margin: 8px; color: #808080; } #schedule h3 span { width: 150px !important; } #schedule div { margin-bottom: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #schedule table td { height: 37px; padding: 0 10px; color: #404040; } #schedule table td a { color: #404040; } #schedule table td a:hover { text-decoration: none; } #schedule table .show { background: transparent url(../images/icons/arrow-1.png) no-repeat 25px center; width: 146px; padding: 0 20px 0 40px; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; font-weight: bold; } #schedule table .presenters { width: 380px; border-bottom: 1px solid #dddddd; } #schedule table .presenters a { margin-left: 5px; } #schedule table .time { width: 380px; border-bottom: 1px solid #dddddd; } #schedule table .presenters img { position: relative; top: -2px } #schedule table .time img { position: relative; top: -1px } #schedule table .last .show { border-bottom: 0; } #schedule table .last .time { border-bottom: 0; } /* --- musics */ #music { margin: 8px; color: #808080; } #music h3 span { width: 150px !important; } #music div { margin-bottom: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; } #music table td { height: 37px; padding: 0 10px; color: #404040; } #music table td a { color: #404040; } #music table td a:hover { text-decoration: none; } #music table .artist { width: 206px; padding: 0; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } #music table .artist a { position: relative; display: block; width: 146px; height: 44px; padding: 31px 10px 0 50px; text-decoration: none; font-weight: bold; } #music table .artist .arrow { position: absolute; top: 25px; left: 10px; background: transparent url(../images/icons/arrow-2.png) no-repeat center left; width: 29px; height: 27px; text-indent: -9999px; } #music table .artist a:hover { background: #f2f2f2; } #music table .artist:hover .arrow { background-position: center right !important; } #music table .song { width: 269px; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } #music table .song strong { background: transparent url(../images/icons/dot-red.png) no-repeat center left; padding: 0 0 0 10px; } #music table .rank { width: 121px; border-bottom: 1px solid #dddddd; } #music table .website { background: #fffad5; border-bottom: 1px solid #dddddd; } #music table .website img { position: relative; top: -2px; } #music table .last .artist { border-bottom: 0; } #music table .last .website { border-bottom: 0; } /* ------ SIDEBAR RIGHT */ #sidebar { float: left; width: 302px; padding: 10px 10px 10px 5px; } #sidebar .box { background: transparent url(../images/bg-side-box.png) repeat-y; width: 302px; margin: 0 0 7px 0; } #sidebar .box h2 { background: transparent url(../images/h-side-box.png) no-repeat; width: 292px; height: 27px; } #sidebar .box-foot { background: transparent url(../images/f-side-box.png) no-repeat; width: 302px; height: 26px; } #social-box p { padding: 8px; } #social-box ul { padding: 0 1px; } #social-box ul li a { display: block; height: 30px; padding: 5px 0 0 20px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; color: #b4b4b4; text-decoration: none; line-height: 25px; } #social-box ul li a img { float: left; margin: 2px 5px 0 0; } #social-box ul li a:hover { background: #f2f2f2; color: #000; font-weight: bold; } #twtr-widget-1 { border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; margin: 8px; } .switch-box { margin: 8px; border: 1px solid #dddddd; -moz-border-radius: 2px; -webkit-border-radius: 2px; color: #808080; } .tabs { height: 39px; } .tabs li { float: left; height: 39px; } .tabs li a { display: block; background: #f2f2f2; width: 141px; height: 28px; padding: 10px 0 0 0; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; text-align: center; color: #c0c0c0; text-decoration: none; } .tabs li a .icon { display: inline-block; width: 14px; height: 14px; text-indent: -9999px; } .tabs .last a { width: 142px; border-right: 0; } .tabs .active a { background: #fff; height: 29px; border-bottom: 0; font-weight: bold; color: #000; } .tabs .active .icon { background-position: top right !important; } #player a { display: block; text-align: center; color: #000; } #player object { width: 302px; margin-bottom: -3px; } #countdown-box ul li a .icon { background: transparent url(../images/icons/beat.png) no-repeat top left; } #countdown-box div ul li { position: relative; border-top: 1px solid #dddddd; } #countdown-box div .first { border: 0; } #countdown-box div ul li a { display: block; height: 30px; padding: 12px 0 12px 45px; color: #404040; text-decoration: none; } #countdown-box div ul li a .arrow { position: absolute; top: 12px; left: 10px; background: transparent url(../images/icons/arrow-2.png) no-repeat center left; width: 29px; height: 27px; text-indent: -9999px; } #countdown-box div ul li a strong { display: block; } #countdown-box div ul li a em { text-decoration: underline; font-style: normal; color: #808080; } #countdown-box div ul li a .pos { position: absolute; top: 12px; right: 15px; font-size: 22px; font-weight: bold; } #countdown-box div ul li a:hover { background: #f2f2f2; } #countdown-box div ul li a:hover .arrow { background-position: center right !important; } #countdown-box div ul li a:hover strong { font-weight: bold; } #countdown-box div ul li a:hover em { color: #ff1125; text-decoration: none; } #countdown-box div ul li a:hover .pos { color: #ff1125; } #schedule-box ul li a .icon { background: transparent url(../images/icons/calendar.png) no-repeat top left; } #schedule-box div ul li { border-top: 1px solid #dddddd; } #schedule-box div .first { border: 0; } #schedule-box div ul li a { display: block; background: transparent url(../images/icons/dot-red.png) no-repeat 10px center; height: 15px; padding: 12px 0 12px 25px; color: #404040; text-decoration: none; } #schedule-box div ul li a:hover { font-weight: bold; } /* ----------- FOOTER */ #footer { position: relative; background: transparent url(../images/footer-bg.png) no-repeat; width: 939px; height: 59px; } #copyright { font-weight: bold; padding: 15px 0 0 15px; } #nav-foot { padding: 2px 0 0 15px; } #nav-foot li { float: left; } #nav-foot li span { padding: 0 5px; } #nav-foot li a { color: #808080; } #nav-foot li a:hover { text-decoration: none; } #mediadvanced { position: absolute; top: 22px; right: 15px; } #mediadvanced a { text-decoration: none; color: #808080; } #mediadvanced a:hover { text-decoration: underline; } #mediadvanced li { float: left; padding: 0 0 0 10px; } #mediadvanced img { position: relative; top: -2px; }