/** * Stylesheet for * @author karen * @media screen, projection */ * { margin: 0;} html, body { height: 100%; } /* START LIGHTBOX */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:img/lightbox/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../img/lightbox/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../img/lightbox/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } /* END LIGHTBOX */ /* text */ p{ font-size: 12px; margin: 0 0 15px 0; line-height: 1.35em;} strong{font-weight: bold;} em { font-style: italic} span.yell{ color: #F8C602; } /* blockquote */ blockquote{ font-style: italic; font-size: 1.4em; font-family: "Trebuchet MS", Arial, Verdana; margin: 5px 0 15px 0; line-height: 1.5em;} img{ border: none;} img.icon_right{ float: right} img.icon_left{ float: left; margin: 0 0 0 10px} img.left{ float: left; clear: left; margin: 0 10px 10px 0} img.right{ float: right; margin: 0 0 10px 10px} .print_logo{ display: none} /* Clearfix */ .clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* link color */ a { color: #5d5c5c; text-decoration: underline } a:link { color: #5d5c5c; } a:visited { color: #5d5c5c; } a:hover { color: #5d5c5c; text-decoration: none; } a:active, a:focus { color: #000; } /* header tags */ h1 { background: black; color: white; display: block; float: left; padding: 3px 10px 3px 10px; clear: left; text-transform: uppercase; font-size: 0.80em; font-family: Tahoma, Arial, sans-serif; margin: 0 0 10px 0} h1 a{ color: white !important; } h2 { float: none; clear: left; font-family: Tahoma, Arial, Verdana; font-size: 1.10em; margin: 10px 0 5px 0; line-height: 1.2em; background: #DDDDDD; padding: 3px; display: block;} h2 a{ text-decoration: none; color: #000 !important;} h2 a:hover{ text-decoration: underline; } h3 { background: #FAC700; font-weight: bold; font-size: 1.10em; padding: 2px 4px 2px 4px; margin: 0 0 10px 0} h3 a { text-decoration: none; color: #000 !important;} h3 a:hover{ text-decoration: underline; } h4 { float: none; clear: left; font-family: Tahoma, Arial, Verdana; font-size: 1.05em; margin: 10px 0 5px 0; line-height: 1.2em; border-bottom: 1px solid #DDDDDD; padding: 3px; display: block; color: #5D5C5C;} h4 a{ text-decoration: none; color: #000 !important;} h4 a:hover{ text-decoration: underline; } h5{float: none; clear: left; font-family: Tahoma, Arial, Verdana; font-size: 0.90em; margin: 10px 0 5px 0; line-height: 1.2em; border-bottom: 1px solid #DDDDDD; padding: 3px; display: block; } /** * = GLOBAL * ---------------------------------------------------------- */ #container { width: 968px; margin: 0 auto; } #header { background: transparent url(../img/bg_header.jpg) no-repeat; display: block; height: 215px; } #header h1 { float: left; background: none} #header h1 a { display: block; width: 233px; height: 174px; background: url(../img/logo.jpg) no-repeat; text-indent: -9999px; overflow:hidden; position: relative; top: 25px; left: 30px; padding: 0; margin: 0; } #topnavig { background: url(../img/bg_topnavig.gif) no-repeat; display: block; float: right; width: 304px; height: 37px;} #topnavig ul { margin: 0} #topnavig li { float: left; color: white; padding: 7px 0 0 0} #topnavig li a{ display: block; margin: 0 0 0 8px; color: white; font-family: "Trebuchet MS", Arial, Verdana; text-transform: uppercase; font-size:0.80em; text-decoration: none; padding: 3px 5px } #topnavig li.first a{ margin: 0 0 0 10px; } #topnavig li a:hover, #topnavig li.selected a{ background: #CD1314; } .spot { width: 470px; float: left; clear: left; } .spot_txt { width: 210px; float: left; padding: 0; margin: 0 20px 0 5px} .spot_txt .title{ font-family: Tahoma, Arial, Verdana; font-size: 1.10em; line-height: 0.95em; margin: 0 0 5px 0; color: #000; background: #DDDDDD; padding: 3px; display: block; clear: left;} .spot_txt .date{ font-family: "Times New Roman", serif; font-style: italic; color: #626262; font-size: 0.85em; margin: 0 0 15px 0; float: left; clear: left;} .spot_txt .description{ font-family: Arial, sans-serif; font-size: 0.85em; float: left; clear: left;} .spot_txt a{ color: #000; font-weight: bold; text-decoration: underline; } .spot_txt a:hover{ text-decoration: none;} #menu { clear: both; width: 968px ; height: 52px; background: transparent url(../img/bg_menu.gif) no-repeat 0px -6px; margin:0; display: block;} #menu ul li { float: left; color: white; margin: 0 0 0 10px; padding: 11px 0 0 0} #menu ul li.first { margin-left: 30px; } #menu ul li a{ color: #fff; text-transform: uppercase; font-family: Tahoma, Arial, Verdana; font-size: 0.85em; text-decoration: none; padding: 5px 10px} #menu ul li a:hover, #menu ul li.selected a{ background: #fff; color: #000; } #main .top{ background: url(../img/bg_top_box_line.gif) no-repeat; padding: 30px 20px 0 30px } #main .center{ background: url(../img/bg_top_box.jpg) no-repeat; padding: 30px 20px 0 30px } #main .bottom{ background: url(../img/bg_bottom_clubs.jpg) no-repeat; line-height: 0px; font-size: 0px; height: 81px; } #main .bottom .clubs{ margin: 0 0 0 25px; padding: 5px 0 0 0} #main .bottom .clubs li{ float: left; margin: 0 21px 0 0; } #main #left { width: 579px; float: left; clear: left; display: block; padding: 0 22px 0 0; min-height: 400px; margin: 0 0 10px 0; min-height: 400px; } #main #left h1{ clear: left; } #main #left h1 a{ color: white; } #main #left h1.yellow{ background: #FAC700; color: black; } #main #content { clear: left;} #main #left .date { float: left; clear: left; font-family: "Times New Roman", serif; font-style: italic; color: #626262; font-size: 0.85em; margin: 0 0 10px 0 } #main #left .txt{ float: left; clear: left; width: 100%;} #main #sidebar { width: 295px; float: left; margin: 0 0 0 20px; } #main .banners_right { width: 300px; float: left; text-align: left; margin: 0; padding: 0; } #main .banners_right { margin: 5px 0 0 0; } #main .banners_right img{border: none; margin: 0 0 0px 0; float: right; clear: right; padding: 15px 0 0 0; background: url(../img/shadow_banners_big.jpg) no-repeat; margin: 0 0 5px 0; } #main ul{ font-size: 0.85em} /** * = related * ---------------------------------------------------------- */ .rel_art { /*border-top: 1px solid #ededed;*/ margin: 20px 0 10px 0; padding: 20px 0 0 0} .rel_links { border-top: 1px solid #ededed; margin: 20px 0 10px 0; padding: 20px 0 0 0 } .rel_links li{ background: url(../img/bullet_black.jpg) no-repeat 0 6px; padding: 0 0 0 12px} .rel_files { border-top: 1px solid #ededed; margin: 20px 0 10px 0; padding: 20px 0 0 0 } .rel_art li{ float: left; display: block; margin: 0 10px 0 0; } .art_files { /*border-top: 1px solid #ededed;*/ margin: 20px 0 10px 0; padding: 20px 0 0 0; } .art_files li{ background: #f9f9f9; padding: 5px 10px 5px 5px; border: 1px solid #f0f0f0; float: left;} .art_files li img{ vertical-align: middle;} /** * = sidebar * ---------------------------------------------------------- */ .archives { margin: 20px 0 0 0; float: left; display: block; } .archives ul { float: left; clear: left; margin: 10px 0 0 0; padding: 0 0 8px 0; display: block; width: 285px} .archives li{ float: left; display: block;padding: 10px 0px 5px 0; border-bottom: 1px solid #ededed; width: 71px} .categories { margin: 20px 0 0 0; float: left; display: block; } .categories ul { float: left; clear: left; margin: 10px 0 0 0; padding: 0 0 8px 0; display: block; width: 285px} .categories li{ float: left; display: block;padding: 10px 0px 5px 0; border-bottom: 1px solid #ededed; width: 140px; font-size: 0.95em;} .relatednews { margin: 20px 0 0 0; float: left; display: block; } .relatednews ul { float: left; clear: left; margin: 10px 0 0 0; padding: 0 0 8px 0; display: block; width: 285px} .relatednews li{ float: left; display: block;padding: 10px 0px 5px 0; border-bottom: 1px solid #ededed; width: 285px} .relatednews li.title_yellow{ background: #FAC700; color: black; padding: 3px 0 3px 6px; float: left; clear: left} .podcasts { margin: 20px 0 0 0; float: left; display: block; } .podcasts ul { float: left; clear: left; margin: 5px 0 0 0; padding: 0 0 8px 0; display: block; width: 285px} .podcasts li{ float: left; display: block;padding: 10px 0px 10px 16px; border-bottom: 1px solid #ededed; width: 280px; background: url(../img/arrow_black.jpg) no-repeat 0 11px; } /** * = PAGES * ---------------------------------------------------------- */ /* home */ #spotlight .top{ background: url(../img/bg_top_box.jpg) no-repeat; padding: 0 0 0 20px; } #spotlight .bottom{ background: url(../img/bg_bottom_box.jpg) no-repeat; line-height: 0px; font-size: 0px; height: 42px; } #spotlight h1{ margin: 20px 0 10px 0;} #spotlight .banners_right { width: 225px; float: left; margin: -20px 0 0 0} #spotlight .banners_right img{border: none; margin: 0 0 0px 0; float: right; clear: right; padding: 15px 0 0 0; background: url(../img/shadow_banners_small.jpg) no-repeat; margin: 0 0 5px 0; } #main_home .top{ background: url(../img/bg_top_box_grey.jpg) no-repeat; padding: 30px 20px 0 30px } #main_home .bottom{ background: url(../img/bg_bottom_box_grey.jpg) no-repeat; line-height: 0px; font-size: 0px; height: 42px; } #main_home #left { width: 600px; display: block; float: left; } #main_home .news { width: 265px; float: left; padding: 0 10px 0 0; margin: 0 20px 0 0} #main_home .news .title { float: left; clear: left; font-family: Tahoma, Arial, Verdana; font-size: 1.15em; margin: 10px 0 5px 0; line-height: 0.95em;} #main_home .news .date { float: left; clear: left; font-family: "Times New Roman", serif; font-style: italic; color: #626262; font-size: 0.85em; margin: 0 0 10px 0} #main_home .news .description { float: left; clear: left; font-family: Arial, sans-serif;} #main_home .news .description p{ margin: 0; padding: 0; text-align: justify} #main_home .news .block{ margin: 0 0 7px 0; padding: 0 0 15px 0;} #main_home .news .first{ border: none;} #main_home .news .more { float: right; display: block; font-size: 0.85em; padding: 3px 5px 3px 5px; margin:0;} #main_home .news .more a{ text-decoration: underline; font-weight: bold; color: #000 !important;} #main_home .news .more a:hover{ text-decoration: none; } #main_home .blog {width: 265px; float: left; padding: 0 0 0 10px; margin: 0 20px 0 0} #main_home .blog .title { float: left; clear: left; font-family: Tahoma, Arial, Verdana; font-size: 1.15em; margin: 10px 0 5px 0; line-height: 0.95em;} #main_home .blog .date { float: left; clear: left; font-family: "Times New Roman", serif; font-style: italic; color: #626262; font-size: 0.85em; margin: 0 0 10px 0} #main_home .blog .description { float: left; clear: left; font-family: Arial, sans-serif; } #main_home .blog .description p{ text-align: justify; } #main_home .blog .block{ margin: 0 0 10px 0; padding: 0 0 15px 0; } #main_home .blog .first{ border: none;} #main_home .blog .more { float: right; display: block; font-size: 0.85em; padding: 3px 5px 3px 5px; margin: 10px 0 0 0; } #main_home .blog .more a{ text-decoration: underline; font-weight: bold; color: #000 !important; } #main_home .blog .more a:hover{ text-decoration: none; } #main_home #sidebar { display: block; float: left; width: 275px; color: white; margin: 0 0 0 40px} #main_home #sidebar .block{ margin: 0; padding: 0} #main_home #sidebar h1{ background: #F8C602; float: left; clear: left; color: #000; margin: 0 0 20px 0} /* sidebar calendar */ #main_home #sidebar ul.calender{ margin: 0 0 20px 0 } #main_home #sidebar ul.calender .title{ float: left; clear: left; display: block; width: 180px; } #sidebar ul.calender .date{ display: block; float: left; margin: 5px 0 0 15px; } #main_home #sidebar ul.calender li{ border-bottom: 1px solid #898989; display: block; float: left; width: 275px; font-size: 0.80em; padding: 5px 0 5px 0;} #main_home #sidebar ul.calender li a{ color: #F8C602 !important; background: url(../img/arrow_yellow.jpg) no-repeat 0 2px; padding: 0 0 0 15px; margin: 0; display: block; float: left;} /* sidebar tweets */ #main_home #sidebar ul.tweets{ margin: 0 0 20px 0 } #main_home #sidebar ul.tweets .title{ float: left; clear: left; display: block; width: 180px; } #sidebar ul.tweets .date{ display: block; float: left; margin: 5px 0 0 15px; } #main_home #sidebar ul.tweets li{ border-bottom: 1px solid #898989; display: block; float: left; width: 275px; font-size: 0.80em; padding: 5px 0 5px 0; background: url(../img/arrow_yellow.jpg) no-repeat 0 5px; padding: 5px 0 5px 15px;} #main_home #sidebar ul.tweets li span a{ color: #fff; margin: 0; display: block; float: left;} #main_home #sidebar ul.tweets li span.yell a{ color: #F8C602; } /* #main_home #sidebar ul.tweets li span a{ color: white; } #main_home #sidebar ul.tweets li span.yell a{ color: #F8C602; } */ #main_home #doormat .top{ background: url(../img/bg_top_doormat.jpg) no-repeat; height: 15px; line-height: 1px; font-size: 1px; padding: 0 0 0 0;} #doormat .center{ background: url(../img/bg_center_doormat.jpg) no-repeat; height: 169px;} #doormat .bottom{ background: url(../img/bg_bottom_doormat.jpg) no-repeat; height: 77px;} #doormat .bottom .clubs{ margin: 0 0 0 25px; padding: 5px 0 0 0} #doormat .bottom .clubs li{ float: left; margin: 0 17px 0 0; } #doormat .center ul{ margin: 0 0 0 30px; padding: 20px 0 0 0; } #doormat .center ul li{ float: left; display: block; width: 190px; padding: 0 0 0 15px; margin: 0 20px 10px 0; } #doormat .center ul li a{ color: black; display: block; background: url(../img/arrow_trans.png) no-repeat 0 3px; height: 20px; border-bottom: 1px solid #e1bd31; text-decoration: none; padding: 0 0 5px 15px; font-size: 0.85em; } #doormat .center ul li a:hover{border-bottom: 1px solid #000; font-weight: bold; } /* general other pages */ #main .more { float: right; display: block; font-size: 0.85em; padding: 3px 5px 3px 5px; margin:0;} #main .more a{ text-decoration: underline; font-weight: bold; color: #000 !important;} #main .more a:hover{ text-decoration: none; } #main .buy a{ background: #FAC700; color: #000; font-weight: bold; text-transform: uppercase; font-size: 0.80em; padding: 4px; text-decoration: none;} #main .buy a:hover { text-decoration: underline;} /* community */ .community{ margin: 15px 0 0 0; padding: 0 0 10px 0; display: block; width: 590px; /* border-bottom: 1px solid #ededed; */} .community .url{clear:left; color:#626262; float:left; font-family:"Times New Roman",serif; font-size:0.85em; font-style:italic; margin:0 0 10px; } .community .logo{ float: right; clear: right; } /* win */ .default h1{ margin: 0 0 10px 0; } .default h2{ clear: none; float: none; margin: 30px 0 20px 0; } .winners { margin: 0 0 20px 0} .btn_winners a{ font-size: 0.85em; background: #39D0D9; color: #fff; padding: 2px 4px 2px 4px; text-decoration: none; } .btn_winners a:hover{ text-decoration: underline; } table{ border-collapse: collapse; width: 100%} tr { } td { border: 1px solid #c0c0c0; padding: 5px; font-size: 0.85em;} tr.odd td { background: #e4e4e4; } tr.even td { background: #fff; } /* links */ .link{ margin: 15px 0 0 0; padding: 0 0 10px 0; display: block; width: 590px; /* border-bottom: 1px solid #ededed; */ } .link .places{clear:left; display: block; color:#626262; font-family:"Times New Roman",serif; font-style:italic; margin:0 0 10px; } .link .logo{ float: right; clear: right; } .link ul li{ background: url(../img/bullet_black.jpg) no-repeat 0 6px; padding: 0 0 0 12px} /* partners */ .partner{ margin: 15px 0 0 0; padding: 0 0 10px 0; display: block; width: 590px; /*border-bottom: 1px solid #ededed; */} .partner img { border: 1px solid #ededed; } .partner .desc{ float: left; width: 585px; padding: 3px 0 0 0 } .partner .desc span a{ font-size: 0.85em; } .partner ul { } .partner ul li{ background: url(../img/bullet_black.jpg) no-repeat 0 6px; padding: 0 0 0 12px} /* clubs */ .block_clubs h2{ background: url(../img/arrow_black.jpg) no-repeat 0 1px ; padding: 0 0 3px 15px; border-bottom: 1px solid #ededed; display: block; float: none;} .block_clubs h2 a{ text-decoration: none;} .block_clubs{ margin: 15px 0 0 0; padding: 0 0 10px 0; display: block; width: 590px; } /*.clubs img { border: 1px solid #ededed; }*/ .block_clubs .desc{ float: left; width: 400px; padding: 3px 0 0 0 } .block_clubs .desc span a{ font-size: 0.85em; } .block_club h2{ background: url(../img/arrow_black.jpg) no-repeat 0 1px ; padding: 0 0 3px 15px; border-bottom: 1px solid #ededed; display: block; float: none;} .block_club h2 a{ text-decoration: none;} .block_club{ margin: 15px 0 0 0; padding: 0 0 10px 0; display: block; width: 590px; } /*.clubs img { border: 1px solid #ededed; }*/ .block_club .logo{ padding: 0 15px 5px 0; float: left; } .block_club .desc{ width: 500px; padding: 3px 0 0 0 } .block_club .desc span a{ font-size: 0.85em; } .block_club .road { display: block; float: left; clear: left; /*border-top: 1px solid #ededed;*/ padding: 20px 0 0 0; width: 600px} .block_club .road .map{ display: block; float: left; clear: left; margin: 10px 0 0 0 } .block_club .address { display: block; float: left; margin: 10px 0 0 5px} .block_club .last_news { display: block; float: left; clear: left; /* border-top: 1px solid #ededed;*/ padding: 20px 0 0 0; margin: 20px 0 0 0 } .block_club .wannabe { display: block; float: left; clear: left; padding: 20px 0 0 0; margin: 20px 0 0 0; width: 580px; } .block_club .last_news ul { margin: 20px 0 0 0; display: block; float: left; clear: left; width: 580px; } .block_club .last_news ul li{ border-bottom: 1px solid #ededed; display: block; float: left; width: 570px; background: url(../img/arrow_right.jpg) no-repeat 0 5px; padding: 0 0 0 10px; margin: 5px 0 0 0} .block_club .last_news span.title{ display: block; float: left;} #main #left .block_club .last_news span.date{ display: block; float: right; clear: right; } .indaclub{ display: block; margin: 0 15px 20px 0; float: left; display: block; width: 280px; } a.rss{ float: right; margin: -5px 0 0 0 } .clubs_address{ float: left; margin: 0 0 0 10px} /*.clubs ul li{ background: url(../img/bullet_black.jpg) no-repeat 0 6px; padding: 0 0 0 12px}*/ /* news */ .news_block{ margin: 10px 0 0 0; width: 575px; border-bottom: 1px solid #ededed; } .news_block img.eyecatch { float:left; margin: 7px 10px 0 0 } .news_content{ float: left; width: 480px; padding: 0 0 20px 0; margin: 0 0 10px 0; } .news_content h2{ margin-top: 8px} #main .news_block .more a{ text-decoration: underline; font-weight: bold; color: #000 !important;} #main .news_block .more a:hover{ text-decoration: none; } #main .news_block .more { float: right; display: block; font-size: 0.85em; padding: 3px 5px 3px 5px; margin:0;} .news_content .txt .info{ font-size: 0.85em; } .filesize{ font-size:10px; } /* media */ .block_media { display: block; float: left; width: 580px; padding: 0 0 20px 0; margin: 0; } .block_media h2{ padding-top: 0; margin-top:0;} .small_media { float: left; margin: 0 10px 0 0; } .media_thumb{ border: 1px solid #DDD; width:76px; height:76px; float: right; margin:0 0 5px 10px} #main .block_media .more { float: left; display: block; font-size: 0.85em; padding: 3px 5px 3px 0px; margin:0;} #main .block_media .more a{ text-decoration: underline; font-weight: bold; color: #000 !important;} #main .block_media .more a:hover{ text-decoration: none; } /* agenda */ .agenda_block { margin: 20px 0 0 0; width: 570px;} .agenda_block .eyecatch { float: right; margin: 0 0 0 10px} .agenda_block .affiche { float: left; margin: 0 10px 0 0} .agenda_block h2{ margin: 0 0 10px 0; } .agenda_block h4{ margin: 0 0 5px 0; } .agenda_content { display: block; float: left; width: 570px} .agenda_content_overview { display: block; float: left; width: 330px; margin:0 0 0 10px} /* #main #left .agenda_content .date { display: block; color: black; font-style: normal; font-size: 1.2em; width: 460px; margin: 0} */ .agenda_content .lineup { display: block; float: left; width: 570px } .agenda_content_overview .lineup { display: block; float: left;} /* pagination */ .pagination { float: right; margin: 8px 0 8px 0; display: block; width: 580px; text-align: right;} .pagination .paginator_float{ float: right; margin: 0 9px 0 0; } .pagination .paginator_float .prev{ float: left; margin: 0 10px 0 0; display: block;} .pagination .paginator_float .numbers{ float: left; } .pagination .paginator_float .next{ float: right; margin: 0 0 0 10px; display: block;} .pagination .paginator_float .next a, .pagination .paginator_float .prev a{ color: #000; font-size: 0.85em; } .pagination .disabled { display: none; } .pagination span{ display: block; float: left; padding: 3px 2px; font-size: 0.85em; } .pagination span a, .paginator a{ color: white!important; padding: 3px 7px; background: #000; text-decoration: none} .pagination span.current{ background: #FAC700; color: black; padding: 3px 7px; margin: 0 2px}