/*------------------------------------------------------------------
ryanbrill.com Global CSS

Author: Ryan Brill

Methods:		1. 	CSS FILES ORGANISATION (if more than 1 file needed)
					Abstract    ->    Specific
				
				2.	RULES ORGANISATION WITHIN CSS FILES
				 	Should mirror the html document flow:
					General
						Container
							Layout Setup
							Header
								Nav
							Body
								Section Settings
							Footer
						Hacks
						(other)
-------------------------------------------------------------------- */


/* GENERAL RULES
-------------------------------------------------------------------- */

* {
	/* overwrite all default browser settings */
	margin: 0;
	padding: 0;
}

body {
	background: #F5F5F5;
	font-size: 11px;
	
	/* global font settings */
	font-family: arial, helvetica, sans-serif;
	color: #333; /* main text color */
	
	/* part 1 of centering hack */
	text-align: center;
}

/* Global Link Settings
-------------------------------------------------------------------- */
a {
	color: #C00;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* Global Text Settings
-------------------------------------------------------------------- */

h1, h2 {
	font-family: Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 20px;
}
h2 {
	font-size: 11px;
	margin: 20px 0 0 0;
}
h3 {
	font-size: 11px;
}
p {
	margin: 1em 0;
	line-height: 16px;
}
ul {
	list-style: none;
	margin: 0 0 0 -12px;
	line-height: 16px;
}
ul li {
	background: url(../i/bullet.gif) no-repeat 0 6px;
	padding-left: 12px;
}
ol {
	line-height: 16px;
}
dl {
	margin: 15px 0;
}
blockquote {
	background: url(../i/blockquote.gif) no-repeat 0 4px;
	padding: 0 25px;
	padding-bottom: 1px;
	margin-bottom: -10px;
}
blockquote p.author {
	color: #999;
	margin-top: -10px;
	text-align: right;
}
img.blockimg {
	border: 1px solid #CCC;
	padding: 3px;
	margin: 0 10px 10px 0;
}
img.floatimg {
	border: 1px solid #CCC;
	padding: 3px;
	float: left;
	margin: 0 10px 10px 0;
}
.caption {
	display: block;
	color: #666;
	font-size: 10px;
}
.highlight {
	background: #ffc;
}
.bold {
	font-weight: bold;
}
div.update h3 {
	min-height: 15px;
	background: url(/i/update.gif) no-repeat;
	border-bottom: 1px solid #ccc;
	padding: 0 0 5px 22px;
}
div.update p {
	color: #666;
	margin-top: 5px;
}

/* General Elements
-------------------------------------------------------------------- */

img {
	border: 0;
}

/* Often used Classes
-------------------------------------------------------------------- */

.floatright {
	float: right;
	display: inline; /*to avoid IE double margin bug*/
}
.floatleft {
	float: left;
	display: inline; /*to avoid IE double margin bug*/
}
.alignright {
	text-align: right;
}
.center {
	text-align: center;
}
.padtop {
	margin-top: 15px;
}
.padbottom {
	margin-bottom: 15px;
}
.hide {
	display: none;
}
.underline {
	text-decoration: underline;
}
p.link {
	font: bold 9px Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
	text-transform: uppercase;
	margin-top: 20px;
}
p.note {
	color: #777;
	margin-top: 0;
}
div.hr {
	height: 0px;
	font-size: 0px;
	border-bottom: 1px solid #CCC;
	margin-left: -10px;
}

/* CONTAINER DIVS
-------------------------------------------------------------------- */
#container {
	width: 778px;
	background: #FFF;
	border-left: 1px solid #EEE;
	border-right: 1px solid #EEE;
	padding: 0 10px;
	
	/* part 2 of centering hack */
	text-align: left;
	margin: 0 auto;
	
	/* box model hack */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 756px;
}
html>body #container {
	width: 756px;
}

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

#left_col,
#right_col {
	width: 373px;
	float: left;
	margin-right: 10px;
}
#right_col {
	margin-right: 0px;
}

/* HEADER
-------------------------------------------------------------------- */

#header {
	position: relative;
	height: 49px;
	background: #333;
	border-top: 7px solid #C00;
}
#header div {
	border-top: 1px solid #FFF;
}
#header div a#logo {
	position: absolute;
	top: 20px;
	left: 0px;
	display: block;
	width: 106px;
	height: 29px;
	background: url(../i/logo.gif) no-repeat 0px 100%;
	text-indent: -5000px;
	text-decoration: none;
}

/* NAVIGATION
-------------------------------------------------------------------- */

ul#nav {
	list-style: none;
	position: absolute;
	right: 0px;
}
ul#nav li {
	float: left;
	display: inline;
	border-left: 1px solid #FFF;
	background: none;
	padding: 0;
}
ul#nav li a {
	width: 125px;
	height: 48px;	
	display: block;
	color: #FFF;
	background: #333;
	font-weight: bold;
	padding: 30px 0 0 15px;
	line-height: 1em;
	text-decoration: none;
	
	/* box model hack */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 110px;
	height: 18px;
}
html>body ul#nav li a {
	width: 110px;
	height: 18px;
}

ul#nav li.active a,
ul#nav li.active a:hover {
	background: #C00;
	border-top: 1px solid #C00;
	position: relative;
	top: -1px;
}

ul#nav li a:hover {
	background: #4D4D4D;
}

/* CONTENT
-------------------------------------------------------------------- */

#content {
	width: 493px;
	float: left;
	margin: 20px 0;
	padding-left: 10px;
	
	/* box model hack */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 483px;
}
html>body #content {
	width: 483px;
}

/* Blog Styles
-------------------------------------------------------------------- */

#content p.date {
	margin-top: 0;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#content p.date a.comment {
	background: url(../i/comment.gif) no-repeat 0 3px;
	padding-left: 15px;
}
#content p.date a.permalink {
	background: url(../i/file.gif) no-repeat 0px 1px;
	padding-left: 13px;
}
div.comment_wrapper {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	margin-top: -1px;
	margin-left: -10px;
}
div.comment_wrapper.owner {
	background: #F9F9F9;
}
div.comment_wrapper .author {
	width: 126px;
	float: left;
	padding: 10px;
	
	/* box model hack */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 106px;
}
html>body div.comment_wrapper .author {
	width: 106px;
}
div.comment_wrapper .comment {
	margin-left: 126px;
}

/* Homepage
-------------------------------------------------------------------- */

div.blurb {
	color: #777;
	background: #F2F2F2;
	margin: 20px 0 0 -10px;
}
div.blurb h2 {
	color: #333;
	margin: 5px 10px 0 10px;
	padding-top: 5px;
}
div.blurb p {
	margin: 10px 10px 0 10px;
}
div.blurb blockquote {
	background: url(../i/quote_brown.gif) no-repeat 10px 5px;
	padding: 0;
	margin-bottom: 0;
}
div.blurb blockquote p {
	margin: 0 10px 5px 30px;
}
div.blurb blockquote p span.comment_link {
	margin-left: 15px;
}

#stillfresh_links {
	float: right;
	font: 9px/1em verdana, arial, helvetica, sans-serif;
	text-transform: uppercase;
	margin-top: 20px;
}
html>body #stillfresh_links {
	margin-top: 17px;
}
#stillfresh_links a.active {
	color: #333;
	text-decoration: none;
}

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

#sidebar {
	width: 250px;
	margin: 20px 0 0 503px;
}

#sidebar .box {
	margin-top: 20px;
	border-top: 5px solid #333;
	padding: 10px 5px 0 5px;
}

#sidebar .box h2 {
	margin: 0 0 15px 0;
	line-height: 1em;
}

/* Sidebar -> Twitter
-------------------------------------------------------------------- */
#sidebar .box #twitter_div h2 span {
	padding: 3px 33px 3px 0;
	background: url(../i/icon_twitter.gif) no-repeat 100% 0;
}
#sidebar .box #twitter_update_list li {
	background: none;
	margin-bottom: 1em;
}
#sidebar .box #twitter_update_list li span {
	display: block;
}

/* Archives
-------------------------------------------------------------------- */

#left_col h2,
#right_col h2 {
	border-top: 5px solid #333;
	margin: 20px 0 10px 0;
	padding-top: 8px;
}

/* Distractions
-------------------------------------------------------------------- */

dl#distractions {
	margin: 15px 0;
}
dl#distractions dt {
	color: #666;
	background: url(/i/file.gif) no-repeat 0px 1px;
	padding-left: 12px;
}
dl#distractions dd {
	margin: 3px 0 10px 0;
	padding-bottom: 3px;
	border-bottom: 1px solid #eee;
}
dl#distractions dt span {
	font-size: 10px;
}

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

#footer {
	margin-top: 50px;
	color: #777;
	border-top: 1px solid #CCC;
	clear: both;
}
#footer p {
	margin: 10px;
	line-height: 1em;
}
#footer a {
	color: #777;
}

/* Tables
-------------------------------------------------------------------- */

table.still_fresh {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}
table.still_fresh td {
	border-bottom: 1px solid #CCC;
	line-height: 20px;
	vertical-align: top;
}
table.still_fresh td a {
	color: #333;
}
table.still_fresh td.comments {
	width: 126px;
	color: #777;
	text-align: right;
	vertical-align: bottom;
}
table.still_fresh td.comments a {
	color: #777;
}
table.still_fresh td.date {
	width: 115px;
	color: #777;
	text-align: right;
	vertical-align: bottom;
}

table.double {
	width: 100%;
	border-collapse: collapse;
}
table.double td {
	border-bottom: 1px solid #CCC;
	line-height: 16px;
	vertical-align: top;
}
table.double td a {
	color: #333;
}
table.double td ul {
	margin-top: 5px;
}
table.double td ul li a {
	color: #C00;
}
table.double td img {
	margin: 2px 5px 2px 0;
	vertical-align: middle;
}
table.double td.right {
	padding-left: 10px;
	text-align: right;
	vertical-align: bottom;
	white-space: nowrap;
}
table tr td.inner {
	border: 0;
}
table tr td.inner table {
	margin:0 0 20px 0;
	border: 0;
}
table.double tr.open td {
	border: 0;
}
table#archives.double tr.open td.right {
	visibility: hidden;
}
table.double tr.closed {
	display: none;
}

/* Code
-------------------------------------------------------------------- */
code {
	color: #333;
	background: #f5f5f5;
	font-family: "Courier New", Courier, monospace;
}
ol.rCode {
	background: #fff;
	font-family: "Courier New", Courier, monospace;
	margin: 0;
	padding: 5px 5px 5px 45px;
	border: 1px solid #ccc;
	overflow: auto;
	width: 430px;
	height: expression(this.scrollHeight > 400 ? "400px" : "auto" ); /* sets max-height for IE */
	max-height: 400px;
}
ol.rCode li {
	color: #333;
	background: #f5f5f5;
	margin: 1px 0 0 0;
}
ol.rCode li code {
	padding: 0 5px;
}

/* Forms
-------------------------------------------------------------------- */

form dl {
	margin: 0;
	padding-top: 5px;
	border-top: 1px solid #CCC;
}
form dl dt {
	float: left;
	clear: left;
	width: 126px;
	padding: 3px 10px 3px 0;
	text-transform: uppercase;
	
	/* box model hack */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 116px;
}
html>body form dl dt {
	width: 116px;
}
form dl dd {
	margin-left: 126px;
	padding: 3px 0;
}
form p.buttons {
	margin-left: 126px;
}
form p.buttons input {
	margin-right: 10px;
}
form p.disclaimer {
	color: #777;
	margin-top: -10px;
	margin-left: 126px;
}

form .fbox {
	color: #666;
	font-size: 10px;
	border-top: 1px solid #818181;
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	border-left: 1px solid #818181;
	padding: 2px;
}
form textarea.fbox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
form label.opts {
	font-size: 10px;
	color: #777;
	margin-left: 10px;
}
form label.opts input {
	margin-right: 5px;
}
form .btn {
	position: relative;
	top: 4px;
	margin-left: 5px;
}

/* login error */
.error {
	border: 1px solid #c5c5c5;
	background: #ffc;
	padding: 0 10px;
	margin: 10px 0 25px 0;
}
.error p.icon {
	background: url(/i/error.gif) no-repeat 0 0;
	padding-left: 25px;
}
form dl dt label.form_error {
	color: #d1392c;
}
form dl dd .form_error {
	background: #ffc;
	border-top: 1px solid #d1392c;
	border-right: 1px solid #f1b3b3;
	border-bottom: 1px solid #f1b3b3;
	border-left: 1px solid #d1392c;
}

/* SIFR
-------------------------------------------------------------------- */

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}
.sIFR-replaced {
	visibility: visible !important;
}
span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
	letter-spacing: 0;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics 
   match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into 
   are usually fixed by tweaking these decoy styles */

/*.sIFR-hasFlash h1 {
	visibility: hidden;
}*/

/* CLEARFIX (http://www.positioniseverything.net/easyclearing.html)
-------------------------------------------------------------------- */

.clear {
	height: 0px;
	clear: both;
	font-size: 1px;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
	display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

/* ROUNDED CORNERS (http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html)
--------------------------------------------------------------------*/
.rtop,.artop{display:block}
.rtop *,.artop *{display:block;height:1px;overflow:hidden;font-size:1px}
.artop *{border-style: solid;border-width:0 1px}
.r1,.rl1,.re1,.rel1{margin-left:5px}
.r1,.rr1,.re1,.rer1{margin-right:5px}
.r2,.rl2,.re2,.rel2,.ra1,.ral1{margin-left:3px}
.r2,.rr2,.re2,.rer2,.ra1,.rar1{margin-right:3px}
.r3,.rl3,.re3,.rel3,.ra2,.ral2,.rs1,.rsl1,.res1,.resl1{margin-left:2px}
.r3,.rr3,.re3,.rer3,.ra2,.rar2,.rs1,.rsr1,.res1,.resr1{margin-right:2px}
.r4,.rl4,.rs2,.rsl2,.re4,.rel4,.ra3,.ral3,.ras1,.rasl1,.res2,.resl2{margin-left:1px}
.r4,.rr4,.rs2,.rsr2,.re4,.rer4,.ra3,.rar3,.ras1,.rasr1,.res2,.resr2{margin-right:1px}
.rx1,.rxl1{border-left-width:5px}
.rx1,.rxr1{border-right-width:5px}
.rx2,.rxl2{border-left-width:3px}
.rx2,.rxr2{border-right-width:3px}
.re2,.rel2,.ra1,.ral1,.rx3,.rxl3,.rxs1,.rxsl1{border-left-width:2px}
.re2,.rer2,.ra1,.rar1,.rx3,.rxr3,.rxs1,.rxsr1{border-right-width:2px}
.rxl1,.rxl2,.rxl3,.rxl4,.rxsl1,.rxsl2,.ral1,.ral2,.ral3,.ral4,.rasl1,.rasl2{border-right-width:0}
.rxr1,.rxr2,.rxr3,.rxr4,.rxsr1,.rxsr2,.rar1,.rar2,.rar3,.rar4,.rasr1,.rasr2{border-left-width:0}
.r4,.rl4,.rr4,.re4,.rel4,.rer4,.ra4,.rar4,.ral4,.rx4,.rxl4,.rxr4{height:2px}
.rer1,.rel1,.re1,.res1,.resl1,.resr1{border-width:1px 0 0;height:0px !important;height /**/:1px}