/* RESET! */

/* v1.0 | 20080212 */

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;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent; }
body {
	line-height: 1; }
p {
	font-size: 100%;
	vertical-align: baseline; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }

/* remember to define focus styles! */
:focus {
	outline: 0; }

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none; }
del {
	text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0; }

/* END RESET */


body {
	background: #c1d9ee url(../images/gradient_bluesky.jpg) top repeat-x;
	color: #333;
	/*font-family: 'Droid Sans', arial, helvetica, sans-serif; */
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
	text-align: center;
}

td {
	/* font-family: 'Droid Sans', arial, helvetica, sans-serif; */
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
}

th {
	/* font-family: 'Droid Sans', arial, helvetica, sans-serif; */
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
}

a { color: #03476a; }
a:hover, a:visited:hover { color: #f46a21; }
a:visited { color: #666; }

h2 {
	font-size: 1.7em;
	color: #f36b21;
	font-weight: bold;
	text-transform: uppercase;
	text-align: right;
	letter-spacing: 1px;
	margin: 0 0 12px 0;
	padding: 6px; }

p {
	text-align: justify; }

#header_container {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	 }

#header {
	padding: 42px 42px 16px 42px;
	background: url(../images/header_roundbg.jpg) 0 0 no-repeat;
	text-align: left; }
#header h1 {
	margin: 0; }
#header p#slogan {
	float: right;
	color: #666;
	text-align: right;
	font-weight: bold;
	font-size: 1.1em;
	font-style: italic;
	margin: 0; padding: 48px 312px 0 0; }

#cerfvolant {
	position: absolute;
    top: -50px;
    right: -50px; }

#nav_container {
	background: #6c6c6c url(../images/nav.jpg) bottom repeat-x; /*#be0007; */
	color: #fff;
	border-top: 1px solid #999;
	border-bottom: 1px solid #888;
	-moz-box-shadow: -2px 2px 6px #666; -webkit-box-shadow: -2px 2px 6px #666; box-shadow: -2px 2px 6px #666; }
#nav {
	width: 960px;
	margin: auto; }

#nav ul {
	list-style: none; }
#nav ul li {
	float: left;
        overflow: hidden;
        position: relative; }
#nav ul li#llanguage {
	float: right; }

#nav a {
	display: block;
        position: relative;
	padding: 12px 12px 12px 48px;
	font-size: 0.8em;
	color: #eee;
	text-decoration: none;
	border-left: 1px solid #666;
	border-right: 1px solid #555;
	 }

#nav .menu_hover {
        background: #1d4b7f url(../images/nav_hover.jpg) right bottom no-repeat;
        height: 54px;
        position: absolute;
        bottom: 0; right: 0;
        width: 250px;
        height: 70px;
        display: none;
        }

#content_container {
	width: 958px;
	margin: auto;
	background: #fff;
	border-width: 0 1px 0 1px;
	border-style: solid;
	border-color: #648fb2; }

#content {
	text-align: left;
	font-size: 0.8em; }
#homepage, #realisationspage, #contactpage, #forfaitspage {
	padding: 30px; }
#servicespage {
	padding: 30px 30px 30px 0; }

#footer {
        position: relative;
	width: 960px;
	margin: 0 auto;
	background: url(../images/footer_roundbg.jpg) center bottom no-repeat;
	color: #ccc;
	padding: 52px 0 18px 0;
	text-align: center;
	font-size: 0.8em; }
#footer a {
	color: #ccc; }
#footer a:hover {
	color: #fff; }


/*
 * Style for Home page
 */

#home_about {
	float: right;
	width: 296px;
	color: #666; }

#home_about h2 {
	margin: 0;
	padding: 0 0 6px 0;
	font-size: 1.5em;
	text-transform: none;
	text-align: left;
	background: #fff;
	color: #666; }

#home_about p {
	line-height: 1.5;
	margin: 0;
	padding: 0 0 12px 0;
	font-size: 1em; }

#home_about ul {
	list-style: none; }
#home_about ul li {
	float: left;
	width: 86px;
	margin: 0 12px 0 0; }

/*
 * Style for the Services page
 */

#services {
	}
 
#services_list {
    float: left;
    width: 250px;
    list-style-type: none;
	border-top: 1px solid #777;
}
#services_list li {
    position: relative;
    overflow: hidden;
}

#services_list a {
    display: block;
    position: relative;
    padding: 6px 12px 6px 36px;
    border-bottom: 1px solid #777;
	text-decoration: none;
	color: #666; }
#services_list a:hover {
	color: #fff; }

#services_list a.selected {
	color: #fff; }

#services_list .service_hover {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 300px; }

#service_default_content {
	color: #333; }

#service_link_creation_web .service_hover {
	background: url(../images/services_hover2.jpg) 0 0 repeat-y;
	width: 24px; }
#service_link_creation_web a.selected {
	background: url(../images/services_hover2.jpg) -125px 0 repeat-y; }
#service_creation_web_content {
	/*background: #03476a;*/ }

#service_link_module_edition .service_hover {
	background: url(../images/services_hover_aqua2.jpg) 0 0 repeat-y;
	width: 24px; }
#service_link_module_edition a.selected {
	background: url(../images/services_hover_aqua2.jpg) -105px 0 repeat-y; }
#service_module_edition_content {
	/*background: #1ba283;*/ }
#service_link_module_edition em {
	font-size: 0.9em;
	font-style: normal; }

/* #service_link_hebergement .service_hover {
	background: url(../images/services_hover_red2.jpg) 0 0 repeat-y;
	width: 24px; }
#service_link_hebergement a.selected {
	background: url(../images/services_hover_red2.jpg) -95px 0 repeat-y; }
#service_hebergement_content {
	background: #bf2026; } */

#service_link_logo .service_hover {
	background: url(../images/services_hover_green2.jpg) 0 0 repeat-y;
	width: 24px; }
#service_link_logo a.selected {
	background: url(../images/services_hover_green2.jpg) -95px 0 repeat-y; }
#service_logo_content {
	/*background: #79b743;*/ }

#service_link_powerpoint .service_hover {
	background: url(../images/services_hover_orange2.jpg) 0 0 repeat-y;
	width: 24px; }
#service_link_powerpoint a.selected {
	background: url(../images/services_hover_orange2.jpg) -90px 0 repeat-y; }
#service_powerpoint_content {
	/*background: #f36b21;*/ }

#service_link_modele_document .service_hover {
	background: url(../images/services_hover_pink2.jpg) 0 0 repeat-y;
	width: 24px; }
#service_link_modele_document a.selected {
	background: url(../images/services_hover_pink2.jpg) -120px 0 repeat-y; }
#service_modele_document_content {
	/*background: #9e1c4b;*/ }

#service_link_signature .service_hover {
	background: url(../images/services_hover_gray2.jpg) 0 0 repeat-y;
	width: 24px; }
#service_link_signature a.selected {
	background: url(../images/services_hover_gray2.jpg) -90px 0 repeat-y; }
#service_signature_content {
	/*background: #616060;*/ }


/* The div that will display the details, on the right */
#service_detail_container {
    float: left;
    width: 646px;
	font-size: 0.9em;
}

/* Divs that contain the details of a specific service */
.service_details {
    display: none; }

.service_details_content {
	padding: 0 0 0 24px;
	font-size: 1.1em; }

#service_detail_container h3 {
	font-size: 1.7em;
	color: #03476a;
	margin: 0;
	padding: 0 0 12px 0; }

#service_detail_container p {
	line-height: 1.4; }

#service_detail_container ul {
	list-style: square;
	margin: 12px 0 0 12px;
	padding: 0 0 0 12px; }
	
#service_detail_container ul li {
	margin: 0 0 12px 0; }

#service_detail_container ul ul {
	padding: 0 0 0 12px; }
#service_detail_container ul ul li {
	margin: 0 0 6px 0; }

/* NOS FORFAITS */

#forfaitspage ul {
	list-style: none; }
#forfaitspage ul li {
	float: left;
	width: 434px;
	border-top: 8px solid #ccc; }
#forfaitspage ul li#forfait1 {
	margin: 0 24px 0 0; }

#forfaitspage h3 {
	font-size: 1.6em;
	color: #03476a; }

#forfaitspage ul ul {
	list-style-type: square;
	list-style-position: inside;
	padding: 0 0 0 12px; }
#forfaitspage ul ul li {
	width: auto;
	float: none;
	border-top: none;
	padding: 0 0 6px 0; }

.forfaits_prix {
	font-size: 1.6em;
	font-weight: bold;
	color: #7ab644;
	text-align: right;
	padding: 0 24px 0 0; }
sup {
	font-size: 0.8em;
	font-weight: normal; }

#forfaits_add {
	clear: both;
	border-top: 3px solid #ccc;
	margin: 24px 0 0 0;
	line-height: 1.4; }
#forfaits_add strong {
	font-size: 1.2em;
	color: #F38630; }

.forfaits_icon {
	float: right;
	margin: 12px; }

/* NOS REALISATIONS */

.realisation_container {
    position: relative;
    padding: 10px 6px;
}

.realisation_container.hover {

}

/* Zoom hold the image and the link to the website */
.realisation_zoom {
    float: left;
    width: 440px;
}

.realisation_zoom a {
	display: block;
	padding: 0 0 6px 0; }

.realisation_zoom img {
    border: 4px solid #acd4e7;
    padding: 4px;
}

.hover .realisation_zoom img {
    border-color: #F38630;
}

/* Details holds the title, thumbnails and maybe a small description of the work */
.realisation_details {
    float: left;
    width: 444px;
}

.realisation_details h3 {
    padding: 8px;
	margin: 0 0 12px 0;
	font-size: 1.3em;
	color: #fff;
	background-color: #acd4e7;
}
.hover .realisation_details h3 {
	background-color: #F38630; }



.realisation_thumbnail {
    width: 108px;
    border: 4px solid #acd4e7;
    padding: 0;
    margin: 0 8px 8px 0;
    text-align: center;
    float: left;
}
.hover .realisation_thumbnail {
    border-color: #F38630; }
.hover .realisation_thumbnail:hover {
	border-color: #cc0000; }

.realisation_thumbnail a {
	text-decoration: none;
	display: block;
	padding: 4px; }
.realisation_thumbnail a:hover {
	color: #cc0000; }

.realisation_thumbnail img {
    border: none; }
.realisation_thumbnail_txt {
	display: block;
	padding-top: 4px; }



.realisation_separator {
    clear: both;
    margin: 8px 0;
    background-color: orange;
}

/* CONTACT PAGE */

#map {
	float: left;
	margin: 0 24px 0 0; }
#map iframe {
	border: 1px solid #666; }

#contactpage p {
	border-top: 1px solid #999;
	line-height: 1.4;
	margin-left: 475px;
	padding: 12px 0; }

p#contact_method { }

#contactpage strong {
	font-size: 1.2em;
	color: #03476a; }