/*
Theme Name: cssOrigins.com
Description: the second iteration of the cssOrigins website
Author: Hunter  Brelsford
Author URI: http://www.cssOrigins.com
version: 1.0
Tags: Design, Wordpress, Css
Optimization: Css Optimization done by Hunter  Brelsford 4/23/09
*/




/* basics */

* { margin:0; padding:0; }

body { font-family: verdana, arial, tahoma, sans-serif; font-size: 8pt; }

.home { background:#f4f4f4 url(images/homeBG.jpg) top repeat-x; }
.other { background:#f0f0f0 url(images/otherBG.jpg) top repeat-x; }

h1 { font:normal 72px/72px "century gothic",arial,tahoma,verdana,sans-serif; color: #222; padding-bottom: 15px; line-height: 70px;   } /*72, line 70 */
h2,h3,h4 { font:normal 20px/20px "century gothic",arial,tahoma,verdana,sans-serif; }
h2 { text-transform:capitalize; letter-spacing:-1px; line-height:27px; font:normal 25px/25px "century gothic",arial,tahoma,verdana,sans-serif; }

img { border: none; padding:0; }
	img a {border:none;}
	img.left{ float: left; border: none; padding: 6px 0 0 0; }
	img.right{ float: right; border: none; padding: 0 0 0 6px; }
	
blockquote{ border-left:1px solid #A5ABAB; margin:15px; padding:0 12px 0 12px; }
code{ font-family:"Courier New", Courier, monospace;}

table .heading { background:#E1E0E0; border-bottom:border:1px solid #ccc; padding-left:10px; }

/* links */

a { color:#000; text-decoration:none; }
a:hover { text-decoration: underline; }


/* container */

#container { width: 960px; margin: 0 auto; padding:0; }
	
	
/* header */

#headerHome { margin:0px; width: 960px; height: 421px; color: #ffffea; }
	#headerHome h1 { padding-top: 30px; }
	#headerHome h1 a { color: #fff; text-decoration: none; font-weight:normal; font-stretch:extra-expanded; }
	#headerHome h1 a:hover { color:#ffffea;  }
	#headerHome h2 { font:normal 10pt georgia, times; color:#333; padding: 0 0 0 18px; margin:0;	}
	
#headerOther { margin:0px; width: 960px; height: 180px; color: #ffffea; } /* heigth height: 284px; */
	.aColor a{ color:#606060; }
	.aColor a:hover{ color:#fff; text-decoration:none; }
	
#topMenu { width: 960px; height:32px; }
	#topMenu ul { float:right; padding-top:10px; }
	#topMenu ul li{ list-style-type: none; padding: 5px; padding-top:10px; margin-left:5px; display:inline; font:normal 11px/11px Tahoma, Arial, Helvetica, Geneva, sans-serif !important; }
	
#categories { display:block; margin-top:25px; }

/* JQUERY */

#slider {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

.scroll {
    height: 250px;
    width: 960px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}

.scrollContainer div.panel {
    padding: 20px;
    height: 210px;
    width: 920px;
}


ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
}

ul.navigation li {
    display: inline;
    margin-right: 10px;
}

ul.navigation a {
    padding: 10px;
    color: #000;
    text-decoration: none;
}

ul.navigation a:hover {
    background-color: #f6f6f6;
}

ul.navigation a.selected {
    background-color: #fff;
}

ul.navigation a:focus {
    outline: none;
}

.scrollButtons {
    position: absolute;
    top: 150px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -20px;
}

.scrollButtons.right {
    right: -20px;
}

.hide {
    display: none;
}





/* main menu */

#logoWrapper { width:960px; display:block; margin-top:50px; }
#logo { float:left; width:421px; }

#menu { width: 500px; float:right; }
	#menu ul { margin:0; padding:0; float:right; }
	#menu ul li { list-style-type: none; font:bold 14px/14px Tahoma, Arial, Helvetica, Geneva, sans-serif; margin: 0; padding: 0; display:inline; text-transform:uppercase; font-stretch:expanded; }
	#menu ul li a {	padding:5px 10px; margin: 0; color: #fff; }
	#menu ul li a:hover { color:#f74000; text-decoration:none; }

#featuredHome { width:960px; height: 143px; }
	#featuredHome ul { list-style:none; margin-top:22px; }
	#featuredHome ul li { list-style:none; float:left; margin-right:20px; min-width:220px;  }

.picture { float:left; width:120px; padding: 2px; border:1px solid #ccc;  }
.picture:hover { border:1px solid #fff;  }
.exerptContent { float:left; width:169px; padding-left:5px; height:143px; }
	.exerptContent h3 a:hover { color:#F74000; text-decoration:none; }

#contentFeatured { width:710px; display:block; padding: 0px 0px;  float:right; }
	#contentFeatured #featuredTitle { width:710px; height:auto; display:inline; }
	#featuredTitle h1 { font-size:60px; line-height:50px; text-transform:uppercase; padding:0px; margin:0px; } 
	#featuredTitle h1 a{ color:#000; } 
	#featuredTitle h1 a:hover { color:#f74000; text-decoration: none; } 
	
	#contentFeatured #featuredLeft { width:300px; height:300px; float:left; display:block;  }
	#contentFeatured #featuredLeft img:hover { border:1px solid #f74000; }
	#contentFeatured #featuredLeft img { border:1px solid #ccc; padding: 3px;}
	#contentFeatured #featuredRight { width:280px; height:auto; color:#000; float:left; margin-left: 10px; display:block; } /* width:400px; the max extends but doesnt look good*/
	
	#featuredRight #excerpt { margin-top:10px; font-size:12px; }


/* content */

#content, contentHome { width:960px; }
#contentHome { margin-top:25px; }
#content h1{ margin-bottom:50px; } 

.LL { width:440px; margin:10px; margin-top:0; border:thin solid #CCCCCC; float:left; background-color:white; }
.php, .xhtml, .css, .jquery { width:110px; min-height:110px; float:left; display:block; }
.posts { width:100%; min-height:95px; float:left; display:block; background:url(images/postHome.jpg) no-repeat 10px 10px; }
.php { background:url(images/phpHome.jpg) no-repeat 10px 10px; }
.xhtml {  background:url(images/xhtmlHome.jpg) no-repeat 10px 10px; }
.css {  background:url(images/cssHome.jpg) no-repeat 10px 10px; }
.jquery {  background:url(images/jqueryHome.jpg) no-repeat 10px 10px; }

.skillsText { width:440p; margin:10px; }
.recentText { width:335px; margin: 5px 10px 5px 95px; }
.recentText p, .skillsText p { margin-bottom:10px; }
.recentText p a, .skillsText p a { font-weight:bold; color:#FF3300; border:1px solid transparent; padding: 3px; }
.recentText p a:hover, .skillsText p a:hover { color:#000; border:1px solid #ccc; text-decoration:none; }
.recentText p a:visited, .skillsText p a:visited { padding-left: 14px; background: url(images/checkmark.gif) left no-repeat; color: #999; }
.recentText h3, .skillsText h2 { padding-bottom:10px; }


/* BLOG PAGE */

#contentBlog { width:710px; float:right; }
#contentBlog h1{ margin-bottom:20px; }

.specialh1 h1{ font-size:48px; color:#fff; margin-top:0px; padding-top:0px; margin-bottom:70px; }

h1 .h1span { font-size:14px; color:#ccc; }

.post {	margin:0; padding:4px; line-height: 14pt; border-bottom:thin solid #CCC; }
.post:hover {  }
	.post h2{ margin:0px; padding:0px; line-height:normal; letter-spacing:normal;  }
	.post h2.single{ font-size:50px; color:#000; margin:0px; padding-top:0px; text-decoration: none; }
	.post h2 a{ font-size:27px; color:#000; margin:0px; padding-top:0px; text-decoration: none; text-transform:capitalize; }
	.post h2 a:hover{ color: #f74000; text-decoration: none; }
	.post ul {}
	.post li {}
	
.entry { }
	.entry h2 { margin:0px; padding:0px; line-height:normal; font-size:32px; color:#000; margin:0px; padding-top:0px; text-decoration: none; }
	.entry a{ font-weight:bold; color:#FF3300; border:1px solid transparent; padding: 3px; }
	.entry a:hover{  color:#000; border:1px solid #ccc; text-decoration:none; }
	.entry a:visited { padding-left: 14px; background: url(images/checkmark.gif) left no-repeat; color: #999; }
	.entry p{ margin:12px 0; }

.postmetadata{ clear: both; padding:6px; margin: 20px 0; color:#FFFFFF; }	
.navigation { font-size:8pt; width:100%; float:left; margin:0; padding:0; overflow:hidden; }
	
.alignleft a { float:left; margin:5px; }
.alignright a { float:right; margin:5px; }

.textalignRight { text-align:right; margin:10px; border-bottom:solid thin #CCCCCC; }


/* SIDEBAR */

#sidebar { width:225px; float:left; padding-right:20px; background:url(images/sidebarBG.jpg) right center no-repeat; font-family: Georgia, serif; }
	#sidebar h2 { font-size:24px; padding-top:20px; margin:0px; line-height:normal; }

	#sidebar ul, #sidebar ol { list-style:none; }
	#sidebar ul li {  padding: 5px; font-weight:normal;  border-bottom:thin solid #CCCCCC;}
	#sidebar li:hover { background: #e1e0e0; border-bottom:thin solid #aaa; }
	.rssIcon li, .rssIcon ul li:hover{ background:url(images/rss1.png) right no-repeat; padding-right:17px; }
	

#search { background-color:#e1e0e0; }
#searchform input { font-size:18px; height:25px; width:150px; padding:3px; }
#searchform input.go { font-size:18px; height:39px; width:40px; }


/* comments */

#commentform{ margin:0; padding:0; }	
#commentform p{ color: #fff; }	
#commentform a { color: #123456; text-decoration: none; border-bottom: 1px dotted #465D71;line-height: 14pt; }	
#commentform h3 { font:300 10pt "century gothic",arial,tahoma,verdana,sans-serif; color: #000; margin:0; padding:0; }	
#comment { width:80%; }

#author, #email, #url, #comment, #submit { background-color:#1B1E1F; color:#FFFFFF; font-family: verdana, arial, times; font-size: 14pt; margin:5px 5px 0 0; padding:3px; border: 1px solid #000; }	
#submit { margin:5px 5px 0 0; }
#submit:hover { background-color:#CCCCCC; color:#1B1E1F; }
#comments { margin:0; padding:0 }	

ol.commentlist { list-style-type: none; margin:0; padding:0; }
	ol.commentlist li { margin:10px 0; padding:5px 0 5px 10px; list-style-type:none; }
	ol.commentlist li.alt { background: #eee; }
	ol.commentlist li p { margin: 6px 0 6px 0; padding: 0 12px 0 0; line-height: 14pt; }
	ol.commentlist a { color:#000; }	
	
.avatar{ float:left; margin:0 12px 0 0; }

.cite { font-family: arial, verdana, tahoma; font-size: 9pt; font-weight: bold; font-style: normal; float:right; display:inline; }
.cite a { color: #000; text-decoration: none; border-bottom: 1px dotted #465D71; }



/* search */

#searchform{ padding:0;	margin:14px 0; }
#searchform input#s{ margin:0; padding:2px; border:1px solid #000; }

		
/* misc */

img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; background-color:#0F0F13; border:thin solid #333333; }

.alignright { float:right; display:inline; }
.alignleft { float: left; display:inline; }

	
#tweetbacks a { color:#FFFFFF; }

#metaPost { background:#1B1E1F; border:2px solid #333333; color:#FFFFFF; }
#metaPost:hover { color:#f74000 }


/* SOCIAL MEDIA */

.social_bookmark{
padding:10px;
background:#f7f7f7;
border:1px solid #eee;
}
.social_bookmark li{
display:inline;
}

/* footer */

#footer { clear: both; width: 100% !important; color:#FFFFFF; background:#000000 url(images/footerBG.jpg) top repeat-x; }
	#footer #footerContent { width:960px; margin: 0 auto 0 auto; height: 350px; padding-top: 85px; }
	#footer h2 { font-size:18px; color:#ffffea; padding:5pc 5px 5px 20px; padding-top:10px; line-height:normal; border:thin solid #333333; background-color:#0F0F13; letter-spacing:-1px; }
	
	#footer h2.tags { display:inline; float:left; margin-right:10px; padding:20px; }
	
	#footer ul a { color:#ffffea; }
	#footer ul a:hover { color:#f74000; }
	#footer ul {  list-style:none; padding-top:10px; }
	#footer ul li { padding:7px; padding-left:5px; border-bottom:thin solid #333333; }
	
	#footer #footerContent { margin-bottom:20px; }
	
	#footer #originTags { float:left; width:270px; padding-top:10px; text-transform:capitalize; }
			#originTags h2 { background:#0F0F13 url(images/social.png) right top no-repeat; }
			#originTags ul{  }
			#originTags ul li{  }
			#originTags ul li:hover{ border-bottom:thin solid #666666; background:#1B1E1F; }
			
	#footer #similarPosts { float:left; width:270px; padding-top:10px; margin-left:20px; text-transform:capitalize;  }
			#similarPosts ul{  }
			#similarPosts ul li{ }
			#similarPosts ul li:hover{ border-bottom:thin solid #666666; background:#1B1E1F; }
			
	#footer	#twitterTweets { float:left; width:380px; margin-left:20px; padding-top:10px; text-transform:capitalize; }
			#twitterTweets h2 { background:#0F0F13 url(images/twitter.png) right top no-repeat; }
			#twitterTweets ul{  }
			#twitterTweets ul li{  }
			#twitterTweets ul li:hover{ border-bottom:thin solid #666666; background:#1B1E1F; }
#footer p {padding:14px 0;margin: 0; color: #eee; text-align:center; }
#footer a { color: #BCBCBC;text-decoration: none; }
#footer a:hover { color: #5D5D5D;text-decoration: underline; }