/* ---------------------------------------------------
* Screen CSS for Buzzee.com
* version 1.0 - February 2009
* Author : Erwann Ser
------------------------------------------------------
*/

/*=------------------------------------------ H E A D E R ------------------------------------------------*/

.pro #phot {background: url('../images/phot.png') no-repeat;}
.ent #phot {background: url('../images/EntPhoto.png') no-repeat;}
.corp #phot {background: url('../images/CorpPhoto.png') no-repeat;}
#contact #phot, #support #phot {background: url('../images/CtcPhoto.png') no-repeat;}
#support #phot {background: url('../images/SupportPhoto.png') no-repeat;}
#status #phot {background: url('../images/StatusPhoto.png') no-repeat;}


/*=------------------------ COMMON ELEMENTS ----------------------*/

#price #maincol h2 {
	font: 1.4em "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	color:#659E01;
	text-transform:uppercase;
	border-bottom: 1px solid #DADADA;
	margin: 1.5em 0 .6em;
	}
#contact #maincol {padding-top: 100px}

/*=---------------------------- CONTENU --------------------------------*/

.navInt a:hover, .navInt a:focus, .boxe li a:hover, .boxe li a:focus, .boxe li a:active, #footer a:hover, #footer a:focus {
	background-color: #0045a4 !important;	
	color:#FFF !important;
	}
.boxe li a:hover, .boxe li a:focus, .boxe li a:active {background-image:url('none') !important}

#Témoignages #content ul, #Temoignages #content ul {padding: 0;}

#sidecol {width: 28%;}

#Training #maincol, #status #maincol, #support #maincol {width: 100%;}

#sidecol h2 {
	margin:0;
	font-size: 1.1em;
	text-shadow: 1px -1px 0 #437f00;
	}
#sidecol h2 img {
	float:right;
	margin: 3px 10px 0;
	}
#sidecol h2 a {
	text-decoration:none;
	color:#FFF;
	display:block;
	height:100%;
	height:48px;
	background: url('../images/PanelTtl.png');
	outline:none;
	line-height: 1.4; padding-left:45px; padding-right:0; padding-top:12px; padding-bottom:3px
	}
#sidecol h2 a:hover, #sidecol h2 a:active, #sidecol h2 a:focus { 
	background-color: transparent;
	color:#FFF;
	background-position: 0 -63px;
	}
#sidecol input[type="text"] {width: 233px}
.sidecontent form {overflow:hidden; width: 100%}
.sidecontent label {display:block; margin-bottom: .3em}

#content ul {padding-left: 2%;}
#Témoignages #content ul, #Temoignages #content ul {padding: 0;}


#maincol .boxe {
	float:left;
	background: url('../images/box_bg.png') repeat-y;
	width: 270px;
	margin-left:0; margin-right:0; margin-top:10px; margin-bottom:25px
	}

#content .boxe ul {
	background: url('../images/boxfooter.png') no-repeat bottom; 
	font-size: 1.05em;
	margin-top: -80px; 
	padding-left:1px; padding-right:1px; padding-top:.5em; padding-bottom:.7em  
	}
.boxe li:last-child a {border:none}

.boxe li a {
	display:block;
	background: -moz-linear-gradient(top, #fff, #e9edf1); /* FF3.6 */
	line-height: 2.7em;
	text-decoration:none;
	color:#0B5CB7;
	border-bottom: 1px solid #D3DBE2
	}
.boxe li a:hover span {background-position: 10px -19px;}

.boxe li span {
	display:block;
	padding-left: 30px;
	background: url('../images/box_bullet.png') no-repeat 10px .9em;
	}
	
.arrows li {margin-bottom: .5em;}
.boxe_details li span {
	display:block;
	background: url('../images/boxfilet.gif') repeat-x bottom; 
	padding-bottom: .4em
	}
#maincol .boxe .more {
	display:block;
	width: 92px;
	height: 23px;
	background: #568c01 url('../images/btn_more_detail.png');
	color:#FFF;
	text-decoration:none; margin-left:58%; margin-right:0; margin-top:-2.1em; margin-bottom:0; padding-left:10px; padding-right:0; padding-top:3px; padding-bottom:0
	}
#maincol .more:hover {background-position: 0 -26px}

#content .boxe h2 {
	color:#fff !important; 
	margin: 0;
	padding: 13px 0 85px 55px; 
	font-weight: normal;
	font-size: 1.4em;
	letter-spacing: -0.01em;
	}

#panel1, #panel2 {background: url('../images/sidebox_.png') repeat-y;}

#questionnnaire  label {float:none; text-align:left}
#questionnnaire  #maincol form p {margin-left: 15px}
#questionnnaire  #maincol h3 { font-size: 1.25em; margin-left: 2px}


/*------------------------------------------------------------------*/


#Training #maincol, #status #maincol {width: 100%;}


#features #maincol h2 {
	padding-bottom: 15px !important; 
	background-color: transparent !important
}
#features #maincol > div {margin-top:0;}
#features .boxe  {
		width: 220px; 
		margin: 0 10px 15px 0; 
		height: 115px; 
		padding-top:0 !important;
		}
#features .boxe  h2 {background: none  !important}
#features .boxe p {
		padding: 0 10px; 
		font-size: .9em;
		}
#features .boxe p a {
		text-decoration:none; 
		display:block; 
		padding: 25px 10px; 
		margin: -35px -10px -15px;
		color: #333 !important;
		outline:none;
		}
#features .boxe p a:hover, #features .boxe p a:focus, #features .boxe p a:active {background:none;}

/*Pro*/
#features #email {background-image: url('../images/btn_email.png')}
#features #letter {background-image: url('../images/btn_letter.png')}
#features #phone {background-image: url('../images/btn_phone.png')}
#features #calendar {background-image: url('../images/btn_calendar.png')}
#features #mobile {background-image: url('../images/btn_mobile.png')}
#features #task {background-image:url('../images/btn_task.png')}
#features #contacts {background-image: url('../images/btn_contacts.png')}
#features #fax {background-image: url('../images/btn_fax.png')}
#features #files {background-image: url('../images/btn_files.png')}
#features #folder {background-image: url('../images/btn_folder.png')}
#features #work {background-image: url('../images/btn_work.png')}
#features #sms {background-image: url('../images/btn_sms.png')}

/*Ent*/
#features #stat {background-image: url('../images/btn_stat.png')}
#features #template {background-image: url('../images/btn_template.png')}
#features #marketing {background-image: url('../images/btn_marketing.png')}
/*Corp*/
#features #website {background-image: url('../images/btn_website.png')}
#features #contents {background-image: url('../images/btn_content.png')}
#features #aei {background-image: url('../images/btn_aei.png')}
#features #action {background-image: url('../images/btn_actioncom.png')}
#features #benefit {background-image: url('../images/btn_benefit.png')}
#features #leads {background-image: url('../images/btn_leads.png')}
#features #dashbord {background-image: url('../images/btn_dashbord.png')}
#features #travail {background-image:url('../images/btn_travail_collaboratif.png')}
#features #suivi {background-image:url('../images/btn_suivi.png')}

#features .boxe:hover {background-position: 0 -115px;}
#features #maincol a:focus {text-decoration:underline}

.navInt {position:relative; clear:both}
.navInt a {text-decoration:none;}
#maincol .navInt h1 {padding: 0 0 0 195px; margin-top:0}

.navInt a.nxt, .navInt a.bck, .navInt a.toc {
		position:absolute; 
		top:0;
		border: 1px solid #0081d7;
		border-bottom: none;
		padding: 4px 10px !important;
		text-decoration:none; 
		font-weight:bold;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		}
.navInt a.nxt {
		padding-right: 25px !important;
		background: url('../images/arrowNext.png') no-repeat 95% .6em;
		right: 195px;
		top:0
		}
.navInt a.bck {
		padding-left: 25px !important;
		margin-left: 75px;
		background: url('../images/arrowBack.png') no-repeat 8px .6em; 
		}
.navInt a.toc {
		padding-left: 25px !important;
		background: url('../images/arrowToc.png') no-repeat 8px .6em; 
		}
.navInt a:hover, .navInt a:focus, .navInt a:active {background-position: 8px -16px !important}
.navInt .nxt:hover, .navInt .nxt:active {background-position: 95% -16px !important;}
.navInt a:visited {color: #0081D7}
		
#maincol .second h1 {border:none; border-top: 2px solid #CFE0F5; padding-top: 3px}

#maincol .second a.nxt, #maincol .second a.bck, #maincol .second a.toc {
		border: 1px solid #0081d7 !important;
		border-top: none !important;
		}
		
/*Pro*/
#featuresDetail #letter h2 {background-image: url('../images/boxheader_letter.png'); padding-top: 12px }
#featuresDetail #email h2 {background-image: url('../images/boxheader_email.png'); padding-top: 12px }
#featuresDetail #phone h2 {background-image: url('../images/boxheader_phone.png'); padding-left: 65px}
#featuresDetail #calendar h2 {background-image: url('../images/boxheader_calendar.png'); padding-left: 52px}
#featuresDetail #suivi h2 {background-image: url('../images/boxheader_suivi.png'); padding-top: 12px }
#featuresDetail #mobile h2 {background-image: url('../images/boxheader_mobile.png')}
#featuresDetail #work h2 {background-image: url('../images/boxheader_work.png')}
#featuresDetail #contacts h2 {background-image: url('../images/boxheader_contacts.png'); padding-top: 11px}
#featuresDetail #fax h2 {background-image: url('../images/boxheader_fax.png'); padding-left: 62px}
#featuresDetail #leads h2 {background-image: url('../images/boxheader_leads.png'); padding-left: 62px}
#featuresDetail #files h2 {background-image: url('../images/boxheader_files.png'); padding-left: 62px}
#featuresDetail #folder h2 {background-image: url('../images/boxheader_folder.png')}
#featuresDetail #sms h2 {background-image: url('../images/boxheader_sms.png')}

/*Ent*/
#featuresDetail #stat h2 {background-image: url('../images/boxheader_stat.png'); padding-left: 50px}
#featuresDetail #template h2 {background-image: url('../images/boxheader_template.png'); padding-left:50px; padding-right:0; padding-top:11px; padding-bottom:85px}
#featuresDetail #task h2 {background-image: url('../images/boxheader_task.png'); padding-top: 11px}
#featuresDetail #marketing h2 {background-image: url('../images/boxheader_marketing.png')}

/*Corp*/
#featuresDetail #website h2 {background-image: url('../images/boxheader_website.png'); padding-top: 11px}
#featuresDetail #contents h2 {background-image: url('../images/boxheader_content.png'); padding-left: 57px}
#featuresDetail #aei h2 {background-image: url('../images/boxheader_aei.png'); padding-top: 7px; padding-left: 45px} 
#featuresDetail #dashboard h2 {background-image: url('../images/boxheader_dashbord.png');} 
#featuresDetail #benefit h2 {background-image: url('../images/boxheader_benefit.png');} 
#featuresDetail #action h2 {background-image: url('../images/boxheader_action.png');} 



#adress {
	background: #edf7ff;
	width: 94%;
	border: 1px solid #80B8E1;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	padding: .8em 1em;
	font-size: 1.1em;
	margin-bottom: 2em;
	}
#adress .azur {font-size:1.1em; background-image: url('../images/azur.png'); width: 224px; height:1.6em}


.BoxeDetails {
	background:  #FFF;
	padding: 2em 25px 2em;
	}
.BoxeDetails h3 {
	background: #CFE7FF; 
	line-height: 2.3em;
	margin: 0 -18px .5em;
	padding-left: 18px;
	}

.BoxeDetails ul {
	padding: 1em 18px 2em 22px
}
.BoxeDetails li {
	background: url('../images/box_bull.png') no-repeat 0 .3em; 
	padding-left: 22px; 
	margin-bottom: .4em
}
.BoxeDetails li span {background-image: url('../images/boxfilet.gif'); padding-bottom: .6em}
	

#maincol .screens {margin: 1em 0 0 360px; overflow:visible}
.screens a {
		display:block; 
		width: 122px;
		border-top: 4px solid #FFF; 
		}

.screens div { float:left; width: 122px;}
.screens div:first-child {margin-right: 20px}

.screens a:hover {
	border-color: #0D6AD2
}

/*Temoignages*/

#Temoignages #tem  {padding-left:0}

#tem li  {float:left; margin: 0 15px 15px 0}
#tem a {
	outline:none;
	display:block;
	width:274px;
	height:88px;
	background: url('../images/temoignage_bg.png');
	text-decoration:none; padding-left:15px; padding-right:10px; padding-top:15px; padding-bottom:10px
	}
#tem a span {line-height: 1.3; color:#333; }
#tem a span.ste {color:#0081D7; font-weight:bold; display:block; margin-bottom: .3em}
#tem a img  {float:left; margin-right: 12px}

#tem a:hover, #tem a:focus {background-position: 0 -113px; color:inherit !important;}
#tem a:active img, #tem a:active span {position:relative; top:1px; left: 1px}

#tem a:active {background-position: 0 -226px}


.tbl {
		border: 1px solid #80B8E1; 
		-moz-border-radius: .5em;
		-webkit-border-radius: .5em;
		padding: 6px !important;
		}
.tbl table {
	width: 100%;
	border: 1px solid #CAE2F9;
	border-collapse:collapse
}
.tbl td, .tbl th {
	vertical-align:top;
	text-align:left;
	border-bottom: 1px solid #CAE2F9;
	border-right: 1px solid #CAE2F9;
	padding: 15px 15px 1.5em;
	}
.tbl h2 {
	margin: 0 0 .8em;
	font-size: 1.1em;
	font-family:Arial, Helvetica, sans-serif;
	color:#276FC5;
	letter-spacing: 0.05em;
	text-transform:uppercase;
	font-weight:bold;
	border-bottom: 1px solid #AFD2F5;
	padding-bottom: .3em;
	}
.tbl li {
	font-size: .9em;
	margin-left: 20px;
	padding: .1em 0 .3em;
	border-bottom: 1px dotted #BBB;
}
.tbl li li {font-size: 1em; list-style:none; margin:0; border:none}

#Training .tbl th {font-size: 1.4em; color:#276FC5; line-height: 1}
#Training .tbl tr td + td {vertical-align:middle; width: 400px}
#Training h2 span {
		text-transform:none; 
		font-size: .9em; 
		font-weight:normal;
		}
#Training p.error {margin: .3em 0 0 112px}

.tbl th span  {
		font-weight: normal; 
		display:block; 
		font-size: .7em;
		color:#333;
		margin-top: .5em
		}
.tbl tr {background: #F3FBFE;}
.tbl label {margin-right: 10px; text-align:right}
.tbl p { margin: 1.2em 0 }

#price #content table td, #price #content table th {	
		padding: 10px;
		text-align:center; 
		border-bottom: 1px solid #CAE2F9; 
		border-right: 1px solid #CAE2F9;
		}
#price #content table td { background: #FFF }
#price #content .tbl th {color:#276FC5; text-align:left}
#price #maincol li {border-bottom: 1px dotted #BBB; padding-bottom: .4em}


#status .tbl th, #status .tbl td {padding: .6em 10px}
#status .tbl th {color:#FFF; background: #276FC5}
#status p { max-width: 45em}

.space_btn {
            display:block;
            height: 66px;
            overflow:hidden;
            margin-bottom: 19px;
            }
.space_btn:hover img {position:relative; top: -66px}