/*
Theme Name: Luke Visinoni
Description: This is a custom theme I developed specifically for my own blog.
Version: 0.1
Author: Luke Visinoni
Author URI: http://lukevisinoni.com/
*/

@import url("/media/css/reset.css");

body {
	background: #6a4c25 url(/media/img/bodybg.gif);
	color: #d0a97a;
	font-family: tahoma, verdana, arial, sans-serif;
	font-size: 1em;
}

a {
	color: #E39D42;
	text-decoration: underline;
}
a:hover {
	color: white;
	text-decoration: none;
}

blockquote {
	background-color: #5C523C;
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #3F3623;
	/** Opacity is still somewhat of a proprietary style. Luckily most browsers at least have a proprietary solution **/
    filter:alpha(opacity=50); /* Internet Explorer */
    -moz-opacity:0.5; /* Mozilla Firefox (legacy) */
    opacity: 0.5; /* CSS3 Standard */
	/** Similary story with rounded corners **/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
blockquote * {
	color: white;
	opacity: 1;
}

.clear {
	clear: both;
}

p {
	margin: 1em 0;
}

dl {
	margin: 1em 0;
}
dl dt {
	font-weight: bold;
	color: #E39D42;
}
dl dd {
	margin-bottom: 1em;
}

ol {
	margin: 1em;
}
	ol li {
		list-style-type: decimal;
		padding: .15em;
		margin-left: 2em;
	}

img.alignright {
	float:right;
	padding: 0 0 15px 15px;
}

img.alignleft {
	float:right;
	padding: 0 15px 15px 0;
}

.flickr {
	width: 100px;
	height: 100px;
	padding: 10px;
	float: left;
}

#wrap {
	width: 736px;
	padding: 0 12px;
	margin: 0 auto;
	background: url(/media/img/wrapbgshadow.png) repeat-y center center;
	font-size: .8em;
	line-height: 1.35;
}
	#head {
		height: 50px;
		padding: 15px;
	}
		#head .logo {
			background: url(/media/img/logo.png) no-repeat left top;
			float: left;
		}
			#head .logo span {
				display: none;
			}
			#head .logo a {
				height: 50px;
				width: 304px;
				display: block;
				text-indent: -10000px;
			}
		#head .nav {
			float: right;
			height: 52px;
			width: 390px;
			/*background: url(/media/img/navbg.png) no-repeat;*/
		}
			#head .nav li {
				display: inline;
			}
				#wrap #head .nav li a {
					/*color: #9FC7C9;
					font-size: 1.25em;
					font-weight: bold;
					line-height: 48px;
					text-decoration: none;*/
					text-indent: -10000px;
					float: left;
				}
				#wrap #head .nav li.home a {
					display: block;
					width: 78px;
					height: 52px;
					background: url(/media/img/nav-home.png) no-repeat;
				}
				#wrap #head .nav li.home a:hover {
					background-position: 0 -52px;
				}
				#wrap #head .nav li.projects a {
					display: block;
					width: 78px;
					height: 52px;
					background: url(/media/img/nav-projects.png) no-repeat;
				}
				#wrap #head .nav li.projects a:hover {
					background-position: 0 -52px;
				}
				#wrap #head .nav li.photos a {
					display: block;
					width: 78px;
					height: 52px;
					background: url(/media/img/nav-photos.png) no-repeat;
				}
				#wrap #head .nav li.photos a:hover {
					background-position: 0 -52px;
				}
				#wrap #head .nav li.about a {
					display: block;
					width: 62px;
					height: 52px;
					background: url(/media/img/nav-about.png) no-repeat;
				}
				#wrap #head .nav li.about a:hover {
					background-position: 0 -52px;
				}
				#wrap #head .nav li.contact a {
					display: block;
					width: 94px;
					height: 52px;
					background: url(/media/img/nav-contact.png) no-repeat;
				}
				#wrap #head .nav li.contact a:hover {
					background-position: 0 -52px;
				}
	#content {
		padding: 0 15px;
		float: left;
		width: 515px
	}
		/* Comment this out once you get the geshi set up right */
		#content .wp_syntax {
			background-color: #DFCCB5 !important;
			border: 1px solid #BFAE9B;
		}
		#content h1.pagetitle,
 		#content h1.posttitle {
			font-size: 1.5em;
			font-weight: bold;
			/*font-family: teen;*/
			color: white;
		}
		#content .navigation {
			clear: both;
			margin: 1em 0;
		}
			#content .navigation .alignleft {
				float: left;
				text-align: left;
			}
			#content .navigation .alignright {
				float: right;
				text-align: right;
			}
		#content .post {
			margin: 1em 0;
			clear: both;
		}
			/*#content .post*/ h2 {
				margin: .5em 0;
				line-height: 1.5;
				font-size: 1.5em;
				/*font-family: teen;*/
				font-weight: normal;
			}
				#content .post h2 a,
				/*#content .post*/ h2 {
					color: #9FC7C9;
					text-decoration: none;
				}
			/*#content .post*/ h3,
			#commentswrap h3 {
				color: #E39D42;
				padding: 3px 0;
				font-weight: normal;
				font-size: 1.15em;
				border-bottom: 1px solid #96682C;
			}
			/*#content .post*/ h4 {
				color: #E39D42;
				font-weight: bold;
				font-size: 1em;
			}
			#content .post ul {
				margin: 1em;
			}
			#content .post ul li {
				list-style-type: disc;
				padding: .15em;
				margin-left: 2em;
			}
			
			#content .post .head {
				background: url(/media/img/posthead.png) no-repeat left center;
				height: 40px;
				color: #e39d42;
			}
				#content .post .head .date {
					width: 155px;
					float: left;
					line-height: 38px;
				}
					#content .post .head .date .day {
						font-size: 3.5em;
						float: left;
					}
					#content .post .head .date .month {
						text-align: right;
						float: right;
						padding-right: 3px;
					}
				#content .post .head .comments {
					width: 46px;
					height: 42px;
					background: url(/media/img/commentsbg.png) no-repeat;
					line-height: 32px;
					text-align: center;
					float: right;
					font-size: 1.25em;
				}
			#content .post .foot {
				background: url(/media/img/postfoot.png) no-repeat left center;
				height: 20px;
				margin: 15px 0;
				line-height: 17px;
				clear: both;
			}
				#content .post .foot .categories {
					float: left;
					padding-left: 5px;
				}
				#content .post .foot .addcomment {
					float: right;
					text-align: right;
					padding-right: 5px;
				}
			#commentswrap {
				
			}
				#commentswrap h3 {
					color: #9FC7C9;
				}
				#commentswrap ol.commentlist {
					/* The ordered list decimal numbering appends
					   a stupid period after each number and I don't
					   want that, so I have to number manually
					list-style-type: decimal;
					*/
					margin: 0 !important;
				}
					#commentswrap ol.commentlist li.comment {
						list-style-type: none;
						margin: 0;
					}
					#commentswrap ol .comment .head {
						background: url(/media/img/commenthead.png) no-repeat left center;
						height: 19px;
						clear: both;
						margin-top: 15px;
						height: 40px;
						line-height: 38px;
					}
					/*#commentswrap ol .even {
						color: #eacca8;
					}*/
					#commentswrap ol .bypostauthor .head {
						background-image: url(/media/img/commenthead-author.png);
						color: #ddd;
					}
						#commentswrap ol .bypostauthor .head a {
							color: #ddd;
						}
						#commentswrap ol .comment .head .num {
							float: left;
							font-size: 3.5em;
							padding-left: 3px;
						}
						#commentswrap ol .comment .head .info {
							text-align: right;
							float: right;
							padding-right: 3px;
							font-size: .85em;
						}
					#commentswrap ol .comment .gravatar {
						float: right;
						background: url(/media/img/commentavatarwrap.png) no-repeat;
						margin: -11px 0 10px 10px; /** This is really hacky, probably pretty fragile... see if it can be done better some day **/
					}
					#commentswrap ol .bypostauthor .gravatar {
						background-image: url(/media/img/commentavatarwrap-author.png);
					}
						#commentswrap ol .comment .gravatar img {
							width: 50px;
							height: 50px;
							padding: 2px 10px 12px 10px;
						}
			#content #respond {
				clear: both;
			}
				#content #respond textarea {
					width: 100%;
					height: 130px;
				}
				#content #respond textarea,
				#content #respond .text input,
				#s,
 				table.form textarea,
 				table.form .text input {
					background-color: #DFCCB5;
					border: 1px solid #BFAE9B;
					padding: 2px;
				}
				#s {
					margin: .5em 0;
				}
	#sidebar {
		width: 176px;
		float: right;
		margin: 0 15px 15px 0;
	}
		#sidebar ul.outer {
			margin: 0;
		}
			#sidebar ul.outer li {
				padding: 0;
				background: none;
			}
				#sidebar ul.outer li ul {
					margin: 1em 0;
				}
					#sidebar ul.outer li ul li {
						padding: .15em 15px;
						list-style-type: none;
						background: url(/media/img/raquo.png) no-repeat left center;
					}
		#sidebar h2 {
			/*font-family: teen;*/
			color: #fff;
			font-size: 1.25em;
			font-weight: normal;
		}
		#sidebar .middle {
			background: url(/media/img/sidebarbg.png);
			padding: 10px;
		}
		#sidebar .top {
			height: 6px;
			background: url(/media/img/sidebartop.png) no-repeat;
		}
		#sidebar .bottom {
			height: 6px;
			background: url(/media/img/sidebarbottom.png) no-repeat;
		}
	#foot {
		background: url(/media/img/footerbg.png);
		clear: both;
	}
		#foot h2 {
			color: white;
			font-size: 1.25em;
			font-weight: normal;
			margin: 0 0 1em 0;
			/*font-family: teen;*/
		}
		#foot div.about,
		#foot div.nav,
		#foot div.projects {
			width: 215px;
			padding: 15px;
			float: left;
		}
		#foot div.projects {
			width: 160px;
		}
		#foot div.search {
			margin: 2em 0;
		}
		#foot .top {
			display: none;
		}
		#foot div.nav ul {
			margin: 1em;
		}
			#foot ul li {
				margin-left: 1em;
				padding: .15em 15px;
				list-style-type: none;
				background: url(/media/img/raquo.png) no-repeat left center;
			}
		/* finish this later (need to figure out how to make it anchor to the bottom)
		#foot .top {
			float: right;
		}
		#foot .top a {
			width: 33px;
			height: 101px;
			background: url(/media/img/arrow.png) no-repeat;
			display: block;
			text-indent: -10000px;
		}*/

/** TODO: THESE SHOULD BE IN THE PLUGIN CSS FILE **/
.wpcf7-response-output {
	border: 0 !important;
}

.wpcf7-validation-errors {
	border: 0 !important;
	background-color: #D0A97A;
	font-weight: bold;
	color: #c00;
}

.wpcf7-mail-sent-ok {
	border: 0 !important;
	background-color: #D0A97A;
	color: #448F00;
	font-weight: bold;
}

.wpcf7-not-valid-tip-no-ajax {
	border: 0 !important;
	background-color: #D0A97A;
	font-weight: bold;
	color: #c00 !important;
	padding: 2px;
	margin: 2px 0;
}

/**
 * Django App Styles
 */ 
#messages {
	margin: 1em 0;
	padding: 10px;
	background-color: #9FC7C9;
	color: black;
}
/**
 * Temporary form table styles
 */
table.form {
	margin: 1em 0;
	padding: 0;
	border-collapse: collapse;
}
	table.form td {
		padding: 5px;
		vertical-align: top;
		/*border: 1px solid white;*/
	}
		table.form td.label {
		}
		table.form td.leftlabel {
			text-align: right;
			width: 20%;
		}
	table.form tr.error td {
	}
		table.form tr.error td .errorlist {
			margin: 0;
			color: #FF2F2F;
			text-decoration: underline;
			font-size: .9em;
			padding: 3px;
		}
			table.form tr.error td .errorlist li {
				color: #FFBFBF;
			}
		table.form tr .text input,
		table.form tr textarea {
			padding: 2px;
		}
		table.form tr.error .text input,
		table.form tr.error textarea {
			background-color: #FFCFD1;
			border: 2px solid #c00;
		}
	
	table.form td.field {
	}
	table.form td.photo {
		
	}
		#photo_upload  {
			width: 150px;
			text-align: center;
		}
		#dialog {
			display: none;
		}
		.ui-dialog {
			font-size: .8em !important;
		}
	
	/**
	 * Comments Form
	 */
	table.form th {
		font-weight: normal;
		text-align: right;
		vertical-align: middle;
	}

/**
 * Flash Messages
 */
#flash div {
	background-color: #6A5B41;
	color: #D1EDEF;
	font-weight: normal;
	padding: 5px 5px 5px 30px;
	background-repeat: no-repeat;
	background-position: 5px 50%;
}

#flash .success {
	background-image: url(../img/icons/accept.png);
}

#flash .error {
	background-image: url(../img/icons/exclamation.png);
}

/**
 * Pagination
 */
.pagination {
	margin: 1em 0;
}
	.pagination .newer {
		float: right;
		text-align: right;
	}
	.pagination .older {
		float: left;
		text-align: left;
	}
	.pagination .clear {
		margin: 1em;
	}

/**
 * Contact Page
 */
#contact td.label {
	width: 75%;
}