/*

Theme Name: Vermillon

Theme URI: http://www.my-tapestry.com/vermillon/

Description: Vermillon is a colorful blog theme based on a 12 column grid-system. The style is inspired by Helvetica, the main font used in this theme, known for its neutrality and harmony.

Version: 1.0.2.1

Author: Benoit 'LeBen' Burgener

Author URI: http://benoitburgener.com

Tags: blue, fixed-width, red, two-columns



####################################################################



VERMILLON, WORDPRESS THEME

Copyright (C) 2010 My Tapestry (my-tapestry.com, hello@my-tapestry.com)



This program is free software: you can redistribute it and/or modify

it under the terms of the GNU General Public License as published by

the Free Software Foundation, either version 3 of the License, or

(at your option) any later version.



This program is distributed in the hope that it will be useful,

but WITHOUT ANY WARRANTY; without even the implied warranty of

MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

GNU General Public License for more details.



You should have received a copy of the GNU General Public License

along with this program. If not, see <http://www.gnu.org/licenses/>.



####################################################################

*/



@import "css/reset.css";



/*

####################################################################

BASIC STRUCTURE

#################################################################### */

body {

	background: #003263;

	font: 87.5% 'Helvetica Neue', Helvetica, Arial, sans-serif;

	color: #fff;

	/* text-shadow: 0 1px 0 rgba(0,0,0,.7); */

	margin: 0;

}



#header {

	background: #B50421;

	padding: 10px;

	color: #fff;

	border-bottom: 1px solid #B50421;

	margin-bottom: 5px;

}

	#header .left {

		width: 50%;

	}

	#header .right {

		width: 50%;

		padding-top: 40px;

	}	

		#header .nav {

			float: right;

		}

		#header .nav li {

			float: left;

			margin: 0 0 20px 20px;

		}

		#header .nav li ul li {

			display: none;

		}



#page {

	padding-top: 10px;

	background: #4371A2;

	padding-bottom: 40px;

	border-top: 1px solid #41679A;

}

	.box {

		width: 940px;

		margin: 0 auto;

	}

	

	#toggleArchives {

		position: absolute;

		display: inline;

		left: 50%;

		margin-top: -15px;

		margin-left: -45px;

		padding: 5px;

		background: #003263;

		text-align: center;

		border-radius: 5px;

		-webkit-border-radius: 5px;

		-moz-border-radius: 5px;

		-khtml-border-radius: 5px;

		cursor: pointer;

	}

		#toggleArchives:hover {

			color: #fff;

		}

	

	#archives {

		background: #003263;

	}

		#archives .box {

			padding: 35px 0 40px 0;

		}

		.children {

			/*margin-left: 10px;*/

		}



.col {

	float: left;

	width: 220px;

	margin-left: 20px;

}

	.col:first-child {

		margin-left: 0;

	}



#content {

	width: 600px;

	float: left;

}

	#content .nav li {

		float: left;

		margin: 0 20px 10px 0;

	}

	

	.bubble {

		padding: 6px 5px 0 5px;

		background: #003263;

		border-radius: 5px;

		-webkit-border-radius: 5px;

		-moz-border-radius: 5px;

		-khtml-border-radius: 5px;

	}

		.bubble p {

			margin-bottom: 6px;

		}

	

#sidebar { width: 240px; float: right; margin-left: 0px; margin-top: 20px; 

}

	.widget { margin-top: 20px; margin-left: 10px; margin-bottom: 10px; 

	}

		.widget:first-child { margin-top: 0; }

		.textwidget {

			line-height: 1.8em;

		}

	

	#sidebar li { list-style: outside disc; font: 95% 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; 

	}

		#sidebar li.linkcat {

			list-style: none;

		}

	

#footer {

	background: #003263;

	padding: 20px 0 30px 0;

}

	#footer .right {

		text-align: right;

	}



.left {

	float: left;

}

.right {

	float: right;

}



.clear:after, .box:after, .nav:after, .nav ul:after,  #page:after, .navigation:after, #footer:after {

	content: ".";

	display: block;

	height: 0;

	clear: both;

	visibility: hidden;

}





/*

####################################################################

TEXT GENERIC

#################################################################### */

h1, h2, h3, h4, h5, h6 { color: #FFF; 

}



h1 {

	font-size: 3.4em;

	font-weight: bold;

	letter-spacing: -3px;

}



h2 {

	font-size: 2em;

	line-height: 1em;

	font-weight: bold;

	letter-spacing: -1px;

	margin-bottom: 10px;

}



h3 { font-weight: bold; text-transform: uppercase; margin-bottom: 5px; 

}

	#sidebar h3 { /*border-left: 3px solid #FFFFFF;

		padding-left: 12px; */ margin-left: -15px; font: 100% 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; 

	}



h4 {

	font-weight: bold;

	text-transform: uppercase;

	margin-bottom: 4px;

}



h5 {

	font-weight: bold;

	margin-bottom: 3px;

}



h6 {

	font-size: .9em;

	font-weight: bold;

	margin-bottom: 2px;

}



p {

	line-height: 1.8em;

	margin-bottom: 10px;

}



#archives li, #page li { line-height: 1.5em; 

}





/*

####################################################################

LINKS

#################################################################### */

a, a:link, a:visited, a:active, a:hover {

	color: #fff;

	text-decoration: none;

	outline: none;

	cursor: pointer;

}

	a:active {

		text-shadow: 0 -1px 0 rgba(0,0,0,.5);

	}

	a:hover {

		border-bottom: 1px dotted #fff;

	}



#header a:hover {

	border-bottom: 0;

}

	#header a.home:hover {

		padding-right: 60px;

		background: url(images/home.png) no-repeat center right;

	}



.nav a:link, .nav a:visited, .nav a:active {

	padding: 5px 10px;

	font-weight: bold;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	-khtml-border-radius: 5px;

	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.5);

	-moz-box-shadow: 0 1px 0 rgba(0,0,0,.5);

}

	.nav a:hover {

		border: 0;

		-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.3);

		-moz-box-shadow: 0 1px 0 rgba(0,0,0,.3);

	}

	.nav a:active {

		-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,.3);

		-moz-box-shadow: 0 -1px 0 rgba(0,0,0,.3);

	}

#header .nav a:link, #header .nav a:visited, #header .nav a:active {

	color: #FFC4BE;

	background: #7F0F14;

}

	#header .nav a:hover {

		color: #fff;

		background: #B50421;

	}

#content .nav a:link, #content .nav a:visited, #content .nav a:active {

	color: #9BBDFF;

	background: #003263;

}

	#content .nav a:hover {

		color: #fff;

		background: #41679A;

	}



.post p a, .post p a:link, .post p a:visited, .post p a:active {

	padding: 3px 5px;

	background: #41679A;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	-khtml-border-radius: 5px;

}

	.post p a:hover {

		border-bottom: 0;

		background: #003263;

	}



div.post-infos a, div.post-infos a:link, div.post-infos a:visited, div.post-infos a:active {

	color: #C2D7FF;

	border-bottom: 1px dotted #C2D7FF;

	text-shadow: none;

}

	div.post-infos a:hover, .wp-caption a:hover {

		border-bottom: 0;

	}



.rss a, .rss a:link, .rss a:active, .rss a:visited {

	padding: 2px 5px 2px 19px;

	background: url(images/rss.png) no-repeat 5px 6px;

	text-shadow: none;

	font-weight: bold;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	-khtml-border-radius: 5px;

}

	.rss a:hover {

		background-color: #FF9933;

		border-bottom: none;

	}



a.arrow, a.arrow:link, a.arrow:active, a.arrow:visited {

	padding: 2px 5px 2px 19px;

	background: url(images/arrow-up.png) no-repeat 5px 6px;

	text-shadow: none;

	font-weight: bold;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	-khtml-border-radius: 5px;

}

	a.arrow:hover {

		background-color: #41679A;

		border-bottom: none;

	}



#sidebar a, #sidebar a:link, #sidebar a:visited, #sidebar a:active {

	color: #C2D7FF;

}

	#sidebar a:hover {

		color: #fff;

	}





/*

####################################################################

POSTS / PAGES

#################################################################### */

.post, .search .page, .navigation, #comments {

    margin-top: 0px;

    padding-top: 40px;

    border-top: 1px dotted #41679A;

}

	.page .post {

		margin-top: 20px;

		padding-top: 20px;

	}

    .post:first-child, .search .page:first-child {

    	margin-top: 0;

    	padding-top: 0;

    	border: 0;

    }



div.post-infos {

    color: #C2D7FF;

    text-shadow: none;

    margin-top: 10px;

    text-transform: uppercase;

    font-weight: bold;

}

	div.post-infos:first-child {

		margin: 0 0 5px 0;

	}

ul.post-infos {

	width: 220px;

	position: fixed;

}

	#sidebar ul.post-infos li {

		list-style: none;

		line-height: 1.3em;

		border-top: 1px dotted #41679A;

		padding: 10px 0;

	}

		#sidebar ul.post-infos li:first-child {

			border-top: none;

			padding-top: 0;

		}

	ul.post-infos li span {

	    color: #003263;

	    text-shadow: none;

	    text-transform: uppercase;

	    font-weight: bold;

	}



.post ul, .post ol {
	margin-bottom: 10px;
}

	.post ul li {

		list-style: outside disc;
		margin-left: 30px;

	}

	.post ol li {

		list-style: decimal;
		margin-left: 30px;

	}

	

.post pre, .post blockquote, .post code, .post img, .attachment img,

.wp-caption, #respond, .avatar {

	background: #003263;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	-khtml-border-radius: 5px;

}

	.post strong {

		color: #fff;

	}

	.post pre {

		padding: 20px;

		margin: 10px 0;

	}

	.post blockquote {

		padding: 15px 20px 5px 20px;

		font-family: Georgia, Cambria, Times, Times New Roman, serif;

		font-style: italic;

		margin: 10px 0;

	}

	.post code {

		padding: 3px 5px;

	}

	

	

.post img, .attachment img, .avatar {

	padding: 5px;

}

	.post a:hover img, .attachment a:hover img {

		background: #41679A;

	}

	.aligncenter, div.aligncenter {

		display: block;

		margin-left: auto;

		margin-right: auto;

		margin-bottom: 10px;

	}

	

	img.alignnone, img.alignleft, img.alignright,

	div.alignnone img, div.alignleft img, div.alignright img {

		display: inline;

	}

	

	.alignleft {

		float: left;

		margin: 5px 10px 5px 0;

	}

	

	.alignright {

		float: right;

		margin: 5px 0 5px 10px;

	}



.wp-caption {

	text-align: center;

	padding-top: 5px;

}

	.wp-caption img {

		margin: 0;

		padding: 0;

		border: 0 none;

		background: none;

	}

	.wp-caption p.wp-caption-text {

		font-size: .8em;

		padding: 5px;

		margin: 0;

	}





/*

####################################################################

COMMENTS / TRACKBACKS / PINGBACKS

#################################################################### */

#comments .title .right {

	margin-top: 10px;

}

	.comment, .pingback, .trackback {

		min-height: 70px;

		margin-top: 20px;

		padding: 10px 10px 0 10px;

		border-radius: 5px;

		-webkit-border-radius: 5px;

		-moz-border-radius: 5px;

		-khtml-border-radius: 5px;

		background: #3C608F;

	}

		.comment .left, .pingback .left, .trackback .left {

			width: 130px;

			text-align: right;

		}

		.comment .right, .pingback .right, .trackback .right {

			width: 430px;

			margin-left: 20px;

		}

			.depth-2 {

				margin-right: 20px;

			}

				.depth-2 .right {

					width: 410px;

				}

			.depth-3 {

				margin-right: 40px;

			}

				.depth-3 .right {

					width: 390px;

				}

			.depth-4 {

				margin-right: 60px;

			}

				.depth-4 .right {

					width: 370px;

				}

			.depth-5, .depth-6, .depth-7, .depth-8, .depth-9, .depth-10 {

				margin-right: 80px;

			}

				.depth-5 .right, .depth-6 .right, .depth-7 .right, .depth-8 .right, .depth-9 .right, .depth-10 .right {

					width: 350px;

				}

			

	.avatar {

		float: right;

		margin-left: 10px;

	}

	

	#commentlist .even {

		background: #41679A;

	}

	

	#commentlist .comment-author-admin, #commentlist .bypostauthor {

		background: #B50421;

		color: #FFC4BE;

	}

		#commentlist .comment-author-admin .avatar, #commentlist .bypostauthor .avatar {

			background: #7F0F14;

		}



#respond {

	padding: 20px 20px 10px 20px;

	margin-top: 40px;

}





/*

####################################################################

FORM

#################################################################### */

input, textarea {

	font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;

	text-shadow: 0 1px 0 rgba(0,0,0,.7);

	padding: 6px 8px;

	background: #4371A2;

	color: #9BBDFF;

	border: 1px solid #41679A;

	border-radius: 16px;

	-webkit-border-radius: 16px;

	-moz-border-radius: 16px;

	-khtml-border-radius: 16px;

	outline: none;

}

	input {

		width: 202px;

	}

	textarea {

		width: 542px;

		resize: vertical;

	}

		input:hover, textarea:hover {

			border-color: #9BBDFF;

		}

		input:focus, textarea:focus {

			border-color: #9BBDFF;

			color: #fff;

		}

	

	input.submit, input[type=submit] {

		width: auto !important;

		padding-left: 10px;

		padding-right: 10px;

		font-weight: bold;

		color: #fff;

		background: #B50421 url(images/gradient.png) repeat-x top center;

		border-color: #B50421;

		cursor: pointer;

	}

		input.submit:hover, input[type=submit]:hover, input.submit:focus, input[type=submit]:focus {

			background-color: #B50421;

		}

		input.submit:active, input[type=submit]:active {

			background-color: #B50421;

			text-shadow: 0 -1px 0 rgba(0,0,0,.7);

		}



label {

	font-weight: bold;

	color: #41679A;

	margin-left: 5px;

}



.s {

	float: left;

	width: 125px;

	height: 18px;

	border-top-right-radius: 0;

	border-bottom-right-radius: 0;

	-moz-border-radius-topright: 0;

	-moz-border-radius-bottomright: 0;

	-webkit-border-top-right-radius: 0;

	-webkit-border-bottom-right-radius: 0;

	-khtml-border-top-right-radius: 0;

	-khtml-border-bottom-right-radius: 0;

	border-right: 0;

}

	.searchSubmit {

		height: 32px;

		border-top-left-radius: 0;

		border-bottom-left-radius: 0;

		-moz-border-radius-topleft: 0;

		-moz-border-radius-bottomleft: 0;

		-webkit-border-top-left-radius: 0;

		-webkit-border-bottom-left-radius: 0;

		-khtml-border-top-left-radius: 0;

		-khtml-border-bottom-left-radius: 0;

		border-left: 0;

	}