/***************************************************************************** * TAGADART Sàrl * Created : 26.09.2011 * Author : Romain de Wolff * Mail : Romain@TAGADART.com * Description : Styles CSS * Utilise le moteur LESS *****************************************************************************/ /***************************************************************************** * Reset CSS styles for different browser *****************************************************************************/ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,blockquote,fieldset,input,hr { margin:0; padding:0; } p{ padding: 0; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size:1em; font-weight:normal; font-style:normal; } ul,ol { list-style:none; } fieldset,img,hr { border:none; } caption,th { text-align:left; } table { border-collapse:collapse; border-spacing:0; } td { vertical-align:top; } /***************************************************************************** * Rounded corner support (ie.css needed as weel for IE browsers) *****************************************************************************/ .rounded-corners { -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; } /***************************************************************************** * Vars *****************************************************************************/ /* colors */ /* @colGreen: #647002; *//* military green */ @colGreen: #808000; @colLightGrey: #CFD0CB; /* gris clair */ @colDarkGrey: #808080; /* position */ @intGeneralWidth: 1060px; @intHeaderHeight: 165px; @intMinHeight: 550px; @contentLineWeight: 2px; /***************************************************************************** * Document style *****************************************************************************/ body { text-align: center; /* best to worst font support */ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } a { color: @colGreen; font-weight: bold; } /*****************************************************************************/ /* Main /*****************************************************************************/ /* global container */ #container { margin: 0 auto; width: @intGeneralWidth; background: #fff; } /* header and sub elements */ #header { position: absolute; top: 0; z-index: 50; background: #ccc; padding: 0px; height: @intHeaderHeight; } #hLogo { position: absolute; left: 30px; top: 0px; background: url('../images/logo.gif') no-repeat scroll top left; width: 116px; height: 115px; cursor: pointer; cursor: hand; } #hLang { position: absolute; left: 969px ; /* 969 - hLogo.left - hLogo.weight */ top: 54px; /* 57 - hLogo.top - hLogo.height */ width: 64px; height: 16px; background-color: @colLightGrey; text-transform: uppercase; /* font-size: 0.7em; */ /*due to pc/mac font size difference */ font-size: 12px; .rounded-corners } #hMenu1 { position: absolute; left: 151px; top: 76px; width: 882px; height: 38px; background-color: #fff ; margin-bottom: 5px; .rounded-corners } #hMenu1 ul { list-style-type: none; } #hMenu1 li { float: left; padding: 8px 17px 0 17px; margin-top: 5px; /* create a space with the borders to make the separation line between menu elements */ border-right: 1px solid @colGreen; } #hMenu1 li:last-child { border: 0; } #hMenu1 a { margin-top: -25px; color: @colGreen; vertical-align:center; /* font-size: 1.15em; */ font-size: 17px; text-transform: uppercase; text-decoration: none; font-weight: normal; } #hMenu1 a:hover { text-decoration: underline; } #hMenu1 .current_page_item { text-decoration: underline; } #hMenu2 { position: absolute; left: 151px; top: 129px; /* 78 - hLogo.height - hLang.height */ width: 882px; height: 27px; border-top: 1px solid white; font-size: 0.9em; } #hMenu2 ul { margin: 0; padding: 0; } #hMenu2 ul li { list-style-type: none; display: inline; } #hMenu2 li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: normal; border-right: 1px solid #fff; } #hMenu2 li a:hover { background: #fff; color: @colGreen; } /* content container */ #content-container { z-index: 50; position: absolute; top: @intHeaderHeight; width: @intGeneralWidth; } #leftCol { float: left; width: 239px; padding: 13px 5px; margin: 0 0 0 31px; display: inline; background-color: @colLightGrey; min-height: @intMinHeight; text-align: left; .rounded-corners } #leftCol ul { margin: 0; padding: 0; } #leftCol ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } #content { float: left; width: 500px; padding: 13px 8px 13px 8px; margin: 0 0 0 10px; background-color: @colLightGrey; min-height: @intMinHeight; font-size: 0.8em; color: @colDarkGrey; .rounded-corners; } #content em { font-style: italic; } #content .entry-title { color: @colDarkGrey; float: left; font-weight: bold; text-transform: uppercase; } #content .entry-meta { /* display: none; // hidden date of the page, unusefull */ color: @colGreen; font-weight: bold; height: 14px; text-align: right; padding-bottom: 3px; border-bottom: @contentLineWeight solid @colDarkGrey; } #content .entry-content { text-align: justify; padding: 10px 0 10px 0; } #rightCol { color: @colDarkGrey; font-size: 0.75em; float: right; width: 205px; padding: 13px 5px 10px 5px; margin: 0 30px 0 0; display: inline; background-color: @colLightGrey; min-height: @intMinHeight; .rounded-corners; text-align: left; } #rightCol .ev-widget-post-tittle { text-transform: uppercase; } #rightCol li { border-bottom: @contentLineWeight solid @colDarkGrey; } #rightCol h3 { margin: 0; } #footer { color: white; clear: both; text-align: right; padding: 20px; height: 1%; font-size: 0.8em; text-align: center; width: 998px; margin-left: 10px; } #footer #links { text-align: center; } #footer #contact { letter-spacing: 0.077em; border-top: 1px solid white; } #footer a { color: white; text-decoration: none; } /*****************************************************************************/ /* Content /*****************************************************************************/ #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: @colGreen; } #content h1 {font-size: 1.5;font-weight: bold;} #content h2 {font-size: 1.4;font-weight: bold;} #content h3 {font-size: 1.3;font-weight: bold;} #content h4 {font-size: 1.2;font-weight: bold;} #content h5 {font-size: 1.1;font-weight: bold;} #content h6 {font-size: 1.15;font-weight: bold;} #content strong { font-weight: bold; } /* content 2 columns */ .embed { width:48%; float:left; padding:0 0 0 10px; margin:0 0 20px 0; } /*****************************************************************************/ /* Widget /*****************************************************************************/ div .concertTitre { color: @colDarkGrey; margin-top: 10px; font-size: 0.75em; text-transform: uppercase; font-weight: bold; } div .concertDate { margin-top: 7px; padding-bottom: 5px; margin-bottom: 5px; font-size: 0.75em; text-transform: uppercase; color: @colGreen; border-bottom: @contentLineWeight solid @colDarkGrey; font-weight: bold; } div .concertShortDesc { color: @colDarkGrey; font-size: 0.75em; padding-bottom: 5px; border-bottom: @contentLineWeight solid @colDarkGrey; } div .widgettitle { font-size: 1em; text-transform: uppercase; padding-bottom: 3px; border-bottom: @contentLineWeight solid @colDarkGrey; color: @colDarkGrey; font-weight: bold; } div .ev-widget-post { padding: 10px 0 10px 0; } .ev-widget-post .ev-widget-post-tittle { padding: 5px 0 5px 0; } .ev-widget-post .wp-post-image { padding: 5px 0 5px 0; } /* thanks http://www.handycss.com/how/how-to-stretch-a-background-image-in-css/ */ img#background { position:fixed; top:0; left:0; width:100%; height:100%; } .lnkDetail { font-size: 1.1em; }