/*

Theme Name: Magazine o'Tuts

Theme URI: http://daharper.me/

Description: A WordPress theme ideal for tutorial & community websites.

Version: 1.0

Author: Dan Harper

Author URI: http://danharper.me

Tags: blue, cream, pink, black, fixed width, two columns, widgets

*/



/*------------ General Styling ------------*/

.hidden { display: none !important; }

.clear { clear: both; }



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

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

.aligncenter { margin: 0.8em auto; }

.wp-caption p { color: #333; font-family: Georgia, Times, "Times New Roman", serif; font-size: 1em; font-style: italic; }



a:link, a:visited {

	color: #a93468;

	text-decoration: none;

}



a:hover {

	text-decoration: underline;

}



a:active, a:focus {

	color: #b1185c;

	text-decoration: none;

}



a.button, a.button-small, a.button-mini, .navigation a, .comms-navigation a, a.comment-reply-link, .cancel-comment-reply a, input[type="submit"], p.post-tags a {

	background-color: #eee;

	border: 1px solid #ddd;

	border-radius: 3px;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

	color: #666;

	display: -moz-inline-box;

	display: inline-block;

	font-size: 0.85em;

	padding: 5px 8px;

}



a.button:hover, a.button-small:hover, a.button-mini:hover, .navigation a:hover, .comms-navigation a:hover, a.comment-reply-link:hover, .cancel-comment-reply a:hover input[type="submit"]:hover, p.post-tags a:hover {

	background-color: #B1185C;

	border: 1px solid #980f4c;

	color: #fff;

	text-decoration: none;

}



a.button-small {

	font-size: 0.75em;

	padding: 3px 6px;

}



a.button-mini, a.comment-reply-link, .cancel-comment-reply a, p.post-tags a {

	font-size: 0.75em;

	padding: 1px 4px;

}



blockquote {

	background-color: #f9f9f9;

	color: #666;

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

	font-size: 1.2em;

	padding: 5px 10px;

}



/* use with alignleft or alignright to stick to a side! */

blockquote.side {

	display: block;

	width: 250px;

}



blockquote p:last-child {

	margin: 0;

}



p, #main li, code, pre {

	font-size: 1.1em;

	line-height: 1.4em;

}



#main ul.special li {

	background: url("images/bullet.png") no-repeat left center;

	list-style: none;

	padding-left: 17px;

}



code, pre {

	background-color: #f9f9f9;

	font-size: 1.2em;

	padding: 0 3px;

}



h1, h2, h3 {

	color: #272727;

	font-family: Aller, Myriad Pro, Helvetica, Arial, sans-serif;

	font-weight: bold;

	margin: 0.6em 0;

}



h4, h5, h6 {

	color: #272727;

	font-family: Helvetica, Arial, sans-serif;

	font-weight: bold;

}



h1 { font-size: 2.56em; letter-spacing: -1px; line-height: 1.2em; margin-bottom: 0; }

h2 { font-size: 1.8em; }

h3 { font-size: 1.5em; }

h4 { font-size: 1.3em; }

h5 { color: #444; font-size: 1.1em; }

h6 { color: #444; font-size: 1em; }





/* Layout */

body {

	background: #000 url("images/bg.jpg") no-repeat top center;

	color: #373737;

	font-size: 0.8em;

	margin: 0;

	padding: 0;

}



#wrap {

	margin: 0 auto;

	padding: 20px 0;

	width: 980px;

}



#head {

	clear: both;

	overflow: hidden;

}







/*------------ Header ------------*/



#head h1 {

	background: url("images/logo.png") no-repeat;

	float: left;

	margin: 0 0 20px 0;

	padding: 0;

	text-indent: -9999em;

}



#head h1 a {

	display: block;

	height: 175px;

	width: 500px;

}



#head h1 a:focus {

	outline: none;

}



#head #searchform {

	float: right;

	margin: 70px 0 0 0;

	width: 390px;

}



#head #searchform input[type="text"] {

	background-color: #151515;

	border: 1px solid #333;

	border-right: none;

	border-top-left-radius: 10px;

	border-bottom-left-radius: 10px;

	-moz-border-radius-topleft: 10px;

	-moz-border-radius-bottomleft: 10px;

	-webkit-border-top-left-radius: 10px;

	-webkit-border-bottom-left-radius: 10px;

	color: #999;

	float: left;

	font-size: 19px;

	font-weight: bold;

	height: 20px;

	margin-right: 0;

	padding: 7px;

	width: 275px;

}



#head #searchform input[type="submit"] {

	/*background: #151515 url("images/star-s.png") no-repeat 27px 2px;*/

	background-color: #151515;

	border: 1px solid #333;

	border-left: none;

	border-top-left-radius: 0;

	border-top-right-radius: 10px;

	border-bottom-left-radius: 0;

	border-bottom-right-radius: 10px;

	-moz-border-radius-topleft: 0;

	-moz-border-radius-topright: 10px;

	-moz-border-radius-bottomleft: 0;

	-moz-border-radius-bottomright: 10px;

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

	-webkit-border-top-right-radius: 10px;

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

	-webkit-border-bottom-right-radius: 10px;

	color: #999;

	cursor: pointer;

	float: left;

	font-size: 19px;

	font-weight: normal;

	height: 36px;

	padding: 6px 7px;

	text-transform: lowercase;

}



#head img {

	float: right;

	height: 37px;

	margin: 1px 0 0 10px;

	overflow: hidden;

	width: 37px;

}







/*------------ Navigation ------------*/



#nav {

	clear: both;

	margin: 0;

	padding: 0 30px;

}



#nav li {

	display: inline;

	font-size: 1.3em;

	font-weight: bold;

	margin-right: 8px;

}



#nav li ul li { font-size: 0.9em; }

#nav li ul li ul li { font-size: 1em; }



#nav li a {

	background: url("images/nav.png") repeat top center;

	border-top: 1px solid #3585A2;

	border-top-left-radius: 5px;

	border-top-right-radius: 5px;

	-moz-border-radius-topleft: 5px;

	-moz-border-radius-topright: 5px;

	-webkit-border-top-left-radius: 5px;

	-webkit-border-top-right-radius: 5px;

	color: #eee;

	display: -moz-inline-box;

	display: inline-block;

	padding: 8px 15px;

	text-decoration: none;

}



#nav li ul {

	margin-top: -15px;

}



#nav li ul li ul {

	margin-left: 20px;

	margin-top: 0;

}



#nav li ul li {

	display: block;

}



#nav li ul li a {

	/* Top & Bottom radius */

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	display: block;

}



#nav li a:hover {

	color: #eedfb9;

}



#nav li a:active, #nav li a:focus {

	color: #444;

	outline: none;

}



#nav li.selected a:link, #nav li.selected a:visited, #nav li.current-cat a:link, #nav li.current-cat a:visited, #nav li.current-cat-parent a:link, #nav li.current-cat-parent a:visited {

        background: url("images/nav-selected.png") repeat bottom right; 

	text-decoration: underline;

}







/*------------ Main Content ------------*/



#content-top {

	background: url("images/maintop.png") no-repeat;

	display: block;

	height: 17px;

	width: 980px;

}



#content-bot {

	background: url("images/mainbot.png") no-repeat;

	display: block;

	height: 17px;

	width: 980px;

}



#content {

	background: #eedfb9 url("images/mainbg.gif") repeat-y;

	overflow: hidden;

}



#main {

	background-color: #fff;

	border: 1px solid #b7a880;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	float: left;

	margin: 0 9px 0 19px;

	padding: 20px;

	width: 670px;

}



#main2 {

	background-color: #fff;

	border: 1px solid #b7a880;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	float: left;

	margin: 0 9px 0 19px;

	padding: 20px;

	width: 900px;

}



h4.section {

	background: url("images/star.png") no-repeat top left;

	clear: both;

	color: #272727;

	font-family: Aller, Myriad Pro, Helvetica, Arial, sans-serif;

	font-size: 1.4em;

	font-weight: bold;

	margin-bottom: 10px;

	padding-left: 18px;

}







/*------------ Posts ------------*/



.post {

	border-bottom: 1px solid #eee;

	clear: both;

	margin: 0 0 35px 0;

	padding: 0 0 20px 0;

	overflow: hidden;

}



.post + .bottom {

	border-bottom: none;

	padding-bottom: 0;

}



.olderarticle {

	margin: 0 0 30px;

	padding: 0 0 10px;

}



.post h1 a:link, .post h1 a:visited {

	color: #272727;

	text-decoration: none;

}



.post h1, .post .align-left, .post .align-right {

	margin-top: 0;

}



.post h1 a:hover {

	background-color: #f9f9f9;

}



.olderarticle h1 {

	font-size: 2.2em;

}



.postimg {

	border: 2px solid #eedfb9;

	float: left;

	margin: 0 15px 15px 0;

}



.postimg-s {

	border: 3px solid #eedfb9;

	float: left;

	margin: 0 15px 15px 0;

	width: 76px;

}



ul.meta {

	margin: 1em 1em 1em 0;

	overflow: hidden;

}



#main ul.meta li {

	background-color: #eee;

	border: 1px solid #ddd;

	border-radius: 3px;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

	color: #999;

	display: -moz-inline-box;

	display: inline-block;

	font-size: 0.8em;

	margin-right: 5px;

	padding: 4px 6px;

}



ul.meta li a:link, ul.meta li a:visited {

	color: #999;

}



#main ul.meta li:hover, ul.meta li:hover a {

	background-color: #B1185C;

	color: #fff;

	text-decoration: none;

}



#main ul.meta li:hover {

	border: 1px solid #980f4c;

}



.commentnumber {

	background: url("images/comments.png") no-repeat;

	display: block;

	float: right;

	height: 46px;

	margin: 5px 0 10px 10px;

	text-align: center;

	width: 44px;

}



.commentnumber span a {

	color: #333;

	display: block;

	font-size: 1.2em;

	font-weight: bold;

	height: 40px;

	line-height: 37px;

	text-decoration: none;

	width: 44px;

}



.wp-pagenavi {

	display: block;

	margin-bottom: 20px;

}







/*------------ Single Posts ------------*/



/*.single {

	border-bottom: none;

	margin: 0;

	padding-bottom: 50px;

}*/



p.post-tags {

	background: url("images/tag.png") no-repeat left 80%;

	border-top: 1px solid #eee;

	margin: 45px 0 0 0;

	padding: 20px 0 0 25px;

}



/* Post Author */

#postauthor-top {

	background: url("images/authorbg.png") no-repeat top;

	height: 26px;

	margin-left: -21px;

	width: 712px;

}



#postauthor {

	background-color: #fff;

	display: block;

	margin-left: -20px;

	padding: 20px;

	overflow: visible;

	width: 670px;

}



#author-archive {

	background: url("images/authorbg.png") no-repeat bottom;

	display: block;

	margin: 0 0 30px -21px;

	overflow: visible;

	padding: 0 20px 40px 20px;

	width: 672px;

}



#postauthor h3, #author-archive h3 {

	margin: 0 0 10px 0;

}



#postauthor img, #author-archive img {

	border: 3px solid #EEDFB9;

	float: left;

	margin: 0 15px 15px 0;

}



#postauthor div, #author-archive div {

	font-size: 0.95em;

	margin-left: 125px;

	width: 545px;

}



#postauthor p:last-child, #author-archive p:last-child {

	margin-bottom: 0;

}



/* Share This */

#sharethis-top {

	background: #eedfb9 url("images/sharethis-top.png") no-repeat top left;

	height: 8px;

	margin-left: -21px;

	width: 712px;

}



#sharethis, #sharethis-page {

	background: #eedfb9 url("images/sharethis-bot.png") no-repeat bottom left;

	display: block;

	margin-left: -21px;

	padding: 20px 20px 28px 20px;

	overflow: visible;

	text-align: center;

	width: 672px;

}





#sharethis-page2 {

	background: #eedfb9 url("images/sharethis-bot.png") no-repeat bottom left;

	display: block;

	margin-left: -21px;

	padding: 20px 20px 28px 20px;

	overflow: visible;

	text-align: center;

	width: 900px;

}



#sharethis-page {

	background-image: none;

	margin-bottom: -30px;

}



#sharethis h2, #sharethis-page h2 {

	height: 0;

	margin: 0;

	visibility: hidden;

}



#sharethis-images, #sharethis-page img {

	padding-right: 17px;

}



#sharethis img {

	margin-right: 5px;

}







/*------------ Sidebar ------------*/



#sidebar {

	float: right;

	margin: 0 20px 0 0;

	width: 220px;

}



.widget {

	background-color: #fff;

	border: 1px solid #b7a880;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	font-size: 0.9em;

	line-height: 1.4em;

	margin-bottom: 10px;

	padding: 20px 0;

}



.widget h3 {

	background: url("images/star-s.png") no-repeat top left;

	clear: both;

	color: #272727;

	font-family: Aller, Myriad Pro, Helvetica, Arial, sans-serif;

	font-size: 1.2em;

	font-weight: bold;

	margin: 0 10px 10px 10px;

	padding-left: 16px;

}



.widget h3 a {

	color: #272727;

}



.widget ul {

	margin: 0;

}



.widget li {

	list-style: none;

}



.widget li ul li {

	padding-left: 15px;

}



.widget li a:link, .widget li a:visited {

	border-top: 1px solid #ddd;

	color: #373737;

	display: block;

	padding: 5px 10px;

}



.widget p {

	padding: 0 10px;

}



.widget p:last-child {

	margin-bottom: 0;

}



#calendar_wrap {

	margin: 0 10px;

	text-align: center;

}



#calendar_wrap table {

	margin: 0 auto;

}



#calendar_wrap caption {

	font-weight: bold;

}



#calendar_wrap table a {

	border-bottom: 1px dotted;

	color: #b1185c;

	display: block;

}



#calendar_wrap table #today {

	color: #305d9a;

}



#calendar_wrap #prev a, #calendar_wrap #next a {

	border: none;

	color: #272727;

	text-decoration: underline;

	text-transform: uppercase;

}



.widget #searchform {

	margin: 0 10px;

}



li.recentcomments {

	border-top: 1px solid #ddd;

	color: #373737;

	display: block;

	padding: 5px 10px;

}



li.recentcomments a:link, li.recentcomments a:visited {

	border: none;

	padding: 0;

}



.textwidget {

	margin: 0 10px;

}



#tag_cloud {

	padding: 20px 10px;

}



#tag_cloud h3 {

	margin-left: 0;

	margin-right: 0;

}



/* FlickrRSS styling */

#flickrrss {

	padding-left: 18px;

}



#flickrrss h3 {

	margin-left: 0;

}



#flickrrss img {

	border: 3px solid #EEDFB9;

	margin: 0 19px 10px 0;

}



#flickrrss a:hover img {

	border: 3px solid #b1185c;

}



/* Twitter for WordPress styling */

.widget_twitter {

	background: #fff url("images/twitter-bird.png") no-repeat 170px 7px;

	padding: 20px 10px;

}



.widget_twitter h3 {

	margin-left: 0;

	margin-right: 0;

}



.widget_twitter li {

	margin-bottom: 25px;

}



.widget_twitter li a:link, .widget_twitter li a:visited {

	border: none;

	color: #305D9A;

	display: inline;

	padding: 0;

}



.widget_twitter li a:active {

	color: #b1185c;

}



.widget_twitter span.twitter-timestamp {

	display: block;

	margin-top: 5px;

}





/*------------ Comments ------------*/



.comms-navigation {

	clear: both;

	margin: 10px 0;

}



h2#comments {

	margin-top: 18px;

}



.commentlist {

	clear: both;

	margin: 0 0 20px 0;

}



#main .commentlist p {

	font-size: 15px; /* Don't change to em's. The relative sizes mess everything up :( */

}



.commentlist li {

	border: 1px solid #ddd;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	list-style: none;

	margin-bottom: 15px;

	padding: 15px 10px;

}



.commentlist li .avatar {

	border: 3px solid #eee; /* #EEDFB9 */

	float: right;

	margin: 0 10px 5px 0;

}



.comment-author cite {

	font-size: 1.2em;

	font-weight: bold;

}



.comment-meta {

	padding-bottom: 10px;

	/*margin-bottom: 5px;*/

}



.comment-meta a {

	color: #272727;

	font-size: 0.8em;

}



.reply {

	display: inline;

}



/* Comment Form */

#respond {

	clear: both;

}



form label {

	display: -moz-inline-box;

	display: inline-block;

	margin-right: 10px;

	text-align: right;

	vertical-align: top;

	width: 6em;

}



input, textarea {

	border: 1px solid #666;

	color: #272727;

	font-family: Helvetica, Arial, sans-serif;

	font-size: 0.9em;

	margin-right: 10px;

	padding: 3px;

}



input:focus, textarea:focus {

	border: 1px solid #272727;

}



textarea {

	padding: 10px 5px;

}



.cancel-comment-reply a {

	margin-bottom: 15px;

}



/* cForms styling */

/* Actually, screw this. cForms uses horrible class & id names. Sorry, but you're on your own styling this! */

fieldset {

	border: 1px solid #ddd;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	padding: 10px;

}



legend {

	color: #272727;

	padding: 0 5px;

}



form.cform ol li {

	list-style: none;

}



#main .cform li {

	font-size: 1em;

}



.cform li {

	margin-bottom: 10px;

}



.reqtxt, .emailreqtxt {

	color: #666;

	font-size: 0.9em;

	font-style: italic;

}



input[type="checkbox"], input[type="radio"] {

	display: -moz-inline-box;

	display: inline-block;

	margin-right: 0;

}



label.cf-group-after {

	clear: right;

	display: -moz-inline-box;

	display: inline-block;

	text-align: left;

	margin-bottom: 10px;

	margin-left: 5px;

	width: auto;

}







/*------------ Footer ------------*/



#footer {

	color: #999;

	clear: both;

	padding: 5px 20px 0 20px;

	text-align: right;

}



#footer span {

	font-size: 0.8em;

	font-style: italic;

}



#footer a:link, #footer a:visited {

	border-bottom: 1px dotted #999;

	color: #999;

	text-decoration: none;

}



#footer a:hover, #footer a:active, #footer a:focus {

	border-bottom: 1px solid #999;

}