/* ****************************************

KOMONDOR STYLESHEET

Date creation: 2014-12-10
Auteur: Alexandre DELATTRE - contact@alexd-portfolio.fr
Version: v0200

**************************************** */
html {
	background-color: #b2d0db;
	font-size: 13pt;
}
body {
	width: 1024px;
	background-color: #fff;
	margin: 100px auto;
	box-shadow: 1px 1px 5px #5b5b57;
	padding: 0;
	z-index: 0;
	margin-bottom: -1px;
	color: #7f756b;
}
h1, h2, h3, h4, p, a, ul, li, img {
	margin: 0;
	padding: 0;
}
h1 {
	text-align: center;
}
p {
	line-height: 20pt;
}
a img {
	border: none;
}
.ftlft {
	float: left;
}
.ftrgt {
	float: right;
}
.clearBox {
	width: 100%;
	clear: both;
}
.italic {
	font-style: italic;
}
.bold {
	font-weight: bold;
}
.underline {
	text-decoration: underline;
}
.margin-top {
	margin-top: 13pt;
}
//.line {
	line-height: 20pt;
}			
.ecart {
	margin: 15px 0 15px 0;
}
.ecart2 {
	margin-left: 50px;
}
.size-10 {
	font-size: 10pt;
}
.justify {
	text-align: justify;
}
.indent {
	text-indent: 50px;
}
.list-style-deco {
	list-style-image: url("komondor-images/gif/komondor-list.gif");
}
.right {
	text-align: right;
}
.center {
	text-align: center;
}
.marron {
	color: #7f756b;
}
.obligatoire {
	font-size: 0.7em;
	font-style: italic;
	text-align: right;
	margin: 50px 100px 0 0;
}
.icon-dog::before {
	display: inline;
	content: url("komondor-images/gif/komondor-list.gif");
}
.icon-ok {
	color: rgb(0,187,36);
}
.icon-wrong {
	color: rgb(246,18,65);
}
[class^="icon-"], [class*=" icon-"] {
	margin-right: 10px;
}

/* ************************************************** */

#deco-degrade-haut {
	width: 100%;
	height: 609px;
	position: absolute;
	top: 0;
	left: 0;
	background: url("komondor-images/png/degrade-haut.png") repeat-x top center;
	z-index: -10;
}
header {
	width: inherit;
	height: 150px;
	margin: 0;
	padding: 0;
	top: 0;
}
#logo {
	width: 400px;
	height: 135px;
	position: absolute;
	margin: -30px 0 0 20px;
	box-shadow: 1px 1px 5px #5b5b57;
	z-index: 10;
}
#imgHeader {
	position: relative;
}
.gradientHeader {
	position: absolute;
	z-index: 1;
}

#contentSite {
	position: relative;
	width: 1024px;
}	
#contentSite a {
	color: #7f756b;
	font-style: italic;
	text-decoration: none;
}
#contentSite a:hover {
	color: #7f756b;
	font-style: italic;
	text-decoration: underline;
}
#colLeft {
	position :absolute;
	top: 0;
	bottom: 0;
	width: 150px;
	height: 100%;
	margin: 0 0 20px 20px;
	float: left;
	font-size: 12pt;
	font-family: "Myriad Pro", Times, Arial;
	font-weight: bold;
}
#mainNav {
	width: inherit;
	height: 100%;
	background-color: #f0efe4;
	/* margin: 0 0 20px 20px; */
	padding: 10px 0 20px 0;
	box-shadow: 1px 1px 5px #5b5b57;
}
#mainNav ul {
	width: 115px;
	margin: 0 0 0 25px;
	border-left: 1px solid #7f756b;
}
#mainNav ul li {
	width: 100px;
	border-top: 1px solid #7f756b;
	list-style-type: none;
	margin: 0 0 0 11px;
	padding: 4px 0 4px 0;
	text-align: center;
}
#mainNav ul li:last-child {
	border-bottom: 1px solid #7f756b;
}
#mainNav ul li a {
	width: 100px;
	height: 20px;
	text-decoration: none;
	color: #7f756b;
	display: block;
}
#mainNav ul li a:hover {
	text-align: center;
	background: url("komondor-images/png/degrade-menu.png") no-repeat top right;
	text-decoration: none;
	font-weight: normal;
	color: #f0efe4;
	border-left: 5px solid #7f756b;
	margin: 0 0 0 -18px;
	padding: 0 0 0 13px;
}
#mainNav ul li .active	{
	text-align: center;
	background: url("komondor-images/png/degrade-menu.png") no-repeat top right;
	text-decoration: none;
	font-weight: normal;
	color: #f0efe4;
	border-left: 5px solid #7f756b;
	margin: 0 0 0 -18px;
	padding: 0 0 0 13px;
}
#colRight {
	float: right;
	width: 814px;
	min-height: 200px;
	margin: 0 20px 20px 0;
	padding: 20px 0 0 0;
}
.titre {
	width: 160px;
	margin: 0 auto;
	text-align: center;
}
.titre2 {
	width: 640px;
	margin: 0 auto;
	text-align: center;
}
.titre3 {
	width: 260px;
	margin: 0 auto;
	text-align: center;
}
.titre4 {
	width: 300px;
	margin: 0 auto;
	text-align: center;
}
.titre5 {
	width: 380px;
	margin: 0 auto;
	text-align: center;
}
#objectifs {
	width: 480px;
	margin: 0 auto;
	padding:20px 0 20px 0;
}

/* ************************************************** */

#accueil hr {
	margin: 20px 0;
}

#gallery {
	width: 740px;
	text-align: center;
	line-height: 3em;
	margin: 0 auto;
	padding-top: 20px;
}
#gallery:after {
	clear: both;
}
#gallery p {
	margin-bottom: 10px;
}
#gallery .box {
	display: block;
	width: 370px;
	//height: 280px;
	float: left;
	margin: 0 0 30px 0;
}
#gallery .image-box {
	display: block;
	width: 320px;
	height: 220px;
	margin: 0 auto;
	border: 1px solid #7f756b;
	background-color: #f0efe4;
	text-align: center;
	line-height:210px;
}
#gallery .image-box img {
	max-width: 300px;
	max-height: 200px;
	vertical-align: middle;
}
#gallery a img{
	border: none;
}
#gallery .description {
	display: block;
	width: 300px;
	margin: 0 auto;
	background: #f0efe4;
}
.pageNav {
	position: relative;
	width: 100%;
}
.pageNav table {
	margin: 0 auto;
	border-collapse: collapse;
	border: none;
}
.pageNav table td {
	width: 32px;
	height: 32px;
	text-align: center;
}
.pageNav a {
	display: block;
	width: 30px;
	font-style: normal !important;
	margin: 0;
	padding: 0;
}
.pageNav a:hover {
	border: 1px solid #7f756b;
	text-decoration: none !important;
}
.pageNav a.active {
	background: #7f756b;
	color: #fff !important;
}
.pageNav .navDir {
	color: #d7d7d7;
}
.pageNav .navDir a {
	color: #7f756b;
}
.pageNav .navDir a:hover {
	border: none;
	font-size: 1.5em;
	cursor: pointer;
}
#sliderContainer {
	float: right;
	width: 300px;
	height: 200px;
	border: 1px solid #7f756b;
	padding: 5px;
	margin: 0 0 20px 20px;
}
#formContact table {
	width: 600px;
	border-collapse: collapse;
	font-family: 'Myriad Pro', serif;
}
#formContact tr {
	height: 30px;
}
.table-border {
	border-left: 1px solid #7f756b;
}
.text {
	width: 200px;
	background-color: #f0efe4;
	color: #7f756b;
}
textarea {
	width: 350px;
	height: 100px;
	background-color: #f0efe4;
	color: #7f756b;
}
.col2 {
	width: 150px; 
	padding-left: 20px;
}
.line1 {
	height: 100px;
}
.cell1 {
	width: 250px;
	padding-right: 150px;
}
.cell2 {
	width: 230px;
}
.cell3 {
	padding-top: 40px;
	text-align: right;
}
#messageOk, #messageWrong {
	margin: 40px auto;
}
#messageOk h1, #messageWrong h1 {
	margin-bottom: 40px;
}
#messageOk h1 {
	margin-top: 40px;
}
#send-button {
	width: 134px;
	height: 29px;
}

/* ************************************************** */

footer {
	width: 1024px;
	height: 269px;
	clear: both;
}
#deco-herbes {
	width: 100%;
	height: 269px;
	position: absolute;
	background: url("komondor-images/png/herbe-degrade.png") repeat-x top center;
	left: 0;
}
footer img {
	position: absolute;
}
.mentions {
	position: absolute;
	width: 150px;
	height: 76px;
	margin: 90px 0 0 305px;
	transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	color: #fff;
	font-size: 0.75em;
	display: block;
	line-height: 10pt;
}
.mentions a {
	text-decoration: none; 
	color: #fff;
}
.mentions a:hover {
	color: #35312d;
}
#komondor-1 {
	width: 212px;
	height: 137px;
	margin: 100px 0 0 30px;
}
#panneau {
	width: 187px;
	height: 168px;
	margin: 80px 0 0 300px;
}
#komondor-2 {
	width: 282px;
	height: 145px;
	margin: 120px 0 0 500px;
}
#komondor-3 {
	width: 123px;
	height: 140px;
	margin: 95px 0 0 850px;
}

/* **************************************************
					sudoslider css	
************************************************** */

#slider ul, #slider li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	display: block;
}

/* Uncomment this if you wan't to only have 1 visible slide before the javascript kicks in. 
#slider li {display: none;}	
#slider li:first-child {display: block;}
*/

#slider, #slider li {
	width: 300px;
	overflow: hidden;
	text-align: center;
}
/* // Sudo Slider */	
/* Numeric Navigation */
ol {
	margin: 1em 0; 
	padding: 0;
	height: 28px;
}
ol li{
	margin:0 10px 0 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 28px;
	line-height: 28px;
}

/* **************************************************
				fin sudoslider css	
************************************************** */

#slider li .hSliderContent, #slider li .hSliderContentBeige {display: table-cell; vertical-align: middle;  width: 300px; height: 200px; text-align: center;}
#slider li .hSliderContent {background: #fff;}
#slider li .hSliderContentBeige {background: #f0efe4;}
#slider li img {margin: 0 auto;}
		
.border-content {
	width: 700px;
	height: 4px;
	margin: 20px auto;
}
.komondor-gif {
	width: 175px;
	height: 158px;
	margin: 0 auto;
	display: block;
}