
/*
Theme Name: Folio
THEME URI: http://myfolio.pixel8tion.net
DESCRIPTION: Folio is a WP Portfolio Style Theme ideal for photographers, artists or designers. It was created to be VERY easy to maintain using simple WordPress posting and writing capabilities. No need for custom fields! Simply write a post like you normally would and use the WordPress Gallery  "AddMedia"  to upload your image, select  "medium size" and  "insert into post"   The image can be  added anywhere in the text and it will create everything you need including the thumbnail. Zoom to the larger size Images with a Lightbox feature that floats the image over the page.  All post categoires are presented in a slider with Descriptons and thumbnail navigation.  Also includes a JQ enhanced dropdown menu, Lightbox, auto Image sizer, thumbnail creation, gravatars and more. valid xhtml & css.
VERSION: 1.1
Author: Mark Landry
Author URI: http://pixel8tion.net
TAGS:two columns,fixed width, widget ready, valid xhtml, valid css, feedburner, 1024, dropdown categories, footer navigation, drop down category menu, jquery, slider, fetured category slider
.
*/


/*====================== Defaults ======================*/

* {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 10px 0;
}

h1, h2, h3, h4, h5, h6 { font-weight:normal; }

p {
	font-size: 110%;
	line-height: 1.5em;
}

a {
	color: #8BBF0B;
	text-decoration: none;
}
a:hover { 
	text-decoration: underline;
	
}
blockquote {
	padding: 5px 15px;
	margin: 10px 10px 5px 15px;
	font-style: italic;
	background-color: #444;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #bdd73c;
	border-bottom-color: #bdd73c;
}
code {
	color: #3366cc;
	font-style: italic;
}
strong { font-size: 110%; }
body {
	text-align: center;
	margin: 0;
	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	background: #333;
}

/* =============== Theme Color ======================*/

#header-wrap, #BtmWrap {
	background-color:#232323;
	background-image:url(images/bg-header.jpg);
	background-position:left top;
	background-repeat:repeat-x;
	
}
/* =============== Theme Switcher ======================*/
#switches{float:right;margin-right:10px;position:absolute;right:0;top:75px;}
#switches ul{display:block;list-style-type:none;}
#switches li{display:inline;list-style-type:none;}

/* =============== HEADER ======================*/

#wrapper {
	margin: 0 auto;
	width: 980px;
	text-align: left;
	padding: 0;
	position:relative;
}

#header {
	padding: 0;
	margin: 0 auto;
	width: 960px;
	text-align: left;
	clear: both;
	position: relative;
}

#header-wrap {
	margin:0;
	min-height:100px;
	padding:0;
	width:100%;
	border-bottom: 4px solid #8BBF0B;

}
/* =============== LOGO and Tagline ======================*/

#header #logo {
	width:400px;
	position: absolute;
	top:-20px;
	left: 10px;
	}
#header h1 {
	margin:0;
	padding:0;
	text-indent:-9999em;
}
#header h1 a {
	color:#555;
	cursor:pointer;
	display:block;
	width:400px;
	height:90px;
	background:transparent url(images/logo-green.gif) no-repeat scroll left top;

}
#header .tagline {      /* This controls the WordPress Tagline that you type in your admin */
	color:#FFFFFF;
	font-size:10pt;
	font-style:italic;
	line-height:1%;
	margin:0 0 0 5px;
	text-indent:-9999em;
}

/* =================  Menu and navigation  ======================== */



#topNav{
	width:960px;
	margin-right: auto;
	margin-left: auto;
}
#dropmenu{
 float:right;

}
#dropmenu, #dropmenu ul {
	float:right;
	font-size:10px !important;
	font-weight:bold;
	letter-spacing:0.2em;
	line-height:1.5em;
	list-style-position:outside;
	list-style-type:none;
	padding:0;
	position:relative;
	z-index:10;

}
#dropmenu a {
	display:block;
	padding:0.25em 1em;
	text-decoration:none;
	text-transform:uppercase;
	color:#fff;
}
#dropmenu a:hover {
	background:#8BBF0B;
	color:#fff;
}
#dropmenu li {
	float:left;
	position:relative;
	text-align: left;
}
#dropmenu ul {
	position:absolute;
	display:none;
	width:12em;
	top:1.9em;
	left:-1px;
}
#dropmenu li ul { 
	width:14.1em;
	padding:5px 0 0 0;
	margin:-3px 0 0 0;
	 }
#dropmenu li ul a {
	background:#000;
	border-bottom:1px solid #222222;
	float:left;
	height:auto;
	width:12em;
}
#dropmenu ul ul { top:auto; }
#dropmenu li ul ul {
	left:12em;
	margin:0px 0 0 10px;
}

#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { display:none; }
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { display:block; }



/* =============== Main Content ======================*/

#main {
	clear: both;
	padding-left: 0px;
	margin: 0px;
}
#main h1 { clear:both; }

#contentwrapper { }

#contentwrapper ul{
	margin-right: 40px;
	margin-left: 40px;
}
#contentwrapper li{
	padding-left: 10px;
	list-style-position: inside;
	list-style-type: disc;
}
#contentwrapper .topPost a img{
	border:2px solid #222;
	position:relative;
	margin:0 20px 10px 0;
	float: left;
	left:0px;
	top: 0px;
}
.pageContent{
	color:#FFFFFF;
	font-size:100%;
	margin:0 auto 40px;
	padding: 40px 0;
	width:800px;
}
.pageTitle {
	color:#FFFFFF;
	font-size:11pt;
	font-weight:normal;
	letter-spacing:2px;
	padding:5px 10px;
	text-transform:uppercase;
	position: absolute;
	top: -30px;
	right: 0px;	
	background:#8BBF0B none repeat scroll 0 0;
	border-left:1px solid #A2DF0D;
	border-right:1px solid #A2DF0D;
	border-top:1px solid #AEEF0E;


}
.topPost {
	font-size: 9pt;
	margin: 0px;
	position: relative;
	padding: 0px 0 20px 0px;
	min-height: 380px;
	background-image: url(images/bg-glow.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.topPost a img {
	border: 10px solid #FFFFFF;
	position: absolute;
	left: 20px;
	top: 30px;
	float: none;
}
.topTitle {
	margin: 0px;
	padding: 0 0 5px 0;
}
.topPost h2.topTitle a {
	font-size: 140%;
	font-weight: normal;
	color: #fff !important;
	margin-top: 0px;
	padding-top: 0px;
	text-transform: capitalize;
}
.topPost h2.topTitle a:hover { color: #567488; }
.topPost p.topMeta {
	text-transform: uppercase;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
}
.topPost p.topMeta a {
	text-decoration: none;
	color: #777;
	padding-right: 5px;
	padding-left: 5px;
}
.topPost p.topMeta a:hover {
	color: #567488;
	text-decoration: underline;
}
.topPost div.topContent {
	font-size: 100%;
	color: #fff;
	margin: 30px 0;
	float: right;
	width: 380px;
}
.topPost div.topContent a {
	text-decoration: none;
	color: #999;
	font-weight: normal;
}
.topPost div.topContent a:hover {
	text-decoration: underline;
	color: #fff;
}
.topPost div.topContent ul, .topPost div.topContent ol { padding: 0 0 0 30px; }
.topPost div.topContent ul li, .topPost div.topContent ol li { color: #444; }
.topPost span.topComments, .topPost span.topMore, .topPost span.topTags {
	font-size: 9pt;
	font-style: italic;
	margin-right: 0px;
	color: #fff;
	margin-bottom: 5px;
	display: block;
	background-color: #E9E9E9;
	margin-left: 0px;
	margin-top: 0px;
	padding: 0px;
}
.topPost span.topComments:hover, .topPost span.topMore:hover, .topPost span.topTags:hover { background: #040404; }
.topPost span.topComments a {
	color: #5e0000;
	background: url(images/comments.gif) left no-repeat;
	padding-left: 20px;
	line-height: 27pt;
	vertical-align: middle;
}
.topPost span.topMore a {
	color: #1F1910;
	padding-left: 0px;
	padding-right: 0px;
	margin: 0px;
	font-style: normal;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	background-color: #FFFFFF;
	font-size: 85%;
	display: block;
}

.topPost span.topTags em {
	background: url(images/tags.gif) left no-repeat;
	padding-left: 20px;
	line-height: 27pt;
	vertical-align: middle;
	color: #0a0a0a;
	display: inline;
}
.topPost span.topTags a {
	color: #567488;
	line-height: 27pt;
	vertical-align: middle;
}
.topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover {
	color: #bfedff !important;
	text-decoration: none;
}
.btm-Post {
	background-color: #F5F5F5;
	text-align: right;
	height: 27px;
}
#nextprevious {
	margin-top: 25px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding-top: 10px;
}
#nextprevious a {
	text-transform: uppercase;
	font-size: 80%;
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	margin: 0px;
}
#nextprevious a:hover {
	color: #000000;
	text-decoration: underline;
}

.more a{
background:#8BBF0B none repeat scroll 0 0;
padding:5px !important;
color:#fff!important;
line-height: 24px}

/* ========================== Comments ======================= */

.comments a {
	height: 34px !important;
	width: 34px;
	color: #333333;
	background-image: url(images/comment.gif);
	background-repeat: no-repeat;
	background-position: left center;
	display: inline;
	float: right;
	font-weight: bold;
	text-align: center;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin-top: -10px;
	margin-right: -8px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#comment {
	background:#232323 none repeat scroll 0 0;
	border:8px solid #555555;
	margin-bottom:40px;
	padding:10px 15px;
	width:595px;
}
#comment p{
	color:#ccc;
}
#comment a { color: #fff; }
/*#comment a:hover { color: #fff; }*/
#numberofcomments {
	color: #999;
	font-size: 10pt;
	margin: 50px 0 20px 0;
	text-transform: uppercase;
}
ol#commentlist {
	list-style: none;
	margin: 10px 0;
	font-size: 9pt;
}
#commentlist li {
	margin: 0 0 15px 0;
	padding: 10px;
	background: #555;
	border: 1px solid #0a0a0a;
	display:block;
}
#commentlist li.alt {
	background: #777;
	border: 1px solid #010101;
	border: none;
}
#commentlist li.cleared {
	background: transparent;
	border: none;
}
#commentlist a:hover { color: #eee; }
#commentlist a.gravatar {
	float: left;
	margin: 0 10px 0 0;
	width: 69px;
}
#commentlist .commentbody {
	margin: 0;
	padding: 0 5px 0 0;
	float: right;
	width: 450px;
}
#commentlist .commentbody p a { text-decoration: underline; }
#commentlist cite {
	font-size: 10pt;
	font-style: normal;
	color: #fff;
}
/*#commentlist small.commentmetadata a { color: #fff; }*/
#commentlist p { 
	color: #000; 
}
#comment h3 {
	font-size: 10pt;
	font-weight: normal;
	color: #fff;
	margin: 15px 0 0 0;
	padding: 0;
}
textarea#comment {
	width: 450px;
	background: #fff;
	color: #111;
}
#comment #submit {
	margin-left: 0px;
	margin-top: -25px;
}

/* ============== Welcome section ======================= */

#welcome {
	padding: 15px;
	margin: 15px 0 15px 0;
	border:none; border-top: solid 2px #000;
}
#welcome h2 {
	color:#fff;
	font-size:110%;
	margin:0;
	padding:0;
	text-transform:uppercase;
	font-weight: bold;
}
#welcome p {
	font-size: 9pt;
	color: #eee;
	margin: 0 10px;
	padding: 6px 0;
}
#welcome a {
	text-decoration: underline;
	color: #bfedff;
}
#welcome a:hover { color: #6598b8; }
#welcome form {
	margin: -5px 0 0 0;
	background: transparent; /* required for IE */
}

#welcome #feedbox {
	border: 1px solid #ccc;
	padding: 2px 1px;
	width: 180px;
}

.submitbutton {
	margin: -2px 0 0 5px;
	background: #555;
	color: #fff;
	font-size: 8pt;
	padding: 3px 6px;
	border: 0px solid #111;
}
.submitbutton:hover {
	cursor: pointer;
	background: #8BBF0B;
	color: #14144;
}





/* ========================== Bottom Content - footer ======================= */


#BtmWrap {
	border-top:4px solid #8BBF0B;
	text-align:left;
	padding:0 0 40px;
}
#morefootWrap {
	background-color:#101010;
	background-repeat:repeat-x;
	border-top:1px solid #333333;
	text-align:left;
}
#BtmContent {
	color: #dfdfdf;
	margin: 0 auto;
	width: 960px;
	position: relative;
}
#BtmContent p {
	margin: 5px 0;
	padding: 5px 0;
}
#BtmContent ul {
	list-style-type: none;
}
#BtmContent ul li, #BtmContent p {
	letter-spacing: 0.1em;
	font-size: 9pt;
}
#BtmContent a {
	text-decoration: none;
	color: #ddd;
}
#BtmContent a:hover {
	text-decoration: underline;
	color: #bdd73c;
}
#BtmContent h3 {
	font-size: 12pt;
	font-weight: normal;
	color: #888;
	margin: 0;
	padding: 0 0 2px 0;
	text-transform: uppercase;
}
#BtmContent #searchbox {
	padding: 1px;
	width: 180px;
}
#BtmContent .col1 {
	float:left;
	margin-top:30px;
	padding:15px;
	text-align:justify;
	width:480px;
}
#BtmContent .col2 {
	float: right;
	width: 400px;
	margin: 42px 10px 0 0;
}
#BtmContent .col2  h3, #BtmContent .col1 h3{
	display:block;
	margin-top:15px;
	padding: 10px;
	border-top: solid 2px #000;
	color:#fff;
	font-weight: bold;
	background:#8BBF0B none repeat scroll 0 0;
	border-bottom:1px solid #AEEF0E;
}
#BtmContent .col2 a, #BtmContent .col1 a {
	display:block;
	font-size:80%;
	font-weight:bold;
	letter-spacing:0.2em;
	padding:5px 10px;
	text-transform:uppercase;
	border-bottom:1px solid #232323;
}
#BtmContent .col2 a:hover, #BtmContent .col1 a:hover { background:#555; }

#BtmContent .col2 li.current-cat a, #BtmContent .col1 li.current-cat a {
	background:#555555 none repeat scroll 0 0;
	color:#fff;
	border-color:#8BBF0B;
	border-style:solid none none;
	border-width:2px medium medium;
		
}
#BtmContent .col2 li, #BtmContent .col1 li { 
	background:#333333 none repeat scroll 0 0;
	border-bottom:1px solid #141414;
	display:block;
	margin:0;
 }
#BtmContent .cat_nav {
	margin: 0;
}
#BtmContent .cat_nav  h3{
	background-image:url(images/galleries-categories.png);
	background-repeat:no-repeat;
	display:block;
	height:40px;
	margin-top:15px;
}
#BtmContent .cat_nav a {
	display:block;
	font-size:80%;
	font-weight:bold !important;
	letter-spacing:0.2em;
	padding:10px 10px 15px 15px;
	text-transform:uppercase
}
#BtmContent .cat_nav a:hover { 
background:url(images/bg-nav.png);
border-bottom:1px solid #141414;
color:#FFFFFF;
}
#BtmContent li.current-cat a {
	background:#8BBF0B none repeat scroll 0 0;
	border-bottom:1px solid #AEEF0E;
	border-left:1px solid #A2DF0D;
	border-right:1px solid #A2DF0D;
}

#BtmContent li.current-cat a:hover { 
border-left:1px solid #141414;
border-right:1px solid #141414;
}

#BtmContent .cat_nav li { 
	display:inline;
	float:left;
	margin:0;
 }
#BtmContent .col3 {
	float: right;
	width: 400px;
	padding: 10px 0;
}
#BtmContent li {
	margin-bottom: 5px;
}
.logo_foot a {
	color:#FFFFFF;
	font-family:tahoma, Arial, Helvetica, sans-serif;
	font-size:24pt;
	font-weight:bold;
	letter-spacing:-1pt;
	text-decoration:none !important;
}

/* ====================== SECOND FOOTER - this is the area below he large footer area ======================*/

#footer {
	clear:both;
	color:#555555;
	margin-left:auto;
	margin-right:auto;
	padding:15px 15px 20px;
	width:960px;
}
#footer p {
	color:#555555;
	font-size:70%;
	padding:0;
}
#footer a {
	color: #bbb;
	text-decoration: underline;
}
#footer a:hover { color: #fff; }
#footerleft {
	float: left;
	width: 500px;
}
#footerright {
	float: right;
	width: 300px;
	text-align: right;
	font-size:70%;
}
.decription {
	font-size: 80%;
	color: #D3D2CC
}

/* ====================== Misc ======================  */

#recentcomments li{
	padding:5px 10px;    
}
#recentcomments a{
	color: #999;    
}
.textwidget{
	background:#333;
	padding:15px;
	font-size:9pt;
	letter-spacing:0.1em;
}

.highlight {
	color: #222;
	font-weight: bold;
}

.cleared {
	margin: 0;
	padding: 0;
	clear: both;
}
.alignleft {
	float: left;
	margin: 5px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 5px 0 5px 10px;
}

.aligncenter, div.aligncenter {
	margin: 10px auto;
	text-align: center;
	display: block;
}

img.post_alignleft {
	float: left;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: 8px solid #F5F5F5;
	max-width: 150px; /* sets the size of thumb images */
}

img.page_alignleft {
	float: left;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: 8px solid #F5F5F5;
	max-width: 300px; /* sets the size of thumb images */
}

img.alignleft {
	float: left;
	margin-top: 4px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: 8px solid #F5F5F5;
}

img.alignright {
	float: right;
	margin: 5px 0 5px 10px;
	border: 8px solid #F5F5F5;
}

.FeaturedPhoto {  /* This is the container for the Featured Posts Image backgound  */
	float: right;
	background-image: url(images/photo.gif);
	background-repeat: no-repeat;
	height: 264px;
	width: 330px;
	margin-left: 20px;
}

.FeatureCaption {  /* This controls the caption for the image in the featured post scroller */
	color:#577DAF;
	font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
	font-size:9pt;
	font-weight:normal;
	height:30px;
	left:658px;
	line-height:100%;
	padding:5px 10px;
	position:absolute;
	top:253px;
	width:230px;
	z-index:30;
}
img.aligncenter {
	margin: 10px auto;
	text-align: center;
	display: block;
}
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: none;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
	color: #111;
}
#searchbox {
	background-color: #fff;
	font-size: 90%;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-left: 5px;
	border: 1px solid #fff;
	padding-left: 10px;
	width:170px;
}
/* ========================== SLIDER ======================= */


#page {
	margin:0 auto;
	min-height: 450px;
	width:960px;
}

.featured {
	background-image: url(images/Featured.gif);
	background-repeat: no-repeat;
	position: absolute;
	z-index: 10;
	height: 101px;
	width: 104px;
	left: 856px;
	top: 0;
}

#slider {
	margin:0 auto;
	position:relative;
}

#slider .topPost p.topMeta { 
font-size: 90%;
border-bottom:1px solid #555555;
padding-bottom:10px;
}
 

#page .navigation {
background:#141414 none repeat scroll 0 0;
border-right:35px solid #000000;
display:inline;
float:left;
padding:8px 5px 5px 10px;
width:910px;
}

#page .navigation li {
	padding: 0;
	list-style-type: none;
	display:inline
}
#page .navigation a {
	color: #000;
	background:#777777 none repeat scroll 0 0;
	border-top:4px solid #000;
	display:block;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:normal;
	margin:0 5px 0 0;
	padding:0;
	text-transform:uppercase;
	width:40px;
}
#page .navigation a:hover, #page .navigation a.selected {
	color:#FFF;
	background-color:#bdd73c;
	border-top: solid 4px #BDD73C;
}
#page .navigation a:hover span, #page .navigation a.selected span { background:url(images/page_navigation_span.png) left top no-repeat; }
#page .navigation a:focus { outline:none; }
#page .scroll {
	height:400px;
	padding: 0;
	margin:0 auto;
	overflow:auto;
	position:relative;
	clear:left;
	border:none;
}
#page .scrollContainer .panel {
	padding:0px;
	height:550px;
	width:960px;
	overflow:hidden;
}
#page .panel em { font-style:italic; }
#page .panel a { font-weight:normal; }
#page .panel a:hover { text-decoration:underline; }
#page .panel .gallery img {
	padding:2px;
	border:solid 1px #c0c5d6;
}
#page .readMore {
	font-size: 90%;
	margin-right: 20px;
}
#page .readMore a {
	padding-left: 3px;
	padding-right: 3px;
}
#page .panel blockquote, #page .panel ul, #page .panel ol, #page .panel pre {
	font-size:12px;
	margin:1em 2em 2em 2em;
	padding:10px 15px;
	background:#ecedf3;
}
#page .panel blockquote p {
	padding:.4em 0 !important;
	text-indent:0 !important;
}
#page .panel li {
	list-style-position: inside;
	padding: 0 0 .5em 0;
}
#page .panel ul li {
	margin:0 0 0 1em;
	list-style:square;
}

#page .panel ol li {
	margin:0 0 0 1.5em;
	list-style:decimal;
}
#page .panel pre {
	line-height:1em;
	color:#1C194C;
	font-size:13px;
	overflow:auto;
	background:#f8f8f8;
	border:solid 1px #e5e5e5;
}
#page .panel code {
	padding:0 3px;
	color:#33333e;
	background:#f8f8f8;
	border:solid 1px #e5e5e5;
	font-size:13px !important;
}
#page .panel .gallery { text-align:center; }

#page .scrollButtons {
	width:30px;
	height:30px;
	position:absolute;
	top: 415px;
	cursor:pointer;
}
#page .scrollButtons a {
	display:block;
	height:29px;
	width:25px;
}
#page .scrollButtons span { display:none; }
#page .scrollMeRight{ right:0; }
#page .scrollMeRight a { background:url(images/left_right.png) 0 0 no-repeat; }
#page .scrollMeRight a:hover { background:url(images/left_right.png) 0 -29px no-repeat; }
.floatleft {
	display: inline;
	float: left;
}
.post-image {
	height: 40px;
	width: 40px;
	overflow: hidden;
	border: none;
}
.mag {
	background-image: url(images/mag.gif);
	background-repeat: no-repeat;
	height: 15px;
	width: 130px;
	position: absolute;
	left: 15px;
	top: 385px;
}
