/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Algemene stylesheet CSS voor satichting EFFEBIJMOEDERAN, september 2009 © Stylesheet by Mosselman multimedia 1. Basis layout omvat : algemene styles, layout: header , 2 col pagina opbouw , footer(optioneel) , content , tools , navigatie, eyecather 2. Elementen styles : H, p, ul/li, ahref, class, other :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */ /* +---------------- GENERAL STYLES ------*/ * { margin: 0; } html, body { margin: 0px; padding: 0px;} body { font: 100% Arial, Helvetica, sans-serif ; background-color: #a83936; } img { display:block; border: none; margin: 0px; padding: 0px; } em { color: #000; font-style: normal; } /* ------------------- DIV LAYOUT -----------------------*/ div#wrapper { min-height: 100%; height: auto !important; height: 100%; left: 50%; } div#wrapper { position: absolute; width: 924px; text-align: left; z-index: 0; margin-left: -462px; } div#header { position: relative; width: 824px; height: 100px; z-index: 1; margin: 5px 0px 0px 100px; } div#header-image { position: relative; float: left; width: 160px; height: 100px; z-index: 2; margin: 5px 0px 0px 0px;} div#header-slogan { position: relative; float: left; width: 320px; height: 50px; z-index: 2; margin: 5px 0px 0px 0px; } div#header-effe { position: relative; float: right; width: 270px; height: 40px; z-index: 2; margin: 20px 0px 0px 0px; } div#content { float: left; width: 924px; } div#nav { float: left; text-align:left; width: 100px; padding: 10px 0px 0px 0px; margin: 0px 0px 20px 0px; } div#left { float: left; width: 455px; min-height: 760px; margin: 0px; padding: 0px 0px 20px 15px; background-color: #FFFFFF; height: 100%; } div#right { float: right; width: 340px; min-height: 725px; margin: 0px; padding: 0px; background-color: #FFFFFF; } div#news { width: 340px; min-height: 140px; padding: 0px; margin: 0px; background-color: #BF4C34; border-bottom: #a83936 solid 10px; } div#offering { width: 340px; min-height: 140px; padding: 0px; margin: 0px; margin: 0px 0px 0px 0px; } div#info { width: 310px; padding: 0px; margin: 0px; background-color: #fff; margin: 5px 0px 0px 0px; padding: 0px;} div#footer { float:left; text-align:left; height: 30px; width: 825px; padding: 10px 0px 0px 0px; margin: 0px 0px 0px 100px; border-top: #e9792e solid 7px; } /* ------------------- CONTENT STYLES -----------------------*/ /* ------------------- H styles -----------------------*/ /* H1 */ #header-slogan h1 { position: relative; float:left; font-family: "Trebuchet MS", Arial, Helvetica; font-size: 2.4em; font-weight:400; line-height: 0.9em; color: #ffffff; margin: 0px; padding: 0px 0px 0px 0px; } #left h1 { font-size: 1.2em; font-weight:200; color: #d25c34; margin: 0px ; padding: 10px 0px 5px 5px; line-height: 1.1em;} .offering-content-txt h1 { font-size: 1.0em; font-weight:200; color: #ffffff; margin: 0px ; padding: 15px 0px 5px 10px; line-height: 1.0em; } /* H2 */ #header-slogan h2 { position: relative; float:left; clear:left; font-size: 0.80em; font-weight:400; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; letter-spacing: 0.05em;} #left h2 { font-size: 1.1em; font-weight:200; color: #d25c34; margin: 0px ; padding: 10px 0px 5px 5px; line-height: 1.1em;} #news h2 { position: relative; float:left; height: 22px; width: 190px; font-size: 1.2em; font-weight:400; color: #e9792e; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 5px; background-color: #828282; } #offering h2 { position: relative; float:left; height: 22px; width: 190px; font-size: 1.2em; font-weight:400; color: #e9792e; margin: 0px 0px 0px 0px; padding: 0px 0px 10px 0px; background-color: #a83936; } #info h2 { width: 160px; font-size: 1.1em; font-weight:400; color: #fff; margin: 50px 0px 10px 0px ; padding: 0px 0px 0px 5px; background-color: #e9792e; } /* H3 */ #header-slogan h3 { position: relative; float:left; clear:left; width: 200px; font-size: 1.00em; font-weight:400; color: #ffffff; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; letter-spacing: 0.05em; } #header-effe h3 { position: relative; float:left; clear:left; width: 110px; font-size: 2.10em; font-weight:400; color: #e9792e; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; letter-spacing: 0.05em; } #news h3 { position: relative; float:left; height: 22px; width: 145px; font-size: 0.9em; font-weight:400; color: #e9792e; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #828282; } #offering h3 { position: relative; float:left; height: 22px; width: 150px; font-size: 0.9em; font-weight:400; color: #e9792e; margin: 0px 0px 0px 0px; padding: 0px 0px 10px 0px; background-color: #a83936; } /* H4 */ #header-effe h4 { position: relative; float:left; width: 150px; font-size: 0.80em; font-weight:400; color: #fff; margin: 0px 0px 0px 0px; padding: 5px 0px 0px 0px; letter-spacing: 0.05em; } /* ------------------- P styles -----------------------*/ p { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #left p { font-size: 0.9em; color: #000; margin: 5px 0px 0px 0px; padding: 0px 0px 0px 5px; } #right p { font-size: 0.9em; color: #000; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #info p { font-size: 0.9em; color: #000; margin: 0px 0px 0px 5px; padding: 0px 0px 5px 0px; } #news p { clear:left; margin: 0px 0px 30px 0px; padding: 5px 0px 5px 5px; color: #FFFFFF; } #footer-copyr p { font-size: 0.7em; color: #000; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } /* ------------------- UL/LI styles -----------------*/ /* ul */ #left ul { margin: 10px 0px 10px 20px; padding: 0px 0px 0px 0px; } #nav ul { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #nav ul ul { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } /* li */ #left li { font-size: 0.9em; color: #000; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } /* ------------------- navigation -----------------------*/ #nav li { padding: 0px 0px 0px 0px; margin: 0px 0px 3px 0px; list-style: none; display: inherit ; width: 100px; } #nav li.current_page_item { padding: 0px 0px 0px 0px; margin: 0px 0px 3px 0px; list-style: none; display: inherit ; width: 100px; background-color:#828282; } #nav li.current_page_parent { padding: 0px 0px 0px 0px; margin: 0px 0px 3px 0px; list-style: none; display: inherit ; width: 100px; background-color:#828282; } /* li li */ #nav li li { padding: 0px 0px 0px 0px; margin: 0px; list-style: none; border-right:none; display: none; width: 100px; } #nav li.current_page_item li { padding: 0px 0px 0px 0px; margin: 0px; list-style: none; border-right:none; display: block; width: 100px; } #nav li.current_page_parent li { padding: 0px 0px 0px 0px; margin: 0px; list-style: none; border-right:none; display: block ; width: 100px;} #nav li li.current_page_item { padding: 0px 0px 0px 0px; margin: 0px; list-style: none; border-right:none; display: block ; width: 100px;} /* ------------------- A HREF styles -----------------------*/ /* general */ a img { border:none; outline:none; } a { padding: 0px; margin: 0px; color: #000; text-decoration: underline; } a:hover { padding: 0px; margin: 0px; color: #fff; background-color: #828282;} #header-slogan h2 a:link, #header-slogan h2 a:visited { text-decoration: none; background: none; color: #fff; } #header-slogan h1 a:link, #header-slogan h1 a:visited { text-decoration: none; background: none; color: #fff; } #news a:link, #news a:visited { color: #fff; } /* +---------------- navigatie links, 1e niveau ------*/ #nav li a:link, #nav li a:visited { width: 98px; padding: 0px 0px 0px 2px; display: block; text-decoration:none; font-size: 1.0em; color:#fff; font-weight:400; } #nav li a:hover { width: 98px; padding: 0px 0px 0px 2px; text-decoration:none; font-size: 1.0em; } #nav li.current_page_item a:link, #nav li.current_page_item a:visited { width: 98px; padding: 0px 0px 0px 2px; text-decoration:none; font-size: 1.0em; color:#fff; font-weight:400; } #nav li.current_page_parent a:link, #nav li.current_page_parent a:visited { width: 98px; padding: 0px 0px 0px 2px; text-decoration:none; font-size: 1.0em; color:#fff; font-weight:400; } /* +---------------- navigatie links, 2de niveau ------*/ #nav li li a:link, #nav li li a:visited { text-decoration:none; font-size:0.8em; color:#000; font-weight:400; } #nav li li a:hover { text-decoration:none; font-size:0.8em; color:#fff; font-weight:400; } #nav li.current_page_item li a:link, #nav li.current_page_item li a:visited { width: 98px; text-decoration:none; font-size:0.8em; color:#000; font-weight:400; } #nav li.current_page_item li a:hover { width: 98px; text-decoration:none; font-size:0.8em; color:#fff; font-weight:400; } #nav li.current_page_parent li.current_page_item a:link, #nav li.current_page_parent li.current_page_item a:visited { width: 98px; text-decoration:none; font-size:0.8em; color:#fff; font-weight:400; } #nav li.current_page_parent li.current_page_item a:hover { width: 98px; text-decoration:none; font-size:0.8em;; color:#fff; font-weight:400; } #nav li.current_page_parent li a:link, #nav li.current_page_parent li a:visited { width: 98px; text-decoration:none; font-size:0.8em; color:#000; font-weight:400; } #nav li.current_page_parent li a:hover { width: 98px; text-decoration:none; font-size:0.8em; color:#fff; font-weight:400; } /* ------------------- Class styles -----------------------*/ /* layout classes */ .offering-content { width: 340px; height: 149px; padding: 0px; margin: 0px; margin: 0px 0px 0px 0px; } .offering-content-img { float: left; position:relative; height: 144px; width: 210px; padding: 0px; margin: 0px; margin: 0px 0px 5px 0px; } .offering-content-txt { float: left; position:relative; height: 144px; width: 130px; padding: 0px; margin: 0px; background-color: #B55B31; margin: 0px 0px 5px 0px; vertical-align: middle; } /* style classes */ .orange { color: #e9792e; } .white { color: #fff; } /* images classes */ /* link classes */ /* form classes */ /* ------------------- IMAGE STYLES -----------------------*/ #text-sizer img { display:inline; padding: 0px; margin: 0px; } #left-images img { margin: 0px; padding: 0px 0px 10px 0px;} #left-images1 img { float: left; margin: 0px; padding: 0px 0px 10px 10px;} #offering .offering-content-img img { width: 210px; height: 144px; } /* ------------------- OTHER STYLES -----------------------*/