/*
	Whatstyle Screen Styles

	Table of Contents:
		#001	main layout
		#002	header
		#003	navigation
		#004	footer
		#005	résumé
		#006	forms
		#007	accessibility page
		#008	preferences column
		#009	articles
		#010	comments
		#011	comments validation dialog
		#012	article navigation
		#013	search results
		#014	firefox ad
		#015	statistics
*/

/* main layout								#001
------------------------------------------------ */

* {
						font-family: Verdana, Arial, Helvetica, sans-serif;
						}

body {
						margin: 0 0 40px 0;
						padding: 0;
						font-size: small;
						text-align: center;
						color: #777;
						background-color: #fff;
						}

div {
						text-align: left;
						}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
						color: #8a1;
						font-family: "Georgia","Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
						}
						
h3,
h4,
h5,
h6 {
						color: #8a1;
						}

#main {
						width: 90%;
						margin: 0 auto;
						position: relative;
						}
						
#main:after {
						clear: both;
						height: 0;
						display: block;
						content: ".";
						visibility: hidden;
						}
						
html > body #main {
						height: auto;
						}
						
a:link,
a:visited,
a:hover,
a:active,
a:focus {
						text-decoration: underline;
						color: #8a1;
						}

a:visited {
						color: #aa1;
						text-decoration: none;
						}

a:hover,
a:focus {
						background-color: #c7e337;
						color: #555;
						}
						
a:active {
						background-color: #ffa;
						}

#content {
						position: relative;
						width: 70%;
						float: left;
						}

.comingSoon,
.disclaimer {
						border: 1px solid black;
						font-style: italic;
						padding: 5px;
						}
						
.disclaimer {
						border-color: #c30;
						color: #c30;
						}
						
img {
						padding: 15px;
						border: 1px solid #ccc;
						background-color: #fff;
						margin: 0;
						display: inline;
						}
						
#myPic {
						margin-right: 15px;
						margin-bottom: 15px;
						float: left;
						}
						
acronym,
abbr {
						cursor: help;
						}
						
strong,
em {
						background-color: #ffa;
						}
						
h2 strong {
						background-color: #fff;
						color: #c33;
						font-weight: normal;
						}
						
q, blockquote {
						font-style: italic;
						}
						
blockquote {
						margin: 0;
						padding: 6px 5px 5px 50px;
						background-image: url(../images/quote.gif);
						background-position: top left;
						background-repeat: no-repeat;
						display: block;
						min-height: 50px;
						height: auto;
						}
						
blockquote p {
						padding: 3px;
						margin: 0;
						}

/* header									#002
------------------------------------------------ */

a#top:link,
a#top:visited,
a#top:hover,
a#top:active {
						width: 100%;
						background-color: black;
						color: white;
						font-size: 80%;
						display: block;
						padding: .3% 0;
						text-align: center;
						text-decoration: none;
						text-transform: lowercase;
						}
						
a#top:hover {
						background-color: #555;
						}
						
#header {
						height: 189px;
						background: #eee url(../images/header_bg.jpg) top left repeat-x;
						position: relative;
						}

#header h1,
#header h2 {
						color: black;
						font-size: 160%;
						font-weight: normal;
						position: absolute;
						top: 40%;
						left: 10%;
						font-variant: small-caps;
						letter-spacing: 4px;
						margin: 0;
						}
						
#header h2 {
						color: #a8a8a6;
						top: 55%;
						font-size: 120%;
						}
						
#thwirly {
						background: transparent url(../images/thwirls.png) 50% -100px no-repeat;
						width: 100%;
						height: 189px;
						z-index: 4;
						}
						
a#rss_icon:link,
a#rss_icon:visited,
a#rss_icon:hover,
a#rss_icon:active {
						position: absolute;
						right: 5px;
						background-color: transparent;
						}
						
#rss_icon img {
						padding: 0;
						border: 0;
						background-color: transparent;
						margin: 0;
						}
						
/* navigation								#003
------------------------------------------------ */

#navigation {
						width: 100%;
						background: #c7e337 url(../images/corner_right.gif) bottom right no-repeat;
						}
						
#navigation ul {
						margin: 0;
						padding: 0;
						height: 100%;
						}
						
#navigation ul:after {
						content: ".";
						display: block;
						height: 0;
						clear: both;
						visibility: hidden;
						}
						
#navigation ul li {
						display: block;
						list-style: none;
						float: left;
						margin: 0;
						height: 30%;
						width: 12.5%;
						position: relative;
						border-right: 1px solid #ebffc7;
						}
						
#navigation ul li a:link,
#navigation ul li a:visited,
#navigation ul li a:hover,
#navigation ul li a:active {
						display: block;
						width: 100%;
						background-color: #c7e337;
						text-align: center;
						color: #fff;
						text-decoration: none;
						line-height: 35px;
						}
						
#navigation ul li a:hover,
#navigation ul li a:focus,
#navigation ul li a:link.current,
#navigation ul li a:visited.current,
#navigation ul li a:active.current {
						background-color: #b8d231;
						}

#navigation ul li a#firstLink {
						background: #c7e337 url(../images/corner_left.gif) bottom left no-repeat;
						}

#navigation ul li a#firstLink:hover,
#navigation ul li a#firstLink:focus,
#navigation ul li a#firstLink.current {
						background: #b8d231 url(../images/corner_left_curr.gif) bottom left no-repeat;
						}

/* footer									#004
------------------------------------------------ */

#footer {
						position: relative;
						margin-top: -3em;
						height: 3em;
						width: 100%;
						overflow: hidden;
						clear: both;
						}
						
#footer ul {
						margin: 0;
						padding: 0;
						text-align: center;
						}
						
#footer ul li {
						display: inline;
						}
						
#footer ul li a:link,
#footer ul li a:visited,
#footer ul li a:hover,
#footer ul li a:active {
						color: black;
						text-decoration: underline;
						font-weight: bold;
						}
						
#footer ul li a:hover {
						text-decoration: none;
						}
						
/* résumé									#005
------------------------------------------------ */
						
.date {
						font-weight: bold;
						}

dt {
						font-weight: bold;
						}

dd {
						margin-bottom: 1em;
						}
						
/* forms									#006
------------------------------------------------ */

input,
textarea {
						font-family: Geneva, Arial, Helvetica, sans-serif;
						font-size: 1em;
						display: block;
						margin: 5px 0;
						}

legend {
						margin: 5px;
						}

input[type=checkbox] {
						display: inline;
						margin: 5px 5px;
						}

label[for=SFremember_cbx] {
						font-size: .9em;
						cursor: help;
						}
							
fieldset {
						padding: 5px;
						}
							
#submitBtn,
#SFsendMail_submitBtn {
						width: 100px;
						}
							
input[type=text],
input[type=password],
textarea {
						border: 1px solid #777;
						width: 300px;
						padding: 3px;
						}							

input[type=text]:focus,
input[type=text]:hover,
input[type=password]:focus,
input[type=password]:hover,
textarea:focus,
textarea:hover {
						border: 1px solid #c33;
						color: #c33;
						background-color: #ffe;
						}
							
textarea {
						height: 100px;
						width: 300px;
						/* getting rid of the standard scrollbar in IE */
						overflow: auto;
						}

legend {
						color: #777;
						}
							
.error {
						color: #f60;
						display: block;
						font-size: .8em;
						}							
							
#ta_enlarger,
#ta_shrinker {
						display: none;
						color: #c33;
						margin: 2px 0;
						text-decoration: underline;
						cursor: pointer;
						width: 135px;
						font-size: .8em;
						}

#ta_enlarger:hover,
#ta_shrinker:hover {
						color: #c96;
						}
						
p.form-note {
						font-size: .85em;
						color: #000;
						margin:0;
						}
						
p.spam-warning {
						padding: 5px;
						border: 1px solid #c30;
						color: #c30;
						background-color: #fee;
						}
						
							
/* accessibility page						#007
------------------------------------------------ */

#accesskeys {
						margin-left: 15px;
						margin-top: 10px;
						}

#accesskeys dt {
						color: #c33;
						float: left;
						width: 2%;
						border: 1px solid #c33;
						text-align: center;
						}
							
#accesskeys dd:after {
						content: ".";
						display: block;
						height: 0;
						clear: both;
						visibility: hidden;
						}
						
/* preferences column						#008
------------------------------------------------ */

#preferences {
						width: 20%;
						background: #ff9 url(../images/pref_bg.jpg) top left repeat-x;
						position: relative;
						float: right;
						margin-top: 20px;
						padding: 57px 5px 5px 15px;
						min-height: 300px;
						height: 300px;
						color: black;
						}
						
div > #preferences {
						height: auto;
						}
						
#preferences:after {
						content: ".";
						display: block;
						height: 0;
						clear: both;
						visibility: hidden;
						}
						
#preferences h2#preferencesHeader {
						color: black;
						margin-top: 0;
						font-size: 110%;
						background: url(../images/pref_corner.jpg) top left no-repeat;
						position: absolute;
						top: 0;
						left: 0;
						padding-left: 60px;
						padding-top: 25px;
						height: 32px;
						}
						
#preferences ul {
						padding: 0;
						margin: 0;
						}
						
#preferences ul li {
						list-style: none;
						width: 100%;
						font-weight: bold;
						margin: 3px 0;
						}
						
#preferences ul li ul {
						margin-left: 30px;
						margin-top: 5px;
						margin-bottom: 5px;
						}
						
#preferences ul li ul li {
						font-weight: normal;
						}

#preferences ul li a:link,
#preferences ul li a:visited,
#preferences ul li a:hover,
#preferences ul li a:active {
						color: black;
						}
						
#preferences ul li a:hover {
						text-decoration: none;
						background-color: #ffe830;
						}

#rssInfo h2 {
						color: black;
						font-size: 110%;
						background: transparent url(../images/feed-icon-small.gif) top right no-repeat;
						width: 55px;
						}
	
#rssInfo a:link,
#rssInfo a:visited,
#rssInfo a:hover,
#rssInfo a:active {
						color: black;
						text-decoration: underline;
						}
						
#rssInfo a:hover {
						text-decoration: none;
						background-color: #ffe830;
						}						
						
/* articles									#009
------------------------------------------------ */

#writeItYourself {
						border: 1px solid #f60;
						padding: 0 5px 5px 5px;
						}
						
#writeItYourself h3 {
						color: #960;
						}

.articleSummary {
						border-top: 1px solid #8a1;
						margin-bottom: 1em;
						padding-top: 1em;
						}
						
.articleSummary h3,
.articleSummary h4 {
						margin: 0;
						}
						
.articleSummary p {
						color: #000;
						}
						
.articleSummary h3 a {
						text-decoration: none;
						}

#intro {
						color: #000;
						font-weight: 800;
						}
						
h2#articleTitle {
						margin: 8px 0 0 0;
						}
						
h4#articlePostData {
						margin: 0 0 8px 0;
						padding: 0 0 4px 0;
						border-bottom: 1px solid #8a1;
						}

p#skipToCommentsLink {
						position: absolute;
						top: 18px;
						right: 0;
						display: block;
						}

code,
pre,
code strong,
pre strong,
code em,
pre em {
						font-family: "Courier New", Courier, mono;
						font-size: 1em;
						color: #960;
						}
						
pre {
						padding: 6px;
						border-left: 1px dashed #8a1;
						border-right: 1px dashed #8a1;
						background-position: bottom right;
						background-repeat: no-repeat;
						min-height: 100px;
						height: 100px;
						}

div>pre {
						height: auto;
						}
						
pre.htmlCode {			background-image: url(../images/html.gif); }
pre.cssCode {			background-image: url(../images/css.gif); }
pre.javascriptCode {	background-image: url(../images/js.gif); }
pre.phpCode {			background-image: url(../images/php.gif); }

#post_info {
						margin: 0;
						padding: 3px 0;
						border-top: 1px solid #8a1;
						font-size: .9em;
						background-color: #ffe;
						}
						
#post_info li {
						list-style-type: none;
						}
						
.filed-cats {
						font-weight: bold;
						text-align: center;
						color: black;
						}
						
.filed-cats a {			font-weight: normal; }

/* code example styles (inspired by and based upon code by Dunstan Orchard (http://www.1976design.com/blog/archive/2004/07/29/redesign-tag-transform/) */

ol.code {
						border: 1px solid #ddd;
						margin: 0;
						overflow: auto;
						padding: 5px 5px 5px 45px;
						background-color: #eee;
						}

ol.code li {
						background-color: #fff;
						margin: 0;
						padding: 0 5px;
						min-height: 17px;
						}

ol.code li:hover {		background-color: #ffe; }

ol.code li.source {
						background-color: #fff;
						list-style-type: none;
						padding: 5px;
						text-align: center;
						}

ol.code li+li {
						margin-top: 2px;
						}

ol.code li.tab1 {padding-left: 15px;}
ol.code li.tab2 {padding-left: 30px;}
ol.code li.tab3 {padding-left: 45px;}
ol.code li.tab4 {padding-left: 60px;}
ol.code li.tab5 {padding-left: 75px;}
ol.code li.tab6 {padding-left: 90px;}

ol.code li code,
ol.code li code * {
						color: #333;
						font-family: "Courier New", Courier, mono;
						}

ol.code li.cmnt code,
ol.code li.cmnt code * {
						color: #f60;
						font-weight: normal;
						font-style: italic;
						font-family: "Courier New", Courier, mono;
						}
						
ol.code .statement {color:#06c;font-weight:bold;}
ol.code .string {color:#f00;}

/* comments									#010
------------------------------------------------ */

#comments {
						border-top: 1px solid #8a1;
						border-bottom: 1px solid #8a1;
						position: relative;
						}
						
#comments ol {
						margin: 0 0 7px 0;
						padding: 5px;
						background-color: #f5f5f5;
						border: 1px solid #777;
						}
						
#comments ol li {
						list-style-type: none;
						position: relative;
						padding: 4px;
						border-bottom: 1px solid #ccc;
						background-color: #fff;
						margin-bottom: 7px;
						min-height: 1px;
						}
						
#comments ol li:hover {
						background-color: #ffe;
						border: 1px solid #ccc;
						margin: -1px -1px 7px -1px;
						color: #000;
						}
						
#comments ol li.authorComment {
						background-color: #ebffc7;
						background-image: url(../images/author.gif);
						background-position: right bottom;
						background-repeat: no-repeat;
						min-height: 100px;
						}
						
#comments ol li.authorComment:hover {
						margin: -1px -1px 7px -1px;
						}

#comments ol li dl {
						padding-bottom: 12px;
						}
						
#comments dt a.quote_link:link,
#comments dt a.quote_link:visited,
#comments dt a.quote_link:hover,
#comments dt a.quote_link:active {
						display: block;
						position: absolute;
						top: 3px;
						right: 3px;
						width: 20px;
						height: 20px;
						text-indent: -10000em;
						background: none;
						background-image: url(../images/quote_icon.gif);
						background-position: top left;
						background-repeat: no-repeat;
						overflow: hidden;
						}
						
#comments dd p.quote_information {
						font-size: .7em;
						position: absolute;
						bottom: 0;
						border-top: 1px solid #777;
						}

/* comments validation dialog				#011
------------------------------------------------ */

#dropSheet {
					background-color/**/: #000;
					background-image: url(dots.gif);
					background-image/**/: none;
					opacity: 0.35;
					-moz-opacity: 0.35;
					-khtml-opacity: 0.35;
					filter: alpha(opacity=35);
					z-index: 29;
					}
					
.dialog {
					width: 40em;
					background-color: #ffe;
					border: 2px solid #777;
					margin-top: -300px;
					padding: 15px;
					z-index: 30;
					}
					
.dialog h2 {
					margin: 0 6px;
					color: #f96;
					}
					
.dialog fieldset {
					margin-bottom: 4px;
					}
					
.dialog .submit_btn,
.dialog .back_btn {
					display: inline;
					margin: 0 5px;
					}

/* article navigation						#012
------------------------------------------------ */

#searchBox h2,
#validationInfo h2 {
						color: black;
						font-size: 110%;
						}
						
#searchBox form input#q {
						width: 80%;
						}
						
#searchBox fieldset {
						border: 0;
						}
						
/* search results							#013
------------------------------------------------ */

#resultsList li dl {
						display: inline;
						}

.match {
						color: #f60;
						font-style: italic;
						background-color: #ffc;
						}
						
.match:before,
.match:after {
						content: "\"";
						}
						
/* firefox ad								#014
------------------------------------------------ */

#firefox_ad {
						float:right;
						margin: 10px 0 -10px 0;
						width: 20%;
						text-align: center;
						padding: 0 5px 0 15px; /* for no reason, just so it aligns with the 
												  preferences column :)
												*/
						}
						
#firefox_ad img {
						padding: 0;
						border: 0;
						margin: 0 auto;
						}
						
/* statistics								#015
------------------------------------------------ */

.stats {
						color: black;
						border-collapse: collapse;
						}

.stats caption {
						margin-bottom: 6px;
						font-weight: bold;
						}

.stats td, .stats th {
						border: 1px solid black;
						padding: 6px;
						}
						
.stats th {
						background-color: #c7e337;
						}