/* Built by Simon Collison 2004 for the Expression Engine Template Contest. Look for the comments to work out what does what */

body {
	margin: 10 auto;
	padding: 10;
	color: #000000;
	text-align: center;
	background: #000000;
}



/* the wrapper holds the whole thing centrally in the browser window */

#wrapper {
	margin: 10 auto;
        padding: 10px;
	width: 762px;
	background: #663300;
	color: #fd004b;
	text-align: left;
	border: 1px solid #fff;
}


/* main layout blocks for site */
#header {
	margin: 0px 10px 0px 10px;
	color: #663300;
	height: 85px;
	width: 740px;
	border: 1px solid #663300;
	background: url(/images/MOCHeader.gif);
}

#quoteoftheday {
	margin: 0px 0px 10px 0px;
	padding: 0px 50px 0px 50px;
	color: #ffffff;
	width: 640px;
	border: 1px solid #663300;
	background: #663300;
	font: 10px/11px "Lucida Grande", verdana, sans-serif;
        font-style: italic;
	text-align: center;
}

/* main site navigation */
#navbox {
	float: left;
	align: center;
	margin: 0 10px 10px 5px;
	color: #f00;
	height: 377px;
	width: 228px;
	border: 1px solid #663300;
	background: #663300;
}

.navbox_text {
	margin: 0 0px 0 0px;
}

#navcontainer {
	background: transparent;
	height: 377px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border-bottom: none;
}
#navcontainer ul {
	margin: 0;
	padding: 0;
}
#navcontainer ul li {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	display: block;
	float: left;
	font: 12px/30px "Lucida Grande", verdana, sans-serif;
	text-align: left;
}

#navcontainer li { background: #663300; color: #fd004b; }

#navcontainer a {
	width: 218px;
	color: #ffffff;
	text-decoration: none;
	display: block;
	border: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 10px;
}

#navcontainer a:hover { background: #884400; color: #fd004b; }
#navcontainer a#active { background: #884400; color: #ffffff; border-bottom: 1px solid #084a9c; }

/* beauty shots */
#picturebox {
	float: right;
	margin: 0 5px 10px 0;
	color: #030;
	height: 377px;
	width: 488px;
	border: 1px solid #000000;
	background: url(/images/MOCBeauty_1.jpg);
}

/* main content blocks for site */
/* the content style holds the two main columns together */

#content {
	margin: 10px 0;
}


/* blog is the right hand column where your entries and main content appear */

#bloghome {
	float: right;
	width: 488px;
	margin: 0 5px 10px 0;
	color: #ffffff;
	text-align: left;
	border: 1px solid #663300;
	padding: 0;
	font: 12px/130% 'Lucida Grande', Verdana, Arial, Sans-Serif;
	line-height: 165%;
	background: #663300;
}

#blog {
	float: right;
	width: 488px;
	margin: 0 5px 10px 0;
	color: #000000;
	text-align: left;
	border: 1px solid #000000;
	padding: 0;
	font: 12px/130% 'Lucida Grande', Verdana, Arial, Sans-Serif;
	line-height: 165%;
	background: #ffffff;
}

.blog_subhead {
	font-weight: bold;
}

/* sidebar is the left column where all the links and secondary info show up */

#sidebar {
	float: left;
        width: 228px;
	margin: 0 0px 10px 5px;
	color: #ffffff;
	text-align: left;
	border: 1px solid #663300;
	padding: 0;
	font: 11px/130% 'Lucida Grande', Verdana, Arial, Sans-Serif;
	line-height: 165%;
	background: #663300;
}

.sidebar_text {
	margin: 0 16px 0 8px;
}


/* the footer, containing credits, rss links etc */

#footer {
	margin: 0 10px 10px 10px;
	padding: 15px 10px 12px;
	border: 1px solid #663300;
	background: #663300;
	color: #fd004b;
	font-size: 9px;
	letter-spacing: 0.09em;
}


/* style elements */

/* default link styles */

a:link {
	text-decoration: underline;
	color: #000000;
	background: transparent;
}
a:hover {
	text-decoration: underline;
	color: #000000;
	background: transparent;
}
a:visited {
	text-decoration: underline;
	color: #000000;
	background: transparent;
}


/* the main class keeps blog content away from the edges. Could have been done with padding in the blog class, but that could cause some woes with older browsers */

.main {
	margin: 0 16px 0 8px;
}

/* Header definitions. h1 is hidden, and only shows when styles are off. Note, there are specific definitions for the sidebar h3 header, blog h3 header, and the blog h2 link. The blog h2 link is a clickable rollover of the entry title */

h1 {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size:  36px;
	font-weight: bold;
	margin: 20px 0 0 10px;
}
#tag {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size:  12px;
	font-weight: bold;
	margin: 5px 0 0 10px;
}
h3 {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	letter-spacing: 0.09em;
}
h2 {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	letter-spacing: 0.09em;
	font-weight: bold;
	margin-top: 6px;
	margin-bottom: 6px;
}
h4 {
	margin-bottom: 4px;
	font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
}
h5 {
	margin-bottom: 4px;
	font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	line-height: 165%;
}
#sidebar h3 {
	width: 249px;
	height: 16px;
	margin: 0;
	color: #336;
	text-decoration: none;
	display: block;
	text-align: left;
	font: bold 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background: url({site_url}themes/site_themes/logical_blocks/lb_diags_h3.gif) right;
	padding: 6px 0 0 5px;
}
html>body .h3 {
	width: 249px;
}
#blog h3 {
	letter-spacing: 0.09em;
	margin-top: 9px;
	margin-bottom: 12px;
	font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.center {
	text-align: center;
}
h2 a:link, h2 a:visited {
	font-weight: bold;
	padding-left:0px;
	background: #fff
	color: #336;
	text-decoration: none;
}
h2 a:hover {
	color: #900;
}

/* Dont ask. Just don't delete this spacer class */

.spacer {
	clear: both;
}

/* For use with the acronym plugin. Creates a question mark, italic text and underline on acronyms */
abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

/* Two paragraph styles. A general one, and one specific to the footer */

p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
#footer p {
	margin: 10px 0 5px;
}

/* For use with quotes and text you need to present outside of normal format */

blockquote {
	color: #333;
	border-left: 1px solid #CCC;
	margin-left: 5px;
	padding-left: 4px;
	padding-right: 4px;
	font: 11px 'Lucida Grande', Verdana, Arial, Sans-Serif;
	line-height: 165%;
}

/* The standard list styles. There are specific sidebar list styles later on */

ul {
	list-style-type: none;
	margin-top: 3px;
	margin-bottom: 2px;
	margin-left: 0;
	padding-left: 0;
}
li {
	border-bottom: 0 solid #CCC;
	padding-bottom: 2px;
	font: 100% verdana, arial, helvetica, sans-serif;
}

/* As it says, control of multi-entry page pagination links */

.paginate {
	margin: 18px 16px 18px 8px;
}

/* date and title are added to earlier h tags for greater control of headers. Posted shows all the author, permalink and trackback stuff under each entry */

.date {
	font-size: 10px;
}
.titlehome {
	font-size: 135%;
	font-weight: bold;
	background: transparent;
	color: #ffffff;
.title {
	font-size: 135%;
	font-weight: bold;
	background: transparent;
	color: #336;
}
.posted {
	clear: both;
	margin-bottom: 25px;
	font: 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;
	color: #666;
	line-height: 165%;
	padding: 3px 0 15px;
	border-bottom: 1px dashed #999;
}
.posted_comments {
	clear: both;
	font: 10px 'Lucida Grande', Verdana, Arial, Sans-Serif;
	color: #666;
	line-height: 165%;
	padding: 3px 0 3px;
}

/* Comments classes. commbox and coomboxalt are used in the switch conditional on the comments page */

.comments {
	font-size: 120%;
	font-weight: bold;
	background: transparent;
	color: #E78818;
}
.commbox {
	background: #EDEAEB;
	border: 1px solid #ddd;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 7px;
}
.commboxalt {
	background: #FAF6F7;
	border: 1px solid #ddd;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 7px;
}

/* Some form styling. Not much though */

checkbox {
border: 3px double #999999;
padding:1px;
color: #333333;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
textarea {
border: 3px double #999999;
padding:1px;
color: #333333;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
input {
border: 3px double #999999;
padding:1px;
color: #333333;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
input.submit
{
border: 2px double #999999;
padding: 1px;
background-color: #000;
color: #333333;
font-size: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
fieldset {padding:10px;}

/* As mentioned above, these are the sidebar-specific list styles, based on my ticked-off links technique. Note the sidebar-specific links also. They have set widths so you can rollover anywhere along the link line */

#sidebar ul {
	list-style-type: none;
	margin: 0;
	padding: 3px 5px;
	border: 0 solid #CCC;
	color: #666;
}
#sidebar li {
	border-bottom: 1px solid #CCC;
}
#sidebar li a:link {
	color: #333366;
	line-height: 150%;
	text-decoration: none;
	display: block;
	width: 243px;
}
#sidebar li a:visited {
	color: #333366;
	text-decoration: none;
	line-height: 150%;
	display: block;
	width: 243px;
}
#sidebar li a:hover {
	color: #000;
	line-height: 150%;
	text-decoration: none;
	display: block;
	width: 243px;
}
#sidebar li a:active {
	color: #333366;
	line-height: 150%;
	text-decoration: none;
	display: block;
	width: 243px;
}