/* Title: CSS Date: 2010 Author: WWW. Solutions 1. Global reset & variables 2. Master Style 3. Control Style A. TAb B. Modal C. Sliding D. Gallery E. Player F. Footer 4. Pages 100. OBSOLETE A. Placeholders 165 */ /* 1. Global Reset & variables @define {color0: #666; color1: #C69675;}*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 8pt; font-family: Arial,helvetica,sans-serif; vertical-align: baseline; } ol, ul {list-style: none;} table {border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal; vertical-align:top;} h1, h2, h3, h4, h5, h6 {font-weight:normal;} h2 {background:#000; width:100%; height:18px; color:#FFF; font-weight:bolder; padding:2px 0 0 5px;} h3 {font-weight:bolder;} h4 {font-weight:bolder; color:#000; margin-top:5px;} img, iframe {border-style:none; border-width:0;} input[type=text],input[type=password] {height:13px; color:#333; border: solid 1px #cccccc; width:200px; padding-left:4px; font-size:8pt;} input[type=checkbox] {height:13px; border: solid 1px #cccccc; color:#CC9966;} input[type=text]:focus, input[type=password]:focus {outline:solid 1px #000;} select {color:#CC9966; border: solid 1px #cccccc; width:200px; padding-left:2px;} textarea {color:#333333; border: solid 1px #cccccc; font-size:8pt; font-family:Arial, helvetica;} em {} p {margin-bottom:5px;} a, a:link, a:visited, a:active {color:#000; text-decoration:none; } a:hover {background:#000; color:#eee;} a.subSelected {background:#000; color:#FFF;} a.clean:hover {background:none; color:#000;} a.more {color:#CC9966; font-weight:bold; padding:2px;} a.more:hover {background:#000; color:#fff} p.read, span.read {color:#CC9966; font-size:8pt; font-weight:bold;} .clear {clear:both;} .bigger {font-size:10pt; font-weight:bolder;} .border {border:solid 1px #ccc;} .redborder {border:solid 2px #FF0000;} .floatleft {float:left; display:inline;} /*to avoid IE double margin bug*/ .floatright {float:right; display:inline;} /*to avoid IE double margin bug*/ .dot {background:url(images/bg_dotborder.gif) repeat-x left top; height:1px; width:100%; margin:0 0 10px 0;} .dotborder {border:solid 1px #000;} .S {margin:0 0 2px 0 !important;} .divider {padding-top:10px; margin:5px 0 10px 0; background:url(images/bg_dotborder.gif) repeat-x left top; width:100%;} .positiveInfo {margin:10px auto; width:400px;} .negativeInfo {} p#summary {margin:5px 0 5px 0; font-weight:bolder;} .helpTextActive {color:#999 !important; padding-left:5px !important; font-size:9pt !important;} .addvideo {padding:5px;} a.add {background:url(images/ico/add.png) no-repeat; padding-left:20px; color:#FFF; font-weight:bold; } /* 2. Master Style */ body {background:#FFF url(images/bg_texture.jpg); color:#222;} #topL {position:absolute;top:0; left:0; background: url(images/bg_header_left.jpg) left top no-repeat; width:546px; height:153px; z-index:-1;} a.newsletter {position:absolute;top:0; left:50%; background:url(images/bg_news.png) no-repeat; width:50px; height:44px;} a.newsletter:hover {background:url(images/bg_news_hover.png) no-repeat; } #container {width:980px; margin:10px auto; font-size:40% } h1#logo {left:5px; width:250px; height:82px; background:url(images/logo.gif) left top no-repeat; text-indent:-9999em; padding-bottom:5px;} h1#logo a {display:block; width:250px; height:82px;} /* .authentication, .authenticated{position:absolute; top:10px; right:10px;} .authentication input {width:120px;} .authentication a {padding:5px;} .authenticated {} a.authAction {color:#CC9966; font-weight:bold; padding:2px 5px 2px 5px;} a.authAction:hover {background:#000; color:#fff} */ #auth {position:relative; float:right; } #auth input {width:120px;} #auth a {padding:5px;} .menu {background:url(images/bg_menu.jpg);width:100%; height:17px; padding-top:3px; margin-bottom:2px;} .menu li {float:left; margin: 0 20px 10px 0;} .menu li.first {margin-left:5px;} .menu li.last {float:right;} .menu li.last a {font-weight:normal; font-style:italic;} .menu li a {background:none;font-weight:bold; font-size:8pt;} .menu li a:hover {color:#FFF;} .menu li.current a {color:#FFF;} #socialmenu {width:100%; text-align:right;} #socialmenu input {margin-left:10px; height:50px; width:50px;} .content0 {float:left; display:inline; width:540px; padding-right:10px;} .content1 {float:left; display:inline; width:300px; padding-right:10px;} .content01 {float:left; display:inline; width:850px; padding-right:10px;} .content2 {float:left; display:inline; width:120px;} .content00 {width:980px; display:inline;} .moduletitle {background:#000; width:100%; height:15px; color:#FFF;} .title {background:#000; width:100%; height:15px; color:#FFF; margin-bottom:2px; } .moduletitle a, .title a, .moduletitle p, .title p {margin-left:5px;} .title a, .title p, .moduletitle a, .moduletitle p {color:#fff;} .title a:hover {color:#CC9966;} .moduletitle p, .title p {margin-bottom:0px;} .module {margin-bottom:20px; width:100%} .item {padding-top:5px; cursor:pointer;} .itemtitle {color:#CC9966; font-weight:bold;} .itemthumb {float:left;} .itemdescription{position:relative; top:5px; left:5px; } .itemcomments {padding:15px 0 0 25px; width:73px; height:15px; background:url(images/bg_comments.png) no-repeat top left; color:#FFF; position:relative; float:right; display:inline;} #news_sel div.hover a span.itemcomments, #sessions_sel div.hover p.itemcomments {background:url(images/bg_comments_hover.png); color:#000;} .listItem {padding-bottom:5px;} .listItem p.listItemTitle {font-size:8pt; font-weight:bold;} .listItemInfo {margin-left:110px;} .video {padding-bottom:5px;} .video a {font-size:8pt; font-weight:bold;} .videoinfo {margin-left:90px;} .error {color:#FF0000;} .checkimage {width:15px; height:15px;} span.asterisk {color:#ff2b06; font-size:18pt; color:Red; line-height:7pt; font-weight:900; vertical-align:bottom; margin-left:5px;} #ad0 {position:relative; top:15px; right:0; float:right;} embed {z-index:-30;} #pickupModule {width:100%; height:70px; background:url(images/bg_pickup.png) no-repeat; padding:10px;} /*3.control Style */ .alternating {background:#CECECE;} .actionbar {height:30px;} .actionbar a {font-size:8pt; font-weight:bold; padding:5px;} .actionAnchor {font-size:8pt; font-weight:bold; padding:5px;} /* B. Modal */ #simplemodal-overlay {background-color:#fff; cursor:wait;} #simplemodal-container {background:#eee url(images/bg_dialog.jpg) repeat-x; border:solid 1px #000; border:solid 1px #000;} #simplemodal-container a.modalCloseImg {background:url(images/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-15px; cursor:pointer; border-style:none;} .modalcontent {padding: 10px 20px 5px 20px; width:600px;} .form div.col {width:250px;} .form div label {display:block; margin-bottom:6px;} .form p {font-style:italic; font-size:7pt;} .popupbar {height:30px; margin-top:10px;} .popupbar a {padding:5px;} /* C. Sliding */ .slide { list-style-type: none; padding: 0; margin: 0 0 30px; border:none; } .slide ul { padding: 0; margin: 0; float: left; display: block; width: 100%; } .slide li {cursor: pointer; list-style-type: none; padding: 0; margin: 0; float: left; display: block; width: 100%; background:url(images/bg_sliding_title.jpg) repeat-x;} .slide li.active>a { background: url('images/close.gif') no-repeat center right; } .slide a.category {text-decoration: none; border-bottom: 1px solid #ccc; font-weight:800; height:15px; color: #FFF; padding: 0 10px; display: block; cursor: pointer; background: url('images/open.gif') no-repeat center right;} .slide li ul li { background: #7FD2FF; font-size: 0.9em; } /* E. Player */ div.titlenavi {width:450px; float:left;} div.titlenaviAlt{float:left; width:475px; background:#000; height:15px; padding:0 0 0 5px;} div.titlenaviAlt a{color:#FFF;} div.navi {width:60px;background-color:#000; height:12px; float:right; padding-top:3px;} div.navi a {width:8px;height:8px; float:left;margin-right:5px;background:url(images/controls/navigator.png) 0 0 no-repeat;cursor:pointer; overflow:hidden} div.navi a:hover{background-position:0 -8px;} div.navi a.active{background-position:0 -16px;} a.scroll:hover {color:#FFF;} div.overview_sessions {width:540px; height:220px; overflow:hidden; position:relative;} #sessions_sel {position:absolute; width:2000em; clear:both;} #sessions_sel div {float:left; width:180px; height:220px; cursor:pointer;} #sessions_sel div.hover {background-color:#000;} #sessions_sel div.hover a {color:#fff;} #sessions_sel div.active {cursor:default;} #news_sel {position:absolute; height:2000em; clear:both;} #news_sel div {cursor:pointer;} #news_sel div.hover {background-color:#000;} #news_sel div.hover a {color:#fff;} div.overview_log {width:300px; height:95px; overflow:hidden; position:relative;} #log_sel {position:absolute; height:2000em; clear:both} #log_sel div {cursor:pointer; width:420px;} #log_sel div.hover {background:#000;} #log_sel div.hover a {color:#fff;} div.playerView {height:810px; width:100%; overflow:hidden; position:relative} div.playeritem {padding:5px; height:66px; margin-bottom:5px; cursor:pointer;width:540px;} #view_sel {position:absolute; height:2000em;clear:both} #view_sel div:hover {background:#000;} #view_sel div:hover a {color:#fff;} #view_sel div:hover .titel {color:#CC9966;} div.tv {background:#000000;} div.tv a {color:#FFF;} div.tv a:hover {color:#CC9966;} div.overview_tv {width:300px; height:180px; overflow:hidden; position:relative;} .tv_sel {position:absolute; height:2000em; clear:both;} /* F. Footer */ .footer {background:url(images/bg_footer.jpg);color:#fff; width:940px; height:80px; padding:20px; } .footer div a {color:#FFF;} .footer div a:hover {background:none; color:#ddd;} h1#FourcastLogo {width:236px; height:71px; background:url(images/4cast.png) left top no-repeat; text-indent:-9999em;} h1#FourcastLogo a {display:block; width:236px; height:71px;} div.FourcastAddress {position:relative; float:left; left:275px;} div.FourcastLocator {position:relative; float:left; left:380px;} /*div.FourcastFeedback {position:relative; float:left; left:60px; width:280px;} div.FourcastFollow {position:relative; float:right;}*/ div.FourcastFriends {position:relative; float:left; left:500px;} input.footerTx {height:20px; width:140px; background:url(images/controls/input.png) no-repeat; border:none; padding:2px; padding-left:4px;} input.footerTxL {height:20px; width:250px; background:url(images/controls/input_l.gif) no-repeat; border:none; padding:2px; padding-left:4px; } textarea.footerTxArea {height:130px; width:250px; background:url(images/Controls/input_area.png) no-repeat; border:none;padding:4px; resize:none; } input.footerTxL:focus, input.footerTx:focus , .footer input:focus {outline:none;} textarea.footerTxArea:focus {outline:none;} .footerBt {position:absolute; width:20px; height:20px;} #mb {float:right; background:url(images/media_belgium_work.png) left top no-repeat; text-indent:-9999em; width:311px; height:38px; margin:20px 0 10px 0; } /* E. Grid */ .gridPager td {margin-top:10px; background:#333;} .gridPager a {color:#FFF; padding:2px; font-weight:bold; } .gridPager a:hover {background:#3399FF; font-weight:bold;} /*4. Pages */ /* A. Shop */ .shopitem {float:left; display:block; width:165px; height:280px; margin:2px; padding:5px; background:#000;} .shopitem a {color:#FFF;} #shopmenu lu, #shopinfo lu {list-style: none; margin: 10px; padding: 0;} #shopmenu li {float:left; cursor:pointer; width:100px;} #shopinfo li {float:left; cursor:pointer; width:170px;} #shopmenu li a, #shopinfo li a {padding:5px;} /* B. Meteo */ .meteoPane iframe, .iframe {border:solid 1px #333; margin-bottom:5px; z-index:-1;} .meteoPane div {margin-bottom:15px;} .meteoSubtitle {padding:5px; font-weight:bold; margin-top:5px;} ul.tabs {list-style:none;} ul.tabs li {float:left;list-style-image:none !important;} ul.tabs a {padding:5px 20px 5px 20px; margin-right:50px; font-weight:bold;} ul.tabs a.first{margin-right:20px !important;} ul.tabs a.current, ul.tabs a.current:hover {color:#fff; background:#000;} ul.tabs a:hover{background:#000; color:#fff;} /* 100. OBSOLETE */ /* A. Placeholders */ #sessionImg {background:url(images/sessions.jpg) no-repeat; width:540px; height:215px; } #contactImg {background:url(images/contact.jpg) no-repeat; width:540px; height:215px; }