/* neocorsten [dot] com */




/* COLOR CODE



PANTONE SOLID UNCOATED

PRIM		NAME							CMYK (%)		Hex#
Yellow	PANTONE 3945 U						3;0;85;0		FDEF41
Brown	PANTONE 1605 U						0;56;100;30	B66610
Orange	PANTONE 1665 U						0;68;100;0	F37320
Green.s	PANTONE 355 U						94;0;100;0	00A94F
Magenta	PANTONE Hexachrome Magenta U		0;97;0;0		ED1B8F
Blue.s	PANTONE 285 U						89;43;0;0		007DC3
Green.l	PANTONE 367 U						32;0;59;0		B4D88B
Blue.l	PANTONE 2915 U						59;7;0;0		53BCEB
Blue.g	PANTONE 549 U						52;6;0;25		569BBE
Green.b	PANTONE 378 U						34;0;100;60	566C0E
Gray.l	PANTONE Cool Gray 1					0;0;0;§		EFEFF0


/*





/* Clean whitespace */
*, body {
	margin:0;
	padding:0;
}


/* ---------------- LAYOUT ---------------- */

/* ---------------- ID DIV ---------------- */


#wrapper {
	width: 940px;
	margin: 0 auto;
}

#pageheader {
	height:122px;
	background-image: url(../UI_graphics/logo.gif);
	background-repeat:no-repeat;
	margin-bottom:20px;
}

#sprite {
	width: 750px;
	margin-left:auto;
	margin-right:auto;
}

#spriteheader {
	height:122px;
	background-image: url(../UI_graphics/logo.gif);
	background-repeat:no-repeat;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	width:860px;
}

#spriteintro {
	min-height:400px;
	background-image: url(../UI_graphics/neocorsten-sprite.jpg);
	background-repeat:no-repeat;
	font-size: 16px;
	line-height:28px;
	color: #5FA0BF;
	text-align: left;
	padding-left:500px;
	}
	
#navalert {
	width:600px;
	margin-top:20px
	margin-left:auto;
	margin-right:auto;
	margin-bottom:40px;
	text-align:justify;
	border: 2px solid #ED1B8F;
	padding: 2px;
}

#navalertbh{
	text-align: center;
}

#navalertbh img, #navalertbh a {
	border:none;
}
	
#spritefooter {
	background-image: url(../UI_graphics/tinyicons/cowmilkhouse.jpg);
	background-repeat:no-repeat;
	padding-left:115px;
	line-height:130px;
	font-size:20px;
	color: #5FA0BF;
	font-weight:bold;
	width:100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}

#content {
	position: relative;
	float: left;
	width:680px;
	padding: 0px 0 0px 0;
	z-index: 2;
}

#pagefooter {
	clear: both;
	background-color: #e1e8f6;
	border-top: 1px dotted #c2c8d4;
	margin-top: 10px;
}

#pagefooter ul {
	margin-left:0px;
	padding-left:0px;
	list-style:none;
	
}

/* ---------------- FLICKR matrix ---------------- */

#flickr {
	width: 198px;
	height:198px;
	margin: 0px 0px 10px 11px;
	border: 1px solid #ED1B8F;
	padding:0;
}

#flickr img {
float:left;
margin:3px 3px 3px 3px;
background: #E2E3E4;
padding:4px;
width:50px;
height:50px;
border: solid 1px;
}

#flickr a:hover img{ background: #A3C159; }


.navtitle {
	text-align:right;
	margin-right:10px;
}

.navtitle img {
	width:75px;
	height:28.5px;
}

.navtitle img.tinyicon {
	width: 32px;
	height: 30px;
}
/* ------------- END OF FLICKR matrix ------------- */

/* ----------------- MUSIC matrix ----------------- */

#music {
	width: 198px;
	height:198px;
	margin: 0px 0px 0px 11px;
	border: 1px solid #ED1B8F;
	/*padding: 14px 0 0 50px;*/
}

#music img {
float:left;
margin:3px 3px 3px 3px;
background: #E2E3E4;
padding:4px;
width:50px;
height:50px;
border: solid 1px;
}

#music a:hover img { background: #A3C159; }

/* -------------- END OF MUSIC matrix -------------- */

#hottuneshidden {
	margin-bottom:20px;
	border-bottom: 1px solid #c2c8d4;
	display:none;
}

#hottunesbody {
	border-top: 5px solid #badb3c;
	overflow: auto;
	height:150px;
	padding-left:10px;
}

.tunesicon img{
	float:left;
	width: 35px;
	height: 35px;
	margin-right:5px;
}

/* -------------------- MENU DIV ------------------- */

#menu {
	position: fixed;
	right: 120px;
	top: 150px;
	
	float: right;
	width: 240px;
	z-index: 3;
	background: transparent repeat url(../UI_graphics/diag_pattern_36x36.gif);
}

#menu ol {
	bottom:  8em;
	line-height: 20px;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
}

#menu ol li, #menu ol a {
	display: block;
	margin: 0;
	padding: 0px;
}

#menu ul {
	font-size: 10px;
	border-left: 1px solid #E2D49A;
	margin-left: 20px;
	padding-left: 10px;
}

/* ---------------- END OF MENU DIV ---------------- */


/* ----------------- END OF ID DIV ----------------- */

/* ------------------- CLASS DIV ------------------- */

.row {
	/*we prevent our floated elements from hanging down to other sections*/
	clear:  both;
}

.maincol {
	float: left;
	width: 420px;	
	margin-right:20px;
	overflow:auto;
}


.article {
	margin-bottom: 1.3em;
	border-bottom: 1px dotted #f9329b;
	overflow:auto;
	z-index:0;
}

.article h2 a {
	margin: 0;
	padding: 0;
}

.articleheadtitle {
	display: block;
}

.articlehead{
	margin-left: 0;
	padding-left: 0;
	margin-top:-2px;
	display: block;
}

.articlehead li, .articlehead li a { 
	display: inline;
	margin: 0;
	padding: 0;
	color: #a3a9b7;
	font-size:11px;
	line-height:20px;
}

.articlehead li a {
border-bottom: solid 1px #d6ddeb;
text-decoration:none;

}

.permalinkheading {
	background: url(../UI_graphics/tinyicons/links-icon10x15.png) no-repeat left bottom;
	padding-left:13px;
	margin-left:0px;
	padding-top:5px;
}

.commentsheading {
	background: url(../UI_graphics/tinyicons/comments11x15.png) no-repeat left bottom;
	padding-left:13px;
	padding-top:5px;
}


/* In order to have around 66 characters I put a padding-right of 10, related to the body default font specified .... The ideal method would be to constrain proportions with em : Define em size for your font and define the width of the container with em too. If you have only a blank page with some text it is fine but for a multi-column layout with specific design, it is not thinkable !!! And well, for all the guys that use IE, I don't mind if they can't increase/decrease the font size. If they have a correct default size it's good and if they don't, well they don't.

Ideal line length study :
http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm
http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm
*/
.articlebody {
	text-align:justify;
	margin-left: 10px;
	padding-right:10px;
	font-size: 10px;
}

.articlebody ul {
	list-style-image: none;
	list-style-type: none;
	margin-left:0;
	padding-left:0;
}

.articlebodylist li {
	list-style-type: disc;
	font-weight:bold;
}

.articlebodylist .desc {
	font-weight:normal;
	padding-left: 10px;
}


.articlefooter {
	margin-left: 10px;
	margin-bottom: 5px;
	margin-top:10px;
	margin-right:10px;	
	
	font-size:13px;
}

.articlecomments {
	border-bottom: 5px solid #badb3c;
}

#comments {
	margin-bottom:10px;
}

#comments ol{
	text-decoration:none;
	margin: 0;
	padding:0;
}

#comments li {
margin-bottom:20px;
}


.commenthead {
	font-size:12px;
	color:#007DC3;
	line-height:55px;
	font-weight:bold;
}

#comments li.odd .commenthead {
	color:#B66610;
}

.commentnumbering {
	background: url(../UI_graphics/tinyicons/commentsnumberingodd.png) no-repeat left;
	/* 51x53px */
	padding-left:22px;
	padding-right:25px;
	float:left;
}

#comments li.even .commentnumbering {
		background: url(../UI_graphics/tinyicons/commentsnumberingeven.png) no-repeat left;
}

.commentnumbering a {
	color:white !important;
	font-weight:bold;
}

#comments li.odd .commentnumbering a  {
		color:white !important;
		font-weight:bold;
}

.commentbody {
	text-align:justify;
	margin-left: 30px;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
}

#comments li.odd .commentbody {
	background-color:#F6E1EC;
}

#comments li.even .commentbody {
	background-color:#D3F4D3;
}

#comment_form {
	font-family: "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
	font-size: 11px/13px;
	color: #525252;
	margin-top:20px;
}

#comments_info {
	width:40%;
	float:right;
	overflow:auto;
	clear:left;
	padding-left:3px;
	border-left:2px solid #B66610;
}

.comment_form_intro {
	margin-bottom:10px;
}

#comments_input {
	border-style: dashed;
	border-color:#569BBE;
	border-width:2px;
	padding: 5px;
}

#comment_form .required {
	color:#f91f61;
}


#comment_form .comment_name_input,
#comment_form .comment_email_input,
#comment_form .comment_web_input {
	width:50%;
	border-style: solid;
	border-color:#B4D88B;
	border-width:1px;
}

#comment_form .txpCommentInputMessage {
	width:100%;
	border-style: solid;
	border-color:#B4D88B;
	border-width:1px;
}
#comment_form label {

}
#comment_form p {
	margin-bottom:20px;
}

#comment_form .comments_error {
	background-color:#ED1B8F;
	color:white;
}





.sidecol {
	float: right;
	width: 220px;
	background: transparent repeat url(../UI_graphics/diag_pattern_36x36.gif);
	padding: 10px 10px 10px 10px;
}

.sidecolfooter {
	float: right;
	width: 220px;
	padding: 0px 10px 0px 10px;
}



/* ---------------- END OF LAYOUT ---------------- */



ol, ul, li {
	list-style-image: none;
	list-style-type: none;
}
ol, ul {
	margin-right: 0;
	margin-bottom: 0.8em;
	margin-left: 0;
}

.latestlinks {
	float:left;
	width: 45%;
}



.latestlinks li, .stuff li, .sidecolfooter li {
	font-size:12px;
}


/* ---------------- Live Search styles ---------------- */

/* --- around the form input (<txp:rss_live_search>) --- */
#livesearch {
	font-size: 10px;
	padding: 2px;
	color: #f91f61;
}
/* ------------------------------------------------------*/

/*
Results frame structure:
<div id="LSResult>
<div id="LSRes">
	<ol>
		<li>	<span class="category">Category</span>
			<ul>
				<li>
					<div class="LSRow">
						<a href="">
						<div class="any">
						<div class="left">Title</div>
						<div class="right">Elapsed</div>
						<div class="spacer"></div>
						</div>
						</a>
					</div>
				</li>
			</ul>		
		</li>
	</ol>
</div>
</div>
*/

#LSResult { 
	position: absolute;
	background-color: #fff;
	width: 400px;
	margin-left: -450px;
	margin-top:-50px;
	border: 4px solid #ddd;
	color:#525252;
	font-size:10px;
	z-index:200;
}


#LSRes ul {
	list-style:none;
	border-left: 2px solid #52a6ff;
	margin-left: 20px;
	padding-left: 5px;
}


#LSRes .category {
	font-size:11px;
	color: #6c6c6c;
}

#LSRes .left {
	font-size: 10px;
	color: #525252;
	line-height: 13px;
}

#LSRes .right {
	font-size: 9px;
	color: #999fad;
	line-height: 13px;
}

#LSRes ul li a:link {
	/*color:#52a6ff;*/
	text-decoration: none;
}
#LSRes ul li a:visited {
	/*color:#52a6ff;*/
	text-decoration: none;
}
#LSRes ul li a:hover {
	/*color:#52a6ff;*/
	background-color: #C6D9FF;
	text-decoration: none;
}
#LSRes ul li a:active {
	/*color:#52a6ff;*/
	background-color: #f91f61;
	text-decoration: none;
}

.any {
	display:block;
	margin:0;
	padding:0;
}

#LSShadow { padding: 5px; }

.LSHighlight strong {
	color: #f91f61;
	font-weight:bold; }
	
	
.LSHighlight a {
	font-family: "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
	font-size: 11px/1.5em;
	color: #525252;
	font-weight:normal;
	}
.LSHighlight a:active {
	color: #525252;
	}
.LSHighlight a:hover {
	color: #a3a9b7;
	text-decoration: none;
	}
	
.LSResTitle {
	font-size:17px;
	font-weight:bold;
	margin: 0 0 10px 0;
	color: #f91f61;
	border-top: 1px solid #aaaaaa;
	border-bottom:1px solid #aaaaaa;
}
	
	

#LSHeader { padding: 2px 2px 8px; }
.lsDate { display: block; color: #555; }

/* --------------- END Live Search styles --------------- */


/* --------------- ARCHIVES BY DATE --------------- */
#archivebydate {
margin-top:-15px;
margin-left:20px;
margin-bottom:20px;
}

/* YEAR */
.archivebydateY {
	font-size:17px;
	font-weight:bold;
	height:20px;
	color: #f91f61;
	padding-left:5px;
	border-left: 50px solid #badb3c;
	padding-right:5px;
	border-right: 2px solid #badb3c;
	margin: 20px 295px 5px 0;
}

/* MONTH */
#archivebydate dt {
	color: #525252;
	font-variant: small-caps;
	font-size:15px;
	font-weight:bold;
	border-bottom: solid 1px #d6ddeb;
	text-decoration:none;
	
}

#archivebydate dd {
	padding-left:60px;
	color:#525252;
	line-height:17px;
	font-size:12px;
}


/* DAY */
#archivebydate dd .archivebydateday {
		margin-right:8px;
}

/* NB COMMENTS */
#archivebydate dd .right {
	font-size:11px;
}

/* DAY + TITLE */
#archivebydate dd .left {
	
}

#archivebydate dd a {
	display:block;
}

#archivebydate dd a:hover {
	background-color: #C6D9FF;
}


/* --------------- END OF ARCHIVES BY DATE --------------- */

/* --------------- ARCHIVES BY CATEGORY --------------- */

#archivebycat {
	margin-top:5px;
	margin-left:20px;
	margin-bottom:20px;
}

#archivebycat ul .cattitle a{
	color: #525252;
	font-variant: small-caps;
	font-size:15px;
	font-weight:bold;
	border-bottom: solid 1px #d6ddeb;
	text-decoration:none;

}
#archivebycat ul {
	margin-left:0;
	padding-left:0;
}

#archivebycat li {
	padding-left:60px;
	color:#525252;
	line-height:17px;
	font-size:12px;
}

#archivebycat li a,#archivebycat ul a {
	display:block;
	}

#archivebycat li a:hover,#archivebycat ul a:hover {
	background-color: #C6D9FF;
	}
	
#archivebycat ul .cattitle .right {
	font-size:12px;
	}

#archivebycat li .right {
	font-size:11px;
	}



/* --------------- END OF ARCHIVES BY CATEGORY --------------- */

/* -------------------- ARCHIVES BY TAGS -------------------- */
#archivebytags {
margin-left:20px;
}


/* --------------- END OF ARCHIVES BY TAGS --------------- */



#linkstyle dl {
	margin-top:5px;
	margin-left:20px;
	margin-bottom:20px;
}

#linkstyle dt {
	color: #525252;
	font-variant: small-caps;
	font-size:15px;
	font-weight:bold;
	border-bottom: solid 1px #d6ddeb;
	text-decoration:none;
}

#linkstyle dd {
	padding-left:30px;
	color:#525252;
	line-height:17px;
	font-size:12px;
}

#linkstyle .linktitle {
}


#linkstyle .linkdescription {
	font-size:10px;
	padding-left:5px;
	line-height:13px;
	margin-bottom:5px;
}


/* --------------- RECIPES --------------- */


.recipe {

}

.recipe .articlefooter {
	margin-bottom: 1.3em;
	border-bottom: 1px dotted #f9329b;
	margin-left:0px;
	padding-left:0px;
	margin-right:0px;
	padding-right:0px;
}

.recipeingredients {
	float: left;
	width:216px;
	text-align:right;
	padding-right:2px;
	font-size:10px;
	
}

.recipeserves {
margin-top:-4px;
margin-bottom:20px;
}

.recipeprocess {
	font-size:12px;
	text-align:justify;
	padding-top:10px;
}

.recipetitle, .recipeprocess {
	float: right;
	width: 450px;
	border-left:2px solid orange;
	padding-left:10px;
}

.recipe dt {
	font-weight:bold;
	margin-bottom:5px;
	font-size:12px;
}

.recipe ul li {
	margin-bottom:3px;
}

.recipe ol {
	margin-left:0;
	padding-left:0;
}

.recipe ol li {
	list-style:none;
	margin-bottom:15px;
}

.recipecomments {
	width:450px;
	margin-left:218px;
	padding-left:10px;
}

/* Deal with images display in articles */


.image {
display: inline;
}

.image img {
	z-index:4;
}