/*Jeff Brown
5/12/08
TEACHMETHEWEB.ORG
SCREEN CSS
*/

/*COLOR SCHEME
grey: 		#262626;
off white: 	#EAEAEA;
dark red: 	#4B0707;
red: 		#AB0D0C;
green: 		#6AC92F;
blue:		#6BADE2;
*/	

/* import stylesheets and hide from ie/mac \*/
@import url("/support/css/thickbox/thickbox.css");
/* end import/hide */

body{background:#262626; font:small/1.6em Helvetica; color:#EAEAEA; }

/*GENERAL RULES FOR THE GOOD OF THE ORDER*/
h1,h2,h3,h4,h5,h6{font:140% bold "Lucida Bright", "Times New Roman", Times, serif; text-align:left;}
.right,.jsright{float:right;}
.left,.jsleft{float:left;}
.clear{clear:both;}
.paddedbyten{padding:10px;}
.txtright{text-align:right;}
.txtleft{text-align:left;}
.txtcenter{text-align:center;}
.wrapper{width:766px; margin:0 auto;}
.superWrapper{width:1046px; margin:0 auto;}
a{color:#6bade2; text-decoration:underline;}
a:hover,a.pdf:hover,a.word:hover,a.excel:hover,a.ppt:hover,a.pic:hover,a.cpp:hover,a.flash:hover,a.zip:hover{color:#FFF; text-decoration:none;}
a.pdf{/*color:#d91717;*/ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/page_white_acrobat.png) left center no-repeat;}
a.word{/*color:#5465c6;*/ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/page_white_word.png) left center no-repeat;}
a.excel{/*color:#326023;*/ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/page_white_excel.png) left center no-repeat;}
a.ppt{/*color:#ec674b;*/ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/page_white_powerpoint.png) left center no-repeat;}
a.pic{ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/picture.png) left center no-repeat;}
a.cpp{/*color:#4875c1;*/ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/page_white_cplusplus.png) left center no-repeat;}
a.flash{/*color:#f23b40;*/ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/page_white_flash.png) left center no-repeat;}
a.zip{/*color:#f23b40;*/ padding-left:20px; background:url(http://teachmetheweb.org//support/gr/content/icons/page_white_compressed.png) left center no-repeat;}

/*hover effects*/
#content a.hover{color:#000; background:#FFF;}
#footer a.hover{color:#FFF; text-decoration:none;}

strong{font-weight:bold; color:#EAEAEA;}
em{font-style:italic;}
html{min-height: 100%; background:#000; margin-bottom: 1px;}

/* PAGE */
#page{margin:0 auto;}

/* ACCESSIBILITY */
#accessibility{position:absolute; right:0; top:0; text-align:right; margin:5px 2px 2px 2px;}
#accessibility ul{ font-size:75%;}
#accessibility li{display:inline; margin:0 0 0 10px;}
#accessibility li a{color:#666;}
#accessibility li a.highcontrast{display:none;border:1px solid #FFF; background:#000; color:#FFF; padding:2px; text-transform:uppercase; text-decoration:none;}
#accessibility li a.highcontrast:hover{background:#FFF; color:#000; border:1px solid #000; }
a[name="content"]{display:none;}

/* HEADER */
#header{background:#262626; /*border-top:1px solid #494949;*/ border-bottom:1px solid #070202; min-height:70px; _height:70px; text-align:left;}
#header .wrapper{background:url(http://teachmetheweb.org//support/gr/header/logo-bg.gif) left top repeat-y;}
#header a img{border:0; /*width:262px; height:50px;*/ vertical-align:middle;}
#header h1,#header h2{display:none;}
#header p{color:#666; line-height:70px; _margin-top:20px;}
#header p span{margin-bottom:0; margin-top:30px; vertical-align:text-bottom;}
#header a.title{color:#FFF; font-size:200%; font-family:"Book Antiqua","Times New Roman", Times, serif; text-decoration:none; vertical-align:middle; padding:0; padding-top:7px; margin:0;}
#header a.title strong{font-size:larger;}
#header a.title:hover, #header a.hover{color:#AB0D0C;}

/* NAVIGATION */
#nav{float:right; min-height:70px; _height:70px;}
#nav ul{list-style:none; margin-top:45px;}
#nav ul li{display:inline; line-height:35px; margin:auto 10px;}
#nav ul li a{color:#AB0D0C; font:120% "Lucida Bright", "Times New Roman", Times, serif; font-weight:bold; text-decoration:none;}
#nav ul li a:hover, #nav ul li a.current,#nav ul li a.hover{color:#FFF;}
#nav li.courses{position:relative;}
#nav li.courses ul{display:none; position:absolute; left:-1px; top:-29px; z-index:5; background:#262626 /*url(http://teachmetheweb.org//support/gr/nav/sub-bg.png)*/;}
#nav li.courses:hover ul{display:block; min-width:150px;}
#nav li.courses li{display:block; font-size:80%; line-height:10px; margin:0; padding:3px; border-bottom:1px solid #666;}
#nav li.courses li a{color:#CCC; min-width:150px;}
#nav li.courses li a:hover{color:#FFF;}

/* FEATURE */
#feature{color:#EAEAEA; background:#4B0707 url(http://teachmetheweb.org//support/gr/feature/bg-pattern.gif) top left repeat; border-top:2px solid #a52e2e; border-bottom:2px solid #a52e2e; text-align:center; min-height:20px; _height:20px;}
#feature-inner{background:url(http://teachmetheweb.org//support/gr/feature/bg-gradient2-trans.png) top center no-repeat; width:1000px;padding-bottom:10px; margin:0 auto;}
#feature .wrapper{padding-top:10px; padding-bottom:10px;}
#feature a.next{z-index:5; display:none; padding:5px; color:#FFF; background:#000; border:1px solid #4A4A4A; font-weight:bold; text-decoration:none;}
#feature a.next:hover{color:#000; background:#FFF; border:1px solid #000;}
#feature h3{font-size:300%; margin-right:100px; line-height:45px;font-family:Georgia, "Times New Roman", Times, serif; margin-bottom:15px;}
#feature h3 a{text-decoration:none;color:#EAEAEA}
#feature h3 a:hover,#feature h3 a.hover{text-decoration:underline;}
#feature a{color:#EAEAEA; text-decoration:underline;}
#feature a:hover{text-decoration:none;}

#feature span.firstletter{font-family:"Times New Roman", Times, serif; font-size:250%; font-weight:bold; font-style:italic;}
#feature p{margin:10px auto; font-size:110%;}
#feature p.meta{text-transform:uppercase; color:#EAEAEA; font-size:70%;}
#feature p.readmore{text-transform:uppercase; color:#EAEAEA; font-size:70%; text-align:right;}
#toggle{_height:1%; position:relative; display:none;}
#toggleFeature{position:absolute; top:-2px; left:5px; _top:-3px; background:none; _height:63px; _width:183px;}
#toggleFeature.hover{background:none;}
#toggleFeature img.show, #toggleFeature img.hide{display:none;}
#toggleFeature img{padding:0; margin:-13px 0 -12px; background:none; border:none; height:63px; width:183px;  z-index:10;}

/* CONTENT */
#content{text-align:justify; /*background:url(http://teachmetheweb.org//support/gr/content/bg-content.gif) 20% 80% no-repeat;*/}
#content a[rel="external"]{padding-right:12px; background:url(http://teachmetheweb.org//support/gr/content/external.gif) right center no-repeat;}
#content p{text-align:justify; margin:2px auto; padding-top:3px;padding-bottom:3px;}
#content p.date{font-style:italic; color:#666;}
#content p.more{font-style:italic; text-align:right;}
#content p.more a{color:#666;}
#main_content img.pic{background:#1d1d1d; padding:5px; border:1px solid #383838; margin:20px; display:inline;}
#feature img.pic{background:#EAEAEA; padding:5px; border:1px solid #FFF; margin:20px; display:inline;}
#content ul,#content ol{margin:10px 5px;}
#content ol ol li{list-style-type:upper-alpha;}
#content ol ol ol li{list-style-type:lower-roman;}
#content ul li{display:block; list-style-type:none; line-height:25px; background:url(http://teachmetheweb.org//support/gr/content/bullet.gif) left 8px no-repeat; padding-left:15px;}
#content ul ul{}
#content ul ul li{background:none; list-style-type:disc;}
#content ul li:hover{line-height:25px; }
#content ul li a{}
#content ul li a:hover{}
#content ul li a.hover{background-color:#FFF;}
#content ul li a.assm{font-size:110%; line-height:30px; _line-height:22px; padding-left:30px; padding-top:3px; padding-bottom:3px; background:url(http://teachmetheweb.org//support/gr/content/icons-trans.png) left center no-repeat; }
#content ul li a.lec{font-size:110%; line-height:30px; _line-height:22px; padding-left:30px; padding-top:3px; padding-bottom:3px; background:url(http://teachmetheweb.org//support/gr/content/star-trans.png) left center no-repeat;}
#content ul li a.res{font-size:110%; line-height:30px; _line-height:22px; padding-left:30px; padding-top:3px; padding-bottom:3px; background:url(http://teachmetheweb.org//support/gr/content/sitemap-trans.png) left center no-repeat;}
#content ul li a.docs{font-size:110%; line-height:30px; _line-height:22px; padding-left:30px; padding-top:3px; padding-bottom:3px; background:url(http://teachmetheweb.org//support/gr/content/info-trans.png) left center no-repeat;}
#content a.rss{background:url(http://teachmetheweb.org//support/gr/content/icons/rss.png) left center no-repeat; padding-left:15px;}
#content a.rssl{background:url(http://teachmetheweb.org//support/gr/content/icons/feed-icon-28x28.png) left center no-repeat; padding-left:32px;}
#content a.itunes{background:url(http://teachmetheweb.org//support/gr/content/icons/podcast-icon-28x28.png) left center no-repeat; padding-left:32px;}
#content ol{margin-left:25px;}
#content ol li{list-style-type:decimal; line-height:25px;}
#content table{width:90%; margin:20px; border-bottom:2px solid #1d1d1d;}
#content table thead th{font:130% "Lucida Bright", "Times New Roman", Times, serif; font-weight:bold;color:#6bade2; border-bottom:2px solid #1d1d1d; padding:5px;}
#content table tbody tr.even{background:#1d1d1d;}
#content table tbody tr.odd{background:#262626;}
#content table tbody td{padding:5px;}
#content ins{color:#FFF;}
#main_content{background:url(http://teachmetheweb.org//support/gr/content/bg.gif) top left repeat-x; /*background:url(../gr/content/bg-trans.png) top left repeat-x;*/ border-top:1px solid #000; border-bottom:1px solid #464646; padding-top:15px; padding-bottom:20px;}
#main_content .wrapper{border-right:1px solid #474646; border-left:1px solid #474646;}
#main_content p{color:#999;}
#floral{width:1046px; margin:0 auto; background:url(http://teachmetheweb.org//support/gr/content/floral.png) right 35px no-repeat;}
#searchField{width:100%; text-align:right; padding-bottom:20px;}
#searchField label{display:none;}
#searchField input{width:180px; background:url(http://teachmetheweb.org//support/gr/content/magnify-trans.png) left center no-repeat; border-left:0; border-right:0; border-top:0; border-bottom:1px solid #EAEAEA; font-size:110%; color:#FFF; padding:2px 2px 2px 20px; margin-right:5px;}
#searchField button{border:1px solid #666; color:#EAEAEA; background:#000; padding:1px; text-transform:capitalize; cursor:pointer; margin-right:5px;}
#main_content h1, #main_content h2, #main_content h3{font-size:200%;margin:25px auto 15px; line-height:30px;}
#main_content h4, #main_content h5, #main_content h6{margin:35px auto 15px;}
#main_content h4{margin-top:10px;color:#EAEAEA; font-size:150%; letter-spacing:2px;}
#main_content h5{margin-top:10px;color:#6ac92f; font-size:130%; letter-spacing:4px; }
#main_content h6{margin-top:10px;color:#AB0D0C; font-size:110%; letter-spacing:6px; }

#main_content p.download{
    margin:20px auto;
}
#main_content p.download a{
	background:#6BADE2;
	line-height:30px;
    color:#282828;
    font-family:arial; 
    text-decoration:none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:10px;
    font-weight:bold;
}
#main_content p.download a:hover{
	text-decoration:none;
	color:#FFF;
}

#left-col h3{color:#AB0D0C;}
#right-col h3{color:#6bade2;}
#middle-col h3{color:#6ac92f;}
#main_content h3.resources{margin-top:30px;}
#middle-col ul li a, #left-col ul li a, #right-col ul li a{color:#EAEAEA;}
#article1,#article2,#article3,#article4{color:#EAEAEA;/*margin-right:100px;*/}
#article2,#article3,#article4{display:none;}
#tab-nav{margin-bottom:10px;}
#tab-nav ul{border-bottom:1px solid #CCC; padding:0; margin:0;}
#tab-nav ul li{display:inline; background:none;}
#tab-nav ul li a{color:#666; background:none; text-decoration:none;}
#tab-nav ul li a.current{color:#FFF;}
#tab-nav ul li a:hover{color:#FFF;}
#assm,#docs,#resources{display:none;}
div.even{background:#181818;}

/* CONTENT PAGES ONLY */
#page_content{width:66%; float:left;}
/*interviews*/
#interview h1,#interview h2,#interview h3,#interview h4,#interview h5,#interview h6{text-align:left;}
#interview h4{font-size:105%; font-weight:bold; font-family:arial; color:#6BADE2;} 
#interview blockquote{text-align:left;}
#interview blockquote p{
	background:none;
	color:#EAEAEA;
	font-size:110%;
	padding-top:5px;
	padding-left:0px;
}

#interview hr{border:0; background:#666; height:1px; margin:8px auto; clear:both;}

/*blog*/
#bydate div.article{margin:7px auto;}
#bydate div.even{background:#181818;}
#bydate div.article h3{font-size:120%; display:inline;}
#bydate span.meta{color:#666;}
/*search-results*/
#cse-search-results{max-width:490px; _width:490px; background:none; color:#EAEAEA;}
#cse-search-results *{max-width:490px; _width:490px;}
/*comments*/
div.comments{clear:both; padding-top:10px; padding-bottom:10px; background:#1c1c1c;}
div.comments-alt{clear:both; padding-top:10px; padding-bottom:10px; }
div.author{width:110px; float:left; text-align:right; padding-right:10px;}
div.author p.name{color:#FFF; font-size:120%; font-weight:bold;}
div.author p.name a{text-align:right; text-decoration:none;}
div.author p.meta{font-style:italic;}
div.quote{width:330px; padding:10px; float:right;}
div.entry{clear:both;}

/* PODCAST */
div.podcast #bydate div.article{
	margin:50px auto !important;
}

div.podcast #bydate div.article1 h1, div.podcast #bydate div.article h2{
	margin-top:0;
    padding-top:0;
    padding-bottom:0;
    margin-bottom:0;
}

div.podcast #bydate div.article1 h1 a, div.podcast #bydate div.article h2 a{
	text-decoration:none;
}

div.podcast #bydate div.article1 h2, div.podcast #bydate div.article h3{
	font-size:16px;
	margin-top:5px;
    padding-top:0;
}

div.episode{
	float:left;
	background:#FFF;
	color:#282828;
    text-align:center;
    font-weight:bold;
    padding:5px;
    margin:0 10px 10px 0px;
}
div.episode strong{
	display:block;
    font-size:40px;
	color:#282828;
    line-height:40px;
}

#sidebar ul.subscribe li{
	background:none;
}

#sidebar ul.subscribe li a{
    padding-top:10px;
    padding-bottom:10px;
    line-height:40px;
}


/* ERROR PAGES */
#errorPage h3{color:#FFF; font-size:175%; margin:0 auto; padding:0;}
#errorPage h4{color:#AB0D0C; font-size:1000%; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; margin:0 auto; padding:0;}
#errorPage p{color:#FFF; font-size:250%; text-align:center; background:url(http://teachmetheweb.org//support/gr/error/quote-left.gif) left center no-repeat; padding:30px 0 30px 45px; line-height:50px; margin:0 20px;}
#errorPage span{background:url(http://teachmetheweb.org//support/gr/error/quote-right.gif) right center no-repeat; display:block; padding-right:45px;}


/* SIDEBAR */
#sidebar{width:32%; float:right; border-left:1px dashed #474646;}
#sidebar ul.sideNav{margin-top:0; padding-top:0;}
#sidebar ul.sideNav li{font-size:120%; background:url(http://teachmetheweb.org//support/gr/sidebar/subnav.gif) left 7px no-repeat; padding-left:25px;}
#sidebar ul.sideNav li a{text-decoration:none;}
#sidebar ul.sideNav li a:hover{text-decoration:underline;}
#sidebar p{color:#999; line-height:15px;}
#sidebar p a{}
#sidebar span.rss{background:#6BADE2; }
#sidebar span.rss a{color:#262626; text-transform:uppercase; text-decoration:none; font-weight:bold;padding:8px; line-height:30px;}
#sidebar span.rss a:hover{color:#EAEAEA;}
#sidebar h3, #sidebar h4, #sidebar h5{color:#6ac92f;}
#sidebar h6{color:#6ac92f; font-size:95%; letter-spacing:1px;}
#sidebar a{color:#6bade2; text-decoration:underline;}
#sidebar a:hover{text-decoration:none;}
/*#sidebar a[rel~="met"]:after{content:" *";}*/
#sidebar a[rel~="met"],#sidebar a.friend-met, #sidebar a[rel~="met"]:hover,#sidebar a.friend-met:hover{background:url(http://teachmetheweb.org//support/gr/microformats/xfn-friend-met.png) right center no-repeat; padding-right:25px;}
#sidebar a[rel~="colleague"],#sidebar a.colleague,#sidebar a[rel~="colleague"]:hover,#sidebar a.colleague:hover{background:url(http://teachmetheweb.org//support/gr/microformats/xfn-colleague.png) right center no-repeat; padding-right:25px;}
#sidebar ul{margin:10px 5px;}
#sidebar ul li{background:url(http://teachmetheweb.org//support/gr/content/bullet.gif) left center no-repeat;}
#sidebar ul li a{}
#sidebar ul li a:hover{}

#sidebar div.banners{margin-top:30px;}
#sidebar div.banners li{background:none; margin:0; padding:0 0 0 3px;}
#sidebar div.banners a{margin:0; padding:0;}
#sidebar div.banners a img{margin:0 auto;}
#sidebar div.banners a:hover img{background:#6BADE2; border:1px solid #6BADE2;}

/*#sidebar div.frame a{background:url(http://teachmetheweb.org//support/gr/links/frame-trans.png) center center no-repeat; width:230px; height:150px; display: block; position: absolute; z-index: 10;} 
#sidebar div.frame a:hover{background:url(http://teachmetheweb.org//support/gr/links/frame-on-trans.png) center center no-repeat; width:230px; height:150px; display: block; position: absolute; z-index: 10;}
#sidebar div.frame img{margin:21px 21px 21px 36px; _margin-left:21px; padding:0px; border:1px solid #0d0d0d; background:none;}*/
#hosting{text-align:center; margin:5px auto 0;}
#hosting p{margin:1px auto; padding:0; text-align:center;}
#hosting a{margin:0; padding:0;}
#hosting a img{margin:0 auto; padding:0;}
#hosting a:hover img{background:#6BADE2; border:1px solid #6BADE2;}
#left-col{width:33%; float:left; background:url(http://teachmetheweb.org//support/gr/content/columns_separator.gif) right top repeat-y;}
#right-col{width:33%; float:right;background:url(http://teachmetheweb.org//support/gr/content/columns_separator.gif) left top repeat-y;}
#middle-col{margin-left:33%; margin-right:33%;}

/* FOOTER */
#footer{background:#000 url(http://teachmetheweb.org//support/gr/footer/tmtw.gif) left center no-repeat;; padding-top:10px; padding-bottom:50px; border-top:1px solid #292929;}
#footer a[rel="external"]{padding-right:12px; background:url(http://teachmetheweb.org//support/gr/content/external.gif) right center no-repeat;}
#footer a>img{background:none; padding:0;}
#left-col-footer{width:33%; float:left; color:#AB0D0C;}
#right-col-footer{width:33%; float:right; color:#6bade2;}
#middle-col-footer{margin-left:33%; margin-right:33%;color:#6ac92f;}
#left-col-footer a{color:#AB0D0C;}
#right-col-footer a{color:#6bade2;}
#middle-col-footer a{color:#6ac92f;}
#footer p{text-align:justify; font-size:88%; line-height:16px;}

#main_content blockquote.style{
	background:#AB0D0C url(/support/gr/feature/bg-pattern.gif);
	padding:2px 20px 20px 2px;
	margin:10px;
	border:10px solid #4B0707;
	width:50%;
}
#main_content blockquote.style p{
	background:url(/support/gr/content/blockquote-trans.png) top left no-repeat;
	color:#EAEAEA;
	font-size:140%;
	padding-top:22px;
	padding-left:22px;
	line-height:25px;
}


div.vevent{
	display:block;
    margin-bottom:20px;
}

div.vevent abbr{
	font-weight:bold;
}
div.vevent span.summary{
	display:block;
}

div.vevent span.virtual{
    padding-left:22px;
    background:url(/support/gr/skype_logo.png) no-repeat left center;
}

div.vevent span.summary strong{
	font-weight:normal;
    color:#6BADE2;
}

/*GENERAL*/
#hcard-Jeff-Brown{position:absolute; left:-9999px;}
#main_content p.meta{color:#666; text-align:right;}
.error, .notice, .success, .highlight{padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
.small {font-size:85%;margin-bottom:1.875em}
.large {font-size:116%;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0; border:0;}