/*
Description: CSS for F.H. Concpet.
Author: Jean-Francois Dion - NOID Multimedia
Author URL: www.noidstudio.com
Version: 1.0
*/

/* Global settings
-------------------------------------------------------------- */
*{margin:0; padding:0;}
html {font-size:100%;}
body {background-color:#646464; /*background: url("../img/body/main_bg.jpg") repeat scroll top center;*/font-family: Arial, Helvetica, sans-serif; font-size:100%; overflow-x:hidden;}
#wrapper{ color:#ecf0f4; background: url("../img/body/main_bg.jpg") repeat-y scroll top center; height:auto;}
/* links
-------------------------------------------------------------- */
a:link {text-decoration:none; color:#2677bd; }
a:visited {text-decoration:none; color:black; }
a:hover {text-decoration:none; color:#214777;}
a:active {outline:none;}
a:focus {-moz-outline-style:none; outline-style:none;}
a img {border:none;}

/* Titles
-------------------------------------------------------------- */
h1{color:#56b145; font-size:1.5em; margin-top:10px; margin-bottom: 10px;}
h2{color:#ffffff; font-size:20px; font-weight:bold;}
h3{color:#fff; font-size:1em; font-weight:normal; margin-bottom: 10px;}

.lightblue{height:20px; background-color:#2677bd; margin: 0 0 15px 0; padding:8px 0 12px 20px;}
.midblue{height:20px; background-color:#214777; margin: 0 0 15px 0; padding:8px 0 12px 20px;}
.darkblue{height:20px; background-color:#162f4f; margin: 0 0 15px 0; padding:8px 0 12px 20px;}

.lightblue538px{background: url("../img/body/title_lightblue.png") no-repeat scroll top left transparent; width:537px; height:48px; padding:8px 0 0 20px;}
.midblue538px{background: url("../img/body/title_midblue.png") no-repeat scroll top left transparent; width:537px; height:48px; padding:8px 0 0 20px;}
.darkblue538px{background: url("../img/body/title_darkblue.png") no-repeat scroll top left transparent; width:537px; height:48px; padding:8px 0 0 20px;}

/* Paragraphs
---------------------------------------------------------------*/
p, ul{color: #555655; font-size:15px; font-weight:normal; margin:0 0 15px 30px; line-height:20px;}

/* Lists
---------------------------------------------------------------*/
ul{color: #747474; margin:0 0 15px 50px; list-style:square;}

/* General Structure
---------------------------------------------------------------*/
.frame{position:relative; width:880px; margin:0 auto;}
.left_container{float:left; width:530px; margin:0 0 0 20px; /*background:red;*/}
.right_container{float:left; width:290px; margin:0 20px 20px 20px; background:#ececec;}
.clearboth{clear:both; display:block; font-size:0; height:0; line-height:0; width:100%; }

/*-- Dividers -- */
.divider {background: url("../img/body/inset_line.png") no-repeat scroll left center transparent; clear:both;
    display:block; height:20px; margin:30px 0 0 0; text-align:right; width:100%;}
.top {font-size:10px; text-shadow:1px 1px #f5f5ee; line-height:8px; position:relative; text-align:right;}
.top a, .top a:hover, .top a:visited {color:#6f6e64;text-decoration:none;}
.divider_padding {clear:both; display:block; margin-bottom:30px; width:100%;}


/* Header
---------------------------------------------------------------*/
#top_header{height:190px; background: url("../img/header/wave.png") no-repeat scroll top center transparent;}


/* Logo
---------------------------------------------------------------*/	
#logo{position:absolute; top:25px; left:30px; width:283px; height:150px;}


/* Phone Number
---------------------------------------------------------------*/	
#phone{position:absolute; top:74px; left:816px; width:124px; height:48px;}
	
	
/* Social Links
---------------------------------------------------------------*/		
#social_links{background: url("../img/header/header_socials2.png")no-repeat scroll top left transparent; position:absolute; width:149px; height:44px; top:20px; left:730px;}
#social_pos{width:129px; height: 21px; margin:9px auto;}
.socials{position:relative; float:left; width:21px; height:21px; text-align:center; margin:0 0 0 9px;}
.socials a{color:#cccccc; text-decoration:none; }


/* Menu
---------------------------------------------------------------*/		
#menu{position:absolute; width:940px; height:40px; top:140px; right:10px; border-radius:10px;}
#menu ul{display: block; position:relative; float:right; list-style-type:none; font-family:Arial, Helvetica, sans-serif; font-size:13px;
    text-transform:uppercase; font-weight: bold; letter-spacing:-0.5px; top:7px; padding:5px 0 5px 0;}
#menu ul li{position:relative; line-height:16px; float:left; border-left:1px dotted #000000; height:12px;}
#menu ul li a{display:block; float:left; color:#000000; margin:0 20px 0 20px;}
#menu ul li a:hover, #header ul li.active a{color:#2677bd;text-decoration:none;}


/* Main Content
-------------------------------------------------------------- */
#main_content{}
#main_content_holder{position:relative; padding:1px 0 25px 0;}

/* Contact icons
-------------------------------------------------------------- */
.icon img {
    float: left;
    margin-right: 20px;
	margin: 0 20px 20px 0;
    vertical-align: top;}


/* Portfolio (Réalisations) + About
-------------------------------------------------------------- */
#portfolio{width:250px; height:213px; position:relative; top:5px; left:20px;}
#about{width: 250px; height:309px; position:relative; top:5px; left:20px;}
#about p{color: #555655; font-size:15px; font-weight:normal; margin:0 0 15px 0; line-height:20px;}


/* Sub-Footer
-------------------------------------------------------------- */
#sub_footer_holder {height:50px; background-color:#09121f;}
#sub_footer_holder p, #sub_footer_holder a {color:#ffffff; font-size:9px;  line-height:9px; text-transform:uppercase;}
#sub_footer_holder a {padding-top:13px;}
#sub_footer_holder p {margin-left:20px; padding-top:23px;}
#noid {background: url("../img/footer/logo_noid.png") no-repeat scroll right top transparent; display:block;
    position:absolute;margin:0; right:20px; top:12px; padding:8px 45px;}
#noid span{display:none;}

/* In devloppment Effects
-------------------------------------------------------------- */
.shadowed {
    -moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);/*old Firefox*/
    -webkit-box-shadow: 0px 2px 5px 5px #888; /* Safari */
    box-shadow:0px 2px 8px rgba(0, 0, 0, 0.5);
}