/*-------------------------------------------------------------- * Filename: main.css * Description: Main layout for PCD Congress * Client: Orief - www.oriex.fr * Author: Ivan Tatic - www.simplifiedstudio.com * Optimised for: Safari, Firefox 3, IE 7, Opera * Version: 1.0 / 03302009 --------------------------------------------------------------*/ /* Globals resets ---------------------------------*/ body, html{ padding: 0; margin: 0; font: normal 12px/1.5em Arial, Helvetica, sans-serif;} p, h1, h2, h3, h4 ,h5, h6{ padding: 0; margin: 0; font-weight: normal; font-size: 1em;} ul, ol, dl, dt, dd{ list-style: none; padding: 0; margin: 0;} html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, 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; vertical-align: baseline; background: transparent; } /* Helper classes ---------------------------------*/ .visible{ visibility: none !important;} .hidden{ display: none !important;} .indent{ text-indent: -99999px !important;} /* Layout ---------------------------------*/ body{ background: #f2f2f2;} #warper{ background:#fff url('../img/top.png') no-repeat; width: 792px; margin: 0 auto; padding: 5px 18px;} #content{ margin: 18px 0;} #left{ width: 516px; float: left; padding-right: 22px;} #right{ width: 222px; background: #f5f5f5 url('../img/right-column-border.png') top left repeat-y; float: left; padding: 0px 12px 16px 20px; position: relative;} /* Common */ .goleft{ float: left; width: 45%; margin-right: 10px;} .goright{ float: right;} #content a { color: #bd0070; padding: 0 1px;} #content a:hover{ text-decoration: none; background: #bd0070; color: #fff; padding: 0 1px} #right h2, #left h2, .yellowbox h2 { color: #010101;} #right, #left{color: #444; text-align: justify;} #right p, #left p{ margin: 7px 0;} p.breadcrumb{ background: url('../img/breadcrumb-bg.png') no-repeat; display: block; height: 25px; line-height: 25px; padding: 0 18px; } p.breadcrumb a{ text-decoration: none;} .intext{ float: left; margin: 0.4em 1em 0.2em 0;} hr{ height: 1px; border: none; background: #999; color: #999; outline: none; margin: 16px 0;} /* Right column */ #right h2{ background: url('../img/right-column-title.png') no-repeat; font: bold 14px/30px Helvetica, Arial, sans-serif; width: 254px; position: relative; left: -20px; text-indent: 20px; display: block; margin: 14px 0 8px 0;} #right .notop{ margin: 0 0 8px 0 !important;} #right{ font: normal 11px/1.5em "Lucida Grande", Verdana, sans-serif;} #right p.name{ margin-top: 1.2em; line-height: 20px; background: url('../img/quote.jpg') no-repeat bottom left; padding-bottom: 6px; color: #000;} #right p.name strong { text-transform: uppercase;} #right cite a { font-style: normal;} #right ul.logo-list{ padding: 0; margin: 5px 0;} #right ul.logo-list li { padding: 0; margin: 2px 0; background: transparent;} #right ul.logo-list li a img{ border: 2px solid #ccc; width: 218px;} #right ul.logo-list li a:hover img{ border: 2px solid #bd0070;} #right ul.logo-list li a:hover{ background: none;} /* Sidebar e@PCD*/ #right h2 span{ color: #bd0070; position: relative;} #right h2.effect { text-indent: 15px;} #right h2.effect img{ position: absolute; right: 10px; top: 4px;} #right h2.indent { text-indent: -999999px !important;} #right li.small-image-spacer img { margin-top: 20px; } .epcd-btn{ display: block; clear: both; width: 230px; height: 116px; background: url('../images/epcd-button.png') no-repeat; text-indent: -9999px; position: relative; left: -10px;} .epcd-btn:hover{ background: url('../images/epcd-button.png') no-repeat !important; text-decoration: none !important; color:transparent !important;} #content a.bt-request-invitation:link, #content a.bt-request-invitation:visited { background: none; color: #fff; padding: 0; } #content a.bt-request-invitation:hover { background: none; color: #fff; padding: 0;} #content a.bt-request-invitation img {display: block; margin: 10px 0;} /* Left column */ #left p.name{ margin: 1.6em 0 0 0; line-height: 20px; background: url('../img/testimonial.jpg') no-repeat bottom left; color: #000; padding-bottom: 6px;} #left cite.testimonial{ background: #f2f2f2 !important; display: block; padding: 8px;} #left cite.testimonial img{ float: left; margin: 0 16px 0 0;} #left h1{ font: bold 24px/26px Helvetica, Arial, sans-serif; display: block; margin: 14px 0 8px 0; color: #bbd622; letter-spacing: -1px;} #left h2{ font: bold 15px/20px Helvetica, Arial, sans-serif; display: block; margin: 28px 0 8px 0;} #left h3{ font: bold 12px/16px "Lucida Grande", Helvetica, Arial, sans-serif; display: block; margin: 6px 0; text-transform: uppercase;} #left{ font: normal 11.22px/1.5em "Lucida Grande", Verdana, sans-serif;} #left div#programme-box{ position: relative;} #left div#programme-box h2 span, #left div#programme-box h3 span{ position: absolute; display: block; width: 78px; height: 16px; font: bold 10.22px/16px "Lucida Grande", Verdana, Arial, sans-serif; left: 0; top: 0; text-transform: uppercase; text-align: right; padding: 0 3px 0 0;} #left div#programme-box h2 span{ background: #bd0070; color: #fff;} #left div#programme-box h3 span{ background: #dadada; color: #bd0070;} #left div#programme-box h3{ font: bold 13px/16px Helvetica, Arial, sans-serif; color: #272727; position: relative; padding-left: 88px; text-transform: none !important; margin: 12px 0 0 0;} #left div#programme-box h2{ font: bold 14px/17px Helvetica, Arial, sans-serif; color: #bd0070; position: relative; padding-left: 88px; margin: 24px 0 0 0;} #left div#programme-box h3 a{ font-size: 11px !important;} #left div#programme-box p{ padding-left: 88px; margin: 0 6px 0 0;} #left a.top{ display: block; border: 1px solid #ccc; border-width: 1px 0 0 0; text-align: right; padding: 2px 0 !important; margin: 14px 0; } .yellowbox{ background: url('../img/important-box-bottom.png') bottom left no-repeat; padding: 0 0 6px 0; margin: 0 0 10px 0;} .yellowbox h2{ margin: 0 !important; padding: 12px 12px 2px 12px; background: url('../img/important-box-top.png') top left no-repeat; display: block; width: 516px;} .yellowbox *{ padding: 0 12px;} .yellowbox cite{ display: block; margin: 10px 0;} .yellowbox cite img{ float: left; margin: 0 16px 10px 0; padding: 0;} .yellowbox img{ float: left; padding: 0; margin: 8px 12px 8px 16px;} .yellowbox p { font-size: 11.44px !important;} .yellowbox a.btn, .yellowbox a{ padding: 0 !important;} .yellowbox a.btn span{ padding: 0 32px 0 0 !important;} /* Header ---------------------------------*/ #header{ background: url('../img/header.png') no-repeat; display: block; width: 792px; height: 86px; margin: 18px 0;} #header h2{ text-indent: -9999px; display: block;} #header h1 a{ display: block; text-indent: -9999px; width: 200px; height: 86px;} /* Footer ---------------------------------*/ #footer p{ font: normal 11px/1.4em "Lucida Grande", Verdana, sans-serif; padding: 0.2em 0; margin: 0 12px; color: #666;} #footer p strong{ color: #000;} #footer p a{ color: #bd0070;} #footer p a:hover{ text-decoration: none; background: #bd0070; color: #fff;} /* Navigation ---------------------------------*/ ul#navigation{ background: url('../img/navigation-bg.png') no-repeat; display: block; height: 104px; padding: 0 8px; position: relative; z-index: 990;} ul#navigation li{ margin: 44px 0 0 1px; float: left; display: block; background: url('../img/tab-bg-left.png') no-repeat top left; height: 30px; position: relative;} ul#navigation li a{ float: left; padding: 0 9px 0 6px; color: #fff; text-decoration: none; margin: 0 1px 0 3px; height: 30px; background: url('../img/tab-bg-right.png') no-repeat top right; font: bold 12px/30px "Lucida Grande", Verdana, sans-serif; } ul#navigation li.current {background-position: bottom left;} ul#navigation li.current a{background-position: bottom right; color: #ec008c;} ul#navigation li:hover {background-position: bottom left;} ul#navigation li:hover a{background-position: bottom right; color: #000;} /* Drop down */ ul#navigation li ul{ display: none;} ul#navigation li:hover ul{ display: block; position: absolute; z-index: 1000; top: 30px; border-top: none; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; border-left: 1px solid #f2f2f2; left: 0;} ul#navigation li:hover ul li{ display: block; clear: both; width: 200px; background: #e6e6e6 !important; margin: 0; padding: 0;} ul#navigation li:hover ul li a{ background: #e6e6e6 url('../img/tab-menu-list-item.png') no-repeat 10px 50%; width: 166px; padding: 0 8px 0 26px; margin: 0; font: normal 11px/30px "Lucida Grande", Verdana, sans-serif;} ul#navigation li:hover ul li a:hover{ background: #dadada url('../img/tab-menu-list-item.png') no-repeat 10px 50%; color: #bd0070;} /* ul#navigation li ul{ display: none;} ul#navigation li:hover ul, ul#navigation li.current ul{ display: block; position: absolute; margin: 29px 0 0 9px; background: #e6e6e6 !important; height: 30px; left: 0px; width: 780px;} ul#navigation li:hover ul{ z-index: 100;} ul#navigation li.current ul{ z-index: 50;} ul#navigation li:hover ul li, ul#navigation li.current ul li{ padding: 0; margin: 0; background: #e6e6e6 !important;} ul#navigation li:hover ul li a, ul#navigation li.current ul li a{ padding: 0 0 0 8px; font-size: 11px !important; line-height: 29px; margin: 0 14px 0 0; background: #e6e6e6 url('../img/tab-menu-list-item.png') no-repeat 0% 50%; color: #ec008c !important;} ul#navigation li:hover ul li a:hover, ul#navigation li.current ul li a:hover{ color: #000 !important;}*/ /* Language bar ---------------------------------*/ ul#language{ position: absolute; z-index: 9999; top: 127px; margin: 0 0 0 744px;} ul#language li{ float: left; display: block;} ul#language li a{ float: left; display: block; color: #fff; width: 20px; height: 15px; text-align: center; font: bold 10px/15px "Lucida Grande", Verdana, sans-serif; text-decoration: none; text-transform: uppercase;} ul#language li a:hover{color: #f4f001;} ul#language li.selected a{background: url('../img/language-select.png'); color: #ec008c;} /* Lists ---------------------------------*/ #content ul{ margin: 6px 0 6px 24px;} #content ul li { margin: 3px 0; background: url('../img/list-style.png') 0% 6px no-repeat; padding-left: 12px; text-align: left !important;} #right ul { margin: 6px 0px 6px 16px;} .yellowbox ul { margin: 6px 0px 6px 28px;} .yellowbox li { padding: 0;} ul.participant{ margin: 0 0 -20px 0 !important;} ul.participant li{ margin: 0 !important; padding: 0 0 0 14px !important; display: block !important; width: 48%;} ul.participant li.odd{ margin-right: 2%;} ul.participant li.even{float: right; margin-left: 2%;} ul.partners{ overflow: auto; margin: 0 !important; padding: 0 !important; background: none !important; width: 222px;} ul.partners li{ margin: 0 !important; padding: 0 !important; float: left; background: none !important;} ul.partners li a{ float: left; display: block; width: 109px; color: #f5f5f5 !important;} ul.partners li a:hover{ text-decoration: none !important; color: #f5f5f5 !important; background: #f5f5f5 !important;} /*ul.partners li a img{ width: 105px; height: 60px; display: block; outline: none; border: none; }*/ ul.partners li a:hover img{ color: #f5f5f5 !important; background: #f5f5f5 !important;} #content ul.press li{ background: none !important; padding-left: 0px; font: bold 15px/20px Helvetica, Arial, sans-serif;} #content ul.press li ul li{ border-bottom: 1px solid #d0d0d0; margin: 3px 0; background: url('../img/list-style.png') 0% 6px no-repeat !important; padding-left: 12px; font: normal 11.22px/1.5em "Lucida Grande", Verdana, sans-serif !important;} #content ul.press li ul li a{ display: block;} #content ul.press li ul li a:hover{ background: #fff;} #content ul.press li ul li a img{border: 1px solid #e2e2e2; background: #fff; padding: 2px;} #content ul.press li ul li a:hover img{ background: #fff !important; border-color: #bd0070;} #content ul.winners li{ float: left; width: 125px; height: 185px; text-align: center !important; font-size: 10px; background: none;} #content ul.winners li strong{ display: block; font-size: 11.44px !important;} #content ul.winners li img{ display: block; width: 80px; height: 80px; margin: 0 auto 6px auto;} #content ul.mention{ margin: 0; padding: 0;} #content ul.mention li{ float: left; width: 115px; height: 160px; text-align: center !important; font-size: 10px; background: none;} #content ul.mention li strong{ display: block; font-size: 11.44px !important;} #content ul.mention li img{ display: block; width: 80px; height: 110px; margin: 0 auto 6px auto;} /* Network links ---------------------------------*/ ul.network{ border: 1px solid #ccc; border-left: 0; border-right: 0; background: #f5f5f5; padding: 0.6em 0; font: normal 11px/2em "Lucida Grande", Verdana, sans-serif; margin-bottom: 0.5em;} ul.network li { display: block; padding: 0; margin: 0; height: 2em;} ul.network li a{ background: url('../img/network-list.png') no-repeat 20px 50%; color: #666; text-decoration: none; display: block; padding-left: 40px; border: 1px dashed #f5f5f5; border-left: 0; border-right: 0; height: 2em;} ul.network li a strong { color: #000;} ul.network li a:hover{ background: #fff url('../img/network-list.png') no-repeat 20px 50%; border-color: #e0e0e0;} ul.network li a:hover strong { color: #bd0070;} /* Forms, buttons and fancy links ---------------------------------*/ a#network{ font: bold 9px/11px "Lucida Grande", Verdana, sans-serif; display: inline-block; background: #ccc; color: #000; text-decoration: none; padding: 2px 18px 2px 6px; background: #ccc url('../img/network-arrow-down.png') no-repeat 95% 50%; float: right;} a.btn{ font: bold 12px/30px Helvetica, Arial, sans-serif; display: inline-block; text-transform: uppercase; text-decoration: none; color: #000 !important; background: url('../img/button-left.png') top left no-repeat; height: 28px; overflow: hidden; cursor: pointer;} a.btn span{ background: url('../img/button-right.png') top right no-repeat; display: inline-block; height: 28px; padding-right: 32px; margin-left: 16px;} a.btn:hover{ color: #ec008c !important; background: url('../img/button-left.png') top left no-repeat !important;} a.btn:hover span{background: url('../img/button-right.png') top right no-repeat !important;} form#newsletter, form#contact{ padding: 0; margin: 0; width: 100%;} form#newsletter fieldset, form#contact{ padding: 0; margin: 0; width: 100%;} form#newsletter p{background: url('../img/newsletter-field.png') no-repeat; display: block; width: 217px; height: 21px;} form#newsletter p input{ background: transparent; border: none; padding-top: 4px; height: 16px; display: block; width: 187px; color: #666; font: normal 11px/11px "Lucida Grande", Verdana, sans-serif; margin: 0 15px; outline: none;} form#newsletter button { border: 0; margin: 0; padding: 0; display: block; text-decoration:none; color: #000; font: bold 11px/25px Helvetica, Arial, sans-serif !important; cursor:pointer; overflow:visible; background: url('../img/form-button.png') no-repeat; height: 25px; text-transform: uppercase; width: 115px; text-align: left; padding: 0 0 0 14px;} form#newsletter button:active{ padding: 0 0 0 14px; margin: 0; } form#newsletter button:hover{ color: #ec008c;} form#contact{ margin-top: 1em;} form#contact label{ font: normal 11px/11px "Lucida Grande", Verdana, sans-serif; padding: 0 0 0 10px;} form#contact p{background: url('../img/form-fields-input.png') no-repeat; display: block; width: 217px; height: 21px; margin-top: 0px;} form#contact p input{ background: transparent; border: none; padding-top: 4px; height: 16px; display: block; width: 187px; color: #444; font: normal 11px/11px "Lucida Grande", Verdana, sans-serif; margin: 0 15px; outline: none;} form#contact div.txt{ background: url('../img/form-input-textarea.png') no-repeat; width: 436px; height: 154px; display: block; padding: 8px; margin: 0 0 8px 0;} form#contact div.txt textarea{background: transparent; overflow: auto; border: none; outline: none; width: 436px; height: 154px; font: normal 11px/16px "Lucida Grande", Verdana, sans-serif; color: #444;} form#contact button { border: 0; margin: 0; padding: 0; display: block; text-decoration:none; color: #000; font: bold 11px/28px Helvetica, Arial, sans-serif !important; cursor:pointer; overflow:visible; background: url('../img/form-contact-button.png') no-repeat; height: 28px; text-transform: uppercase; width: 152px; text-align: left; padding: 0 0 0 14px;} form#contact button:active{ padding: 0 0 0 14px; margin: 0; } form#contact button:hover{ color: #ec008c;} form#contact ul{ padding: 0; margin: 0 0 8px 10px;} form#contact ul li{ padding: 0; margin: 0; background: transparent; display: block; float: left; width: 80px; line-height: 14px;} /* Tables ---------------------------------*/ table{ width: 100%; margin: 8px 0;} th{ background: #f2f2f2; font-size: 13px; font-weight: normal; height: 22px; line-height: 22px; padding: 0.3em 0.5em; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;} td{ padding: 0.3em 0.5em; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;} /* Registration forms ---------------------------------*/ div#div_code{ margin-top:18px;} form#register p{ position: relative;} span.text1rose{ position: absolute; top: 2px; left: -8px;} span.text1rose strong{ color: #c10000;} form#register label span{ color: #C10000;} form#register input[type=text], form#register select{ background:#FFFFFF; border:2px solid #DFDFDF; padding: 2px;} form#register input[type=text]{ width: 65%;} form#register button, #mainForm button{ border: 0; margin: 0; padding: 0; display: block; text-decoration:none; color: #000; font: bold 11px/28px Helvetica, Arial, sans-serif !important; cursor:pointer; overflow:visible; background: url('../img/form-contact-button.png') no-repeat; height: 28px; text-transform: uppercase; width: 152px; text-align: left; padding: 0 0 0 14px;} form#register button:active, #mainForm button:active{ padding: 0 0 0 14px; margin: 0; } form#register button:hover, #mainForm button:hover{ color: #ec008c;} form#register a.btn, #mainForm a.btn{ font-size: 11px; line-height: 32px;} form#register a.btn span, #mainForm a.btn span{ margin-left: 15px;} div#div_conferences, div#div_coordonnees, div#div_societe{ margin-top: 32px;} div#errortext{ padding: 10px 0;} .error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;} .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;} .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;} .success {background:#E6EFC2;color:#264409;border-color:#C6D880;} .error a {color:#8a1f11;} .notice a {color:#514721;} .success a {color:#264409;} /* Facebox ---------------------------------*/ #facebox .b{background:url("../img/yellow-border/b.png");} #facebox .tl{background:url("../img/yellow-border/tl.png");} #facebox .tr{background:url("../img/yellow-border/tr.png");} #facebox .bl{background:url("../img/yellow-border/bl.png");} #facebox .br{background:url("../img/yellow-border/br.png");} #facebox{position:absolute;top:0;left:0;z-index:991;text-align:left;} #facebox .popup{position:relative;} #facebox table{border-collapse:collapse;} #facebox td{border-bottom:0;padding:0;} #facebox .body{padding:0;background:#fffad3;border:1px solid #dad6b4;width:548px; padding: 15px; position: relative;} #facebox .body p{ color: #010101; font: normal 11px/18px "Lucida Grande", Verdana, sans-serif; margin: 8px 0;} #facebox .body h2{ color: #010101; font: bold 17px/20px Helvetica, Arial, sans-serif; display: block; margin: 8px 0;} #facebox .loading{padding:20px 0 5px 0;text-align:center;} #facebox .image{text-align:center;} #facebox img{border:0;margin:0;} #facebox .headding{padding:10px 0;text-align:right; border-bottom: 1px solid #dad6b4; margin-bottom: 18px;} a.close{color:#666;margin-left:5px;display:inline-block;width:15px;height:15px;text-align:center;font:normal 10px/12px Verdana,sans-serif;text-decoration:none;position:absolute;right:20px;top:24px; z-index: 999; width: 60px;} a.close:hover{ color: #000;} a.close span{ display: inline-block; width: 7px; height: 7px; background: url('../img/close.gif') top left;} a.close:hover span{ background-position: top right;} #facebox .tl,#facebox .tr,#facebox .bl,#facebox .br{height:10px;width:10px;overflow:hidden;padding:0;} #facebox_overlay{position:fixed;top:0px;left:0px;height:100%;width:100%;} .facebox_hide{z-index:-100;} .facebox_overlayBG{background-color:#FFF; z-index:990;} /* Clear floats ---------------------------------*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix { display: inline-block; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix { display: block; }