/*
Theme Name: DK theme
Description: Theme created by Deren Keskin.
Author: Deren Keskin
 
By Deren Keskin || http://www.deren.me
 
*/

* {
	margin: 0;
	padding:0;
}

html {
	overflow-y:scroll;
}

html, body {
	height:100%;
}

body {
	font:normal 75%/1.5 cambria,serif;
	color:#333;
	background:#fff url(img/bg.jpg) top center no-repeat fixed;
}

acronym {
	border-bottom:1px dotted #666;
	cursor: help;
}

a img {border:none;}
a:active, a:focus {outline:none;}

a {
	color:#333;
	text-decoration:none;
}
a:hover {
	color:#3ac2df;
	text-decoration:none;
}

input[type=submit],label,select {cursor:pointer;}  
input[type=text]:focus, input[type=password]:focus, textarea:focus {border:2px solid #3ac2ef;}

input[type=text],textarea {
	padding:3px;
}

form {
	font-size:1.1em;
}

/* ########################## */
/* #####      PAGE      ##### */
/* ########################## */

#page {
	width:885px;
	padding:0 15px;
	
	/* v Pour avoir un footer tjs en bas de page v */
	min-height: 100%;
	height: auto !important;
	height:100%;
	margin: 0 auto -100px; /* la marge du bas est la valeur nefatif de la hauteur du footer et du .push */
	/*background-color:#0F0;*/
}



/* ########################## */
/* #####     HEADER     ##### */
/* ########################## */

#header {
	overflow:hidden; /* logo gauche, menu droite */
	/*border-bottom:1px dotted #999;*/
}

#logo {
	width:176px;
	float:left;
	margin:15px 0 10px;
}

/* ########################## */
/* #####    NAV MENU    ##### */
/* ########################## */

ul#nav {
	list-style:none;
	margin:25px 0 0;
	width:548px;
	height:41px;
	background:url(img/navbar.png);
	float:right;
}

	ul#nav span {
		display:none;
	}
	
	ul#nav li {
		float:left;
	}
	
		ul#nav li a {
			height:41px;
			display:block;
		}


/*La largeur de chaque bouton dans la navbar*/
#navaccueil {width:92px;}
#navapropos {width:106px;}
#navportfolio {width:105px;}
#navphoto {width:80px;}
#navblog {width:69px;}
#navcontact {width:96px;}


/*On change la position du background lors du hover de chaque bouton*/
#navaccueil a:hover, body#accueil #navaccueil {background: url(img/navbar.png) 0px -41px no-repeat;}
#navapropos a:hover, body#a-propos #navapropos {background: url(img/navbar.png) -92px -41px no-repeat;}
#navportfolio a:hover, body#portfolio #navportfolio {background: url(img/navbar.png) -198px -41px no-repeat;}
#navphoto a:hover, body#photo #navphoto {background: url(img/navbar.png) -303px -41px no-repeat;}
#navblog a:hover, body#blog #navblog {background: url(img/navbar.png) -383px -41px no-repeat;}
#navcontact a:hover, body#contact #navcontact {background: url(img/navbar.png) -452px -41px no-repeat;}
#body#erreur ul#nav {background:url(img/navbar.png);}

/* ########################## */
/* #####    CONTENEUR   ##### */
/* ########################## */

#conteneur {
	margin:0 0 25px 0;
}
	
	#conteneur h1 {
		margin:2px 0 5px;
		color:#222;
		font-family: “Lucida Sans Unicode”, sans-serif;
		font-size: 2.2em;
		font-style: normal;
		font-weight: bold;
		text-transform: lowercase;
		letter-spacing: -2px;
		line-height: 1.3em;
		border-bottom:1px dotted #999;
	}
	
	#conteneur>h1 {
		width:880px;
		position:relative;
	}

		#conteneur h1 a span.rss {
			width:32px;
			height:26px;
			background:url(img/rss.png) no-repeat;
			position:absolute;
			bottom:0;
			right:5px;
		}

		#conteneur h1 a:hover span.rss {
			background:url(img/rss.png) 0px -26px no-repeat;
		}
	
	#conteneur h2 {
		font-size:1.5em;
		margin:0 0 10px 0;
	}
	
	#conteneur h3 {
		font-size:1.4em;
		margin:2px 0;
		color:#30b9e6;
	}
	

/* ########################## */
/* #####     BLOG       ##### */
/* ########################## */

#conteneur_blog {
	overflow:hidden;
}

#post {
	width:643px;
	float:left;
	/*border-right:1px dotted #CCC;*/
	/*background-color:#F00;*/
}
	
	#oups {
		text-align:center;
	}

	#navigation {
		font-size:1.5em;
		font-weight:bold;
		text-align:center;
	}
	
		#navigation .left {text-align:left;}
		#navigation .right {text-align:right;}

	#post .post_info {
		padding:5px 0;
		font-size:1.1em;
		text-align:right;
		margin-right:15px;
		width:130px;
		float:left;
		border-right:1px dotted #CCC;
		/*background-color:#0F0*/
	}
	
	.date {
		width:130px;
		height:35px;
		position:relative;
		margin-bottom:10px;
	}
	
	.date p {padding-right:15px;}
	
	.date .day {
		position:absolute;
		bottom:-12px;
		left:15px;
		font-size:3.1em;
		font-weight:bold;
	}
	
	.date .month {
		position:absolute;
		text-transform:uppercase;
		font-size:1.5em;
		bottom:10px;
		right:0;
	}
	
	.date .year {
		position:absolute;
		font-size:1.2em;
		bottom:-2px;
		right:0;
	}
	
	.cat, .com, .admin {margin:5px 0;}
	
	.admin span {
		font-weight:bold;
		padding:3px 15px 3px 5px;
		-moz-border-radius-bottomleft:6px;
		-moz-border-radius-topleft:6px;
		-webkit-border-radius-bottomleft:6px;
		-webkit-border-radius-topleft:6px;
		background-color:#DDD;
	}
	
	.cat span {
		font-weight:bold;
		padding:3px 15px 3px 25px;
		-moz-border-radius-bottomleft:6px;
		-moz-border-radius-topleft:6px;
		-webkit-border-radius-bottomleft:6px;
		-webkit-border-radius-topleft:6px;
		background:#333 url(img/page_white_text.png) left no-repeat;
	}
	
	.cat span a,.com span a {color:#fff;}
	.cat span a:hover {color:#3ac2ef;}
	
	.com span {
		font-weight:bold;
		padding:3px 15px 3px 25px;
		-moz-border-radius-bottomleft:6px;
		-moz-border-radius-topleft:6px;
		-webkit-border-radius-bottomleft:6px;
		-webkit-border-radius-topleft:6px;
		background:#3ac2ef url(img/comment.png) left no-repeat;
	}

	.com span a:hover {color:#333;}
	
	#post .post_content {
		text-align:justify;
		width:485px;
		float:left;
		padding-bottom:15px;
		margin-bottom:30px;
		border-bottom:1px dotted #AAA;
		/*background-color:#00F;*/
	}
	
	#post .post_content img {
		border:5px solid #222;
	}
	
	#post .post_content h2 a {
		border:none;
	}
	
	#post .post_content p, #post ul, #post ol {
		font-size:1.2em;
		margin:10px 0;
	}
	
	#post .post_content p a, #post .post_content ul li a {
		color:#33a7e5;
		border:none;
	}
	
	#post .post_content p a:hover, #post .post_content ul li a:hover {
		color:#333;
		border-bottom:1px dotted #333;
	}
	
	#post .tag {
		margin:20px 0 0px;
		background:#333 url(img/tag_blue.png) left no-repeat;
		padding:5px 5px 5px 25px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		color:#CCC;
	}
	
		#post .tag a {
			color:#fff;
			border-bottom:1px dotted #FFF; 
		}
		
		#post .tag a:hover {
			color:#3ac2ef;
			border:none;
		}
	
	#post .clear {
		clear:both;
	}
	
	#post ol, #post ul {
		margin:0 0 0 20px;
	}
	

li.alt div.comment_text {
        font-size:0.8em;
	width:400px;
	padding:5px 55px 5px 5px;
	margin:5px 0;
	background:#222 url(img/quote.png) right no-repeat;
	color:#FFF;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

li.authcomment div.comment_text {
        font-size:0.8em;
	width:400px;
	padding:5px 55px 5px 5px;
	margin:5px 0;
	background:#3ac2ef url(img/quote_blue.png) right no-repeat;
	color:#FFF;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
	
#sidebar {
	width:230px;
	float:right;
	/*background-color:#FF0;*/
}

#searchform {
	width:211px;
	background-color:#333;
	padding:7px;
	margin:10px 0;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

#searchform input {
	width:203px;
	color:#999;
	font-weight:bold;
	font-family:Georgia, "Times New Roman", Times, serif;
}

#sidebar ul {
	margin:2px 0 10px 0;
	font-size:1.1em;
	list-style:none;
	width:100%;
	overflow:hidden;
}

	#sidebar ul li a {border-bottom:1px dotted #222;}
	#sidebar ul li a:hover {border-bottom:none;}
	
	#sidebar ul li {
		float:left;
		width:50%;
		margin:2px 0;
	}
	
#commentform {
	width:465px;
	padding:8px;
	background-color:#222;
	color:#FFF;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

	#commentform textarea {
		overflow:auto;
	}
	
	#commentform .submit {
		width:465px;
		padding:5px 0 6px;
		color:#222;	
		font-weight:bold;
		background-color:#CCC;
		border:none;
		-moz-border-radius-bottomright:5px;
		-moz-border-radius-bottomleft:5px;
		-webkit-border-radius-bottomright:5px;
		-webkit-border-radius-bottomleft:5px;
	}

.oblig {
	font-size:0.8em;
	color:#666;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
	margin:0 5px 0 0;
}

.alignright {
	float: right;
	margin:0 0 0 5px;
}

/* ########################## */
/* #####     FOOTER     ##### */
/* ########################## */

/* Pour que le footer soit tjs en bas de page, mettre la valeur negative en margin-bottom page */
#footer, .push {height: 100px;}

#footer {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:100%;
	background:#222 url(img/footer_bg.jpg);
	font-size:10px;
	color:#666;
}

#footer_conteneur {
	width:880px;
	padding:35px 15px 0;
	margin:0 auto 0;
	overflow:hidden;
}

	#footer .copy {
		width:620px;
		float:left;
		text-transform:uppercase;
	}

	#footer p.codebar {
		width:240px;
		margin:2px 0 0;
		float:right;
	}

	#footer a {
		color:#888;
	}

		#footer a:hover {
			color:#CCC;
		}
		
#erreur h2 {
	text-align:center;
	margin-top:100px;
}

/*class global*/

.entete {
	color:#3ac2ef;
}
.valide {
	background:url(img/tick.png) top left no-repeat;
	padding-left:15px;
}

.bouton {
	padding:5px 10px 6px;
	font-size:1.2em;
	font-weight:bold;
	color:#F0F0F0;
	text-decoration:none;	
	background-color:#222;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);*/
}

	.bouton:hover {
		text-decoration:none;
		color:#3ac2ef;
	}

blockquote {
  margin: 1.3em 15px;
  padding-left: 10px;
  border-left: 3px solid #3ac2ef;
}