/*--------------------------------------------------------------
*   Filename:       main.css
*   Description:    Main layout for ASF Congress
*   Client:         Oriex - www.oriex.fr
*   Author:         Ivan Tatic - www.simplifiedstudio.com
*   Optimised for:  Safari, Firefox 3, IE 7, Opera
*   Version:        1.0 / 0601009
--------------------------------------------------------------*/

/*
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; }

/*
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 */
    .justleft{ float: left; width: 45%; margin-right: 10px;}
    .notop{ padding-top: 0 !important; margin-top: 5px !important;}
    .goleft{ float: left; width: 48%;}
    .goright{ float: right; width: 48%;}
    #content a { color: #0c5caa; padding: 0 1px;}
        #content a:hover{ text-decoration: none; background: #0c5caa; color: #fff; padding: 0 1px}
    #right h2, #left h2, .yellowbox h2, .yellowbox h4 { 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;}

    div.line{ border: 1px solid #e2e2e2; padding-top: 6px;}
    h2.line{ background: #fff !important; position: relative !important; font: bold 15px/15px Helvetica, Arial, sans-serif !important; display: inline !important; margin: 6px 0 0 10px !important; text-align: left; bottom: -8px; padding: 0 8px 4px 8px; width: auto !important;}

    /* 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{ display: block; border: 2px solid #ccc; background: #fff; overflow: hidden;}
                #right ul.logo-list li a img{ margin: 0 auto; display: block;}
            #right ul.logo-list li a:hover{ border-color: #0c5caa;}

    /* 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; text-align: left;}
    #left h2{ font: bold 15px/20px Helvetica, Arial, sans-serif; display: block; margin: 28px 0 8px 0; text-align: left;}
    #left h3{ font: bold 12px/16px "Lucida Grande", Helvetica, Arial, sans-serif; display: block; margin: 6px 0; text-transform: uppercase; text-align: left;}
    #left h4{ font: bold 13px/20px Helvetica, Arial, sans-serif; display: block; margin: 14px 0 0 0; text-align: left;}
    #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: #0c5caa; color: #fff;}
            #left div#programme-box h3 span{ background: #dadada; color: #0c5caa;}
        #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: #0c5caa; 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 !important; background: url('../img/important-box-top.png') top left no-repeat; display: block; width: 492px;}
    .yellowbox *{ padding: 0 12px;}

        .yellowbox .mark em, .yellowbox .mark strong{ padding: 0; margin: 0;}
        .yellowbox .mark img{ float: left; padding: 0; margin: 8px 12px 8px 0px;}

    .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: 90px; margin: 18px 0;}
    #header h2{ text-indent: -9999px; display: block;}
    #header h1 a{ display: block; text-indent: -9999px; width: 500px; 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: #0c5caa;}
    #footer p a:hover{ text-decoration: none; background: #0c5caa; color: #fff;}

/*
Navigation
---------------------------------*/
ul#navigation{ background: url('../img/navigation-bg.png') no-repeat; display: block; height: 104px; padding: 0 8px; position: relative; z-index: 99;}
    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: #0c5caa;}

    ul#navigation li:hover {background-position: bottom left;}
    ul#navigation li:hover a{background-position: bottom right; color: #0c5caa;}

    /* Drop down */
    ul#navigation li ul{ display: none;}
    ul#navigation li:hover ul{ display: block; position: absolute; z-index: 101; 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: #0c5caa;}
/*  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: 100; top: 130px; 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: #0c5caa;}

/*
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; display: inline !important;}
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: #0c5caa;}
#content ul.winners li{ float: left; width: 125px; height: 160px; 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: #0c5caa;}

/*
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: #0c5caa !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: #0c5caa;}

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: #0c5caa;}
    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;}

/*
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;}


/*
Tables
---------------------------------*/
#left table{ width: 100%; margin: 8px 0;}
#left 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;}
#left td{ padding: 0.3em 0.5em; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;}
#left table.partners, #left table.partners td, #left table.partners tr{ border: none; vertical-align: top;}
    #left table.partners td{ border-bottom: 1px solid #ccc;}
    #left table.partners td a img{ border: none; text-decoration: none; text-decoration: none; background: transparent;}

/*
Testimonial player
---------------------------------*/
div.play{ display: block; width: 404px; height: 275px; overflow: hidden; margin: 15px auto 55px auto;}

/*
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; }