/* 
    Document   : styles.css
    Created on : 10 mars 2011, 17:57:00
    Author     : jean-pierre
    Description:
        Swantegy css
*/

/* 
   
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/


/*feuille css pour base*/

/* initialisation */
html, body, div, span, object,
h1, h2, h3, p,
 em, img,
 strong,
 ol, ul, li,
fieldset, form, label, legend,
table, tr, td, input
{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
}

input{
padding:0;
margin:0;
border:0;
background:transparent;
}



/* générale*/

.clear{
clear:both;
}

img{
vertical-align:bottom;
}

body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#0c1622;
}

div#center{
width:980px;
margin:auto;
}

div#menu ul{
list-style:none;
}

div#menu a{
text-decoration:none;
}

/* le header */

h1,div#banniere{
float:left;
}

div#banniere{
width:664px;
height:85px;
background:url(imagescss/header.jpg) no-repeat;
}

div#header{
border-bottom:5px solid #c7e3ff;
}

/* le centre */

div#content{
background:url(imagescss/background_gradiant.jpg) repeat-x;
width:980px;
height:583px;
padding-top:11px;
}

/* la colonne lateral gauche */

div#aside{
width:189px;
height:583px;
margin:0 10px 0 26px;
float:left;
}

div#menu{
margin-bottom:10px;
}

div#menu ul li a{
display:block;
padding-left:9px;
width:180px;
height:28px;
line-height:28px;
border-bottom:3px solid #4a6491;
font-size:14px;
color:#eee;
}
div#menu ul li a:hover{
background:url(imagescss/background_menu_hover.jpg) no-repeat;
}

div#social{
border:5px solid #2e3759;
width:171px;
height:119px;
padding-left:8px;
padding-top:8px;
background:url(imagescss/gradiant_social.jpg) repeat-x;
margin-top:15px;
}


p#icone{
margin-top:12px;
}

div#social p img{
margin-right:2px;
}

div#social p{
font-size:14px;
color:white;
}

div#social form{
margin-top:8px;
}

div#social p.legend{
font-style:Verdana, Geneva, sans-serif;
font-size:10px;
color:#eee;
}



div#social input.text{
display:block;
float:left;
width:134px;
height:22px;
background:url(imagescss/input_email.jpg) no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#787878;
line-height:22px;
padding-left:8px;
}

div#social input.submit{
display:block;
float:left;
margin-left:4px;
width:21px;
height:22px;
background:url(imagescss/input_ok_aside.jpg) no-repeat;
cursor:pointer;
}

div#partenaires{
width:183px;
height:58px;
border:3px solid #2e3759;
margin-top:7px;
}


/* la section centrale */

div#section{
width:720px;
border:5px solid #30395b;
float:left;
background:white;
}

div#contentleft{
float:left;
width:499px;
padding:10px 0 0 6px
}
div#contentright{
float:left;
width:206px;
padding-top:9px;
padding-left:9px;
}

div#article1{
float:left;
position:relative;
height: 307px;
width: 498px;
overflow: hidden;
}

div#article2{
float:left;
margin:2px 2px 0 0;
position: relative;
height: 164px;
width: 248px;
overflow: hidden;
}

div#article3{
float:left;
position:relative;
margin-top:2px;
height: 164px;
width: 248px;
overflow: hidden;
}

div.boxarticle{
position:absolute;
width:163px;
margin-top:10px;
margin-left:9px;
padding:9px 6px;
background:black;
top:0;
left:0;
}

div.boxarticle h2{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
color:#ec812b;
}

div.boxarticle p{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#d1d1d1;
}

div#article4{
width:196px;
height:99px;
border:2px solid #55596a;
}

div#article5{
margin-top:10px;
padding:3px;
width:190px;
border:2px solid #55596a;
height:89px;
background:url(imagescss/article5_background.jpg) no-repeat;
}

div#article5 p{
font-style:italic;
font-size:11px;
color:white;
}

div#article5 p.signature{
font-size:12px;
text-align:right;
margin-top:4px;
}

div#article6{
margin-top:10px;
width:196px;
border:2px solid #55596a;
height:142px;
}

div#article7{
margin-top:10px;
width:196px;
border:2px solid #55596a;
height:89px;
margin-bottom:10px;
}

/* la barre de recherche */

div#search{
float:left;
width:710px;
border:2px solid #30395c;
height:58px;
background:url(imagescss/gradiant_search.jpg) repeat-x;
margin-top:10px;
margin-left:8px;
}

div#search p.legend{
width:134px;
float:left;
font-size:14px;
color:#eee;
margin-top:13px;
margin-left:10px;
}



div#search  form{
width:546px;
float:left;
padding-left:20px;
line-height:21px;
}

div#search form p{
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#ededed;
margin-top:6px;
margin-left:14px;
position:relative;
}

div#search input{
margin-right:5px;
margin-bottom:-5px;
}

div#search input.submit{
position:absolute;
top:19px;
right:-12px;;
display:block;
float:right;
width:31px;
height:32px;
background:url(imagescss/input_ok_search.jpg) no-repeat;
cursor:pointer;

}


/* le pied de page */

div#footer{
height:35px;
background:#1a2145;
border-top:4px solid #2e3759;
font-size:10px;
color:#eee;
line-height:35px;
}

div#footer a{
text-decoration:none;
color:#eee;
}
div#footer a:hover{
color:#ec812b;
}

div#copyright{
float:left;
margin-left:30px;
}

div#date{
float:right;
margin-right:3px;
}













/* ===========================================  SIMPLE MODAL STYLES  ===========================================================*/

#simplemodal-container {height:500px; width:700px; color:#bbb; background-color:#eee; border:4px solid #444; padding:12px;}

#simplemodal-container a.modalCloseImg {
	background:url(http://localhost:8888/swantegy/squelettes/css/images/x.png) no-repeat; /* adjust url as required */
	width:25px;
	height:29px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:-15px;
	right:-18px;
	cursor:pointer;
}

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}