/*  
Author: C. Scott Smith
*/


/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
table {
	/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: collapse;
	border-spacing: 0;
}
nav { 
    display:block;
}
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
ul, ol {
    margin: 0 0 1.4em 0px;
    padding: 0;
    line-height: 150%;
}
li {
    margin: 0 0 .5em 0;
    padding: 0;
}
.date {
	position: absolute;
	margin: 0px 0 0 445px;
	width: 61px;
	height: 51px;
	/*background: url(../images/date.png) no-repeat;*/
	font: normal 110%/110% Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	padding: 5px 0 5px 0;
	text-align: center;
}
.date span{
	display: block;
	font: italic 70%/70% Georgia, "Times New Roman", Times, serif;
	letter-spacing: -1px;
	text-transform:lowercase;
}
h1 {
	/*font: bold 180%/100% Georgia, Times, serif;*/
	padding: 0 0 0 0;
	letter-spacing: 0px;
	margin-left: 0px;
	color: #2b2b2b;
}
h1.title {
	/*background:url(../images/TitleBackgroundImage.png) no-repeat left bottom;*/
	text-align: left;
	letter-spacing: -1px;
	font: normal small-caps 125%/100% Georgia, "Times New Roman", Times, serif;
	letter-spacing: 0px;
/*	margin: 0px 0px 0px 30px;*/
	padding: 0px 30px 2px 30px;
}
h1 a {
	color: #763712;
}
h1 a:hover {
	color: #2b2b2b;
	text-decoration: none;
}
h2 {
	font: italic 90%/90% Georgia, Times, serif;
}
h2.summary {
	padding: 0px 30px 0px 30px;
}
h3 {
	font: normal 100%/120% Georgia, Times, serif;
	padding: 10px 30px 0px 50px;
	}
#tags {
	text-align: right;
	letter-spacing: -1px;
	font: normal small-caps 80%/80% Georgia, "Times New Roman", Times, serif;
	letter-spacing: 0px;
	padding: 0px 15px 2px 0px;
	color: #666666;
}
/************************************************************************************
FORM
*************************************************************************************/
#commentsdiv {
	float:left;
	margin-top:15px;
	width: 500px; 
}

#contactdiv {
	float:left;
	margin-top:15px;
	width: 500px; 
}

#summary{
	margin-left:30px;
	color: #F00;
	font-style:italic;
}
.message{
	margin-left:30px;
	display:none;
	color: #F00;
}
form p {
    margin: 0;
    padding: 6px 0;
}
#commentform{
	margin-left:10px;
}
#contactform{
	margin-left:25px;
}
#reviewsform{
	margin-left:25px;
}
form label {
    font-variant: small-caps;
    margin-left: 5px;
}
form label small, form label em {
    text-transform: none;
    color: #hhh;
    font: italic 90%;
}
input, textarea, select {
	font-size: 100%;
    font-family: inherit;
	margin-top:5px;
}
input[type=text], input[type=password], textarea, select {
    background: #ccc;
/*    background: rbga(255,247,153,.4);*/
    border: none;
    color: #hhh;
    padding: 6px 2%;
    border-bottom: solid 1px #030;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-appearance: none;
}
input[type=text] {
    width: 250px;
    max-width: 96%;
}
textarea {
    width: 250px;
	height: 100px;
}
select {
    width: 265px;
}
textarea:focus, input[type=password]:focus, input[type=text]:focus {
    outline:none;
    background:#FF9;
}
input[type=reset], input[type=submit] {
    font-size: 75%;
    color: #fff;
	background-color:#030;
    padding: 7px 20px;
    cursor: pointer;
	border:none;
}
.box
{
	height:auto;
	background: url(../images/comment_bg.png) repeat;
	width:465px;
	border: #999;
	padding:10px;
	margin:10px;
}
	ol.commentstimeline
	{list-style:none;font-size:12px;}
	ol.commentstimeline li{ display:none;position:relative;}ol.commentstimeline li:first-child{}
	.com_name
	{
		font-size: 16px; 
		color:#030; 
		font-weight: bold;
	}
	.com_dis
	{
		font-size: 14px; 
		color:#030;
		font-style:italic; 
		font-weight: normal;
		margin-left:20px;
	}
	label.error 
	{ 
		color: red;
		font-style:italic;
	}
/************************************************************************************
STRUCTURE
*************************************************************************************/
html, body {
    font: 15px/150% Georgia, Times, serif;
	background: #030 url(../images/JustEnvironsBackground_Top.png) no-repeat center top;
    height: 100%;
	width: 100%;
	display:table;
	overflow-x: hidden;
}
#pagewrap {
	width: 1140px;
	height:100%;
	margin: 0 auto;
	position: relative;
	border-top: none;
	border-bottom:15px;
/*	background:#FFF; 
	filter:alpha(opacity=1);
	opacity:0;*/
}
#logo {
	position: absolute;
	margin-top: 100px;
	margin-left: 730px;
}
#loading {
	position: absolute;
	margin-top: 300px;
	margin-left: 375px;
	height:auto;
	width:auto;
}
#recentpics {
	position: absolute;
	margin-top: 235px;
	margin-left: 770px;
}
#bottomfooterimage {
}
#content {
	 width:800px;
	 margin:200px 0px 0px 180px;
	 padding: 0px 0px 25px 0px;
	 float:left; 
	 background:#FFF url(../images/graph.gif);
}
#leftcolumn {
	color: #333;
	height: auto;
	width: 500px;
	float: left;
	margin: 15px 0px 0px 25px;
	border: #000 1px;
}
#returntolist {
	position:absolute;
	margin-top: 213px;
	margin-left: 649px;
	width: 61px;
	height: 51px;
	/*background: url(../images/returntolist.png) no-repeat;*/
	padding: 8px 0px 5px 0px;
	font: normal 9px Georgia, "Times New Roman", Times, serif;
	text-align: center;
	letter-spacing: 1px;
	line-height:95%;
	text-transform:uppercase;
	z-index:100;
	display:none;
}
#returntolist a{
	text-decoration:none;
	text-shadow:#FF0;
	color:#F00;
}
#rightcolumn {
	float: right;
	color:#666666;
	height: auto;
	width: 225px;
	margin: 15px 25px 0px 25px;
	border: #000 1px;
}
#quote {
	float: left;
	background: url(../images/quotes.png) top left no-repeat;
	margin-bottom:40px;
	margin-top:10px;
}
#quote blockquote{
	color:#030;
	font: italic bold 15px/15px Georgia, Times, serif;
	margin:30px 0px 0px 15px;
}
/************************************************************************************
HEADER
*************************************************************************************/
#header {
    position: fixed;
	z-index: 20;
	margin-left: -5px;
	margin-top: 50px;
    width: 175px;
    text-align: right;
}
#searchform #searchkeyword {
    width: 100px;
    background: #f6f4ed url(../images/nav_icons.png) no-repeat 8px -37px;
    font: italic 105%/110% "Times New Roman", Times, serif;
    color: #86856f;
    padding: 3px 4px 3px 28px;
    border: solid 1px #bebdaa;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -webkit-transition: .7s;
    -moz-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
}
#searchform #searchkeyword:focus {
    color: #333;
    width: 130px;
    background-color: #fff;
    font-style: normal;
}
#flash {
	text-align:right;
	font-style:bold;
	height: 20px;
	letter-spacing: 5px;
}
************************************************************************************
MAIN NAV
*************************************************************************************/
#windrose{
	margin:100px;
}
#main-nav {
    margin: 0;
    padding: 0 0 8px;
}
#main-nav li {
    padding: 0;
    margin: 0 0 5px;
    float: right;
    clear: both;
    list-style: none;
    position: relative;
}
#main-nav a {
    color: #CCC;
    text-decoration: none;
	font-weight:lighter;
	font-size: 14px;
    line-height: 100%;
    background: url(../images/nav_icons.png) no-repeat;
    padding: 2px 25px 2px 0px;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    -webkit-transition: background-color .7s;
    -moz-transition: background-color .7s;
    -o-transition: background-color .7s;
    transition: background-color .7s;
	    -webkit-transition: color .7s;
    -moz-transition: color .7s;
    -o-transition: color .7s;
    transition: color .7s;
}
#main-nav a:hover {
    color: #FFF;
 /*   background-color: #FFF;
	background-color: rgba(255,255,255,255);*/	
}
#main-nav .reviews a {
    background-position: right -60px;
}
#main-nav .sketches a {
    background-position: right -82px;
}
#main-nav .tutorials a {
    background-position: right -102px;
}
#main-nav .about a {
    background-position: right -18px;
}
#main-nav .contact a {
    background-position: right 4px;
}
/* main nav dropdown */
#main-nav ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
}
#main-nav ul a {
    background: none;
    padding: 0;
}
#main-nav ul a:hover {
    background: none;
}
#main-nav ul h4 {
    font: normal 12px/100% Georgia, "Times New Roman", Times, serif;
    color: #a09b60;
    text-transform: uppercase;
    margin: 0 0 4px;
    letter-spacing: .1em;
}
#main-nav ul p {
    margin: 0 0 14px;
}
#main-nav ul .categories a {
    font-size: 105%;
}
#main-nav ul .tags {
    font-size: 85%;
    line-height: 135%;
    word-wrap: break-word;
    text-transform: lowercase;
}
#main-nav ul .tags a {
    color: #7c784a;
    margin-right: 8px;
    -webkit-border-radius: 0;
}
#main-nav ul .tags a:hover {
    color: #000;
    text-decoration: none;
/*    background: #feed21;
    border-bottom: solid 1px #ded01c;*/
}

/* hover highlight */
#main-nav li:hover > a rd{
/*    background-color: #f5ec82;
    background-color: rgba(245,236,130,.8);*/
}
#main-nav li:hover > ul a {
    background-color: transparent;
}
/************************************************************************************
CONTENT
*************************************************************************************/
#contenttitle{
	margin-left:15px
}
#leftcontent {
	float:left;
	background-repeat:repeat-y;
	margin: 0px;
	height:auto;
}
#leftcontenttop {
	text-align:right;
	margin: 0px 25px 5px 0px;
	height:auto;
}
#leftcontentbody {
	float:left;
	background-repeat:repeat-y;
	margin: 0px 0px 0px 0px;
	height:auto;
}
.leftcontentpost {
	float:left;
	background-image:url(../images/review_sidelines.png);
	background-repeat:repeat-y;
	margin: -6px 0px 0px 0px;
	height:auto;
	width:500px;
}
#leftcontentbottom {
	text-align:center;
	margin: 0px 0px 5px 0px;
	height:auto;
}
************************************************************************************
BACK TO TOP
*************************************************************************************/
#back-top {
	margin-bottom:-100px;
}
#back-top a {
    color: #ada597;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: background-color .7s;
    -moz-transition: background-color .7s;
    -o-transition: background-color .7s;
    transition: background-color .7s;
}
#back-top a:hover {
    color: #615349;
}
#back-top em {
    font: normal 12px/100% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
    letter-spacing: 5px;
    float:right;
}
#back-top span {
/*    width: 28px;
    height: 28px;*/
/*    background: url(images/nav-icons.png) no-repeat -8px -577px;*/
/*    background-color: rgba(255,255,255,1);
    display: block;
    float: right;
    cursor: pointer;*/
/*    margin: -8px 0 0 6px;*/
/*    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;*/
}
#back-top a:hover span {
/*    background-color: #f5ec82;
    background-color: rgba(245,236,130,.8);*/
}


/************************************************************************************
FOOTER
*************************************************************************************/
/*#footer {
	background:#FFF;
	opacity: 0.7;
	position:relative;
	border: 1px;
	width: 800px;
	clear: both;
	margin: 25px 0px 25px 0px;
	height: 100px;
}*/
/*#footer {
	background: url(images/dashed-double.png) repeat-x left top;
	position:relative;
	background: #FFF;
	border: 1px;
	width: 800px;
	clear: both;
	margin: 25px 0px 25px 269px;
	height: auto;
	opacity: 0.5;
}
*/#bottom {
	position:relative;
	width: 800px;
	height:auto;
	clear: both;
	margin: 25px 0px 25px 180px;
	padding:0px 0px 15px 0px;
/*	opacity: 0.5;*/
}

/*<div id="test" class="rssFeed">
  <div class="rssHeader"><
    <a>... (heading) ...</a>
  </div>
  <div class="rssBody"></div>
    <ul>
      <li class="rssRow odd">
        <h4><a>... (title) ...</a></h4>
        <div>... (date) ...</div>
        <p>... (description) ...</p>
      <li>
      <li class="rssRow even">...<li>
      ...
    </ul>
  </div>
</div>*/


/*#headlinesrss {
	background:url(../images/rss_headlines.gif) no-repeat left top;
	float:left;
	padding-top:25px;
	margin-left: 32px;
	width: 245px;
}*/

.rssFeed
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	margin-top: 15px;
/*	margin: 2em 3em;*/
}
.rssFeed a
{
	color: #444;
	text-decoration: none;
}
.rssFeed a:hover
{
	color: #000;
	text-decoration: underline;
}

.rssHeader { padding: 0.2em 0; }

.rssBody { border: 1px solid #999; }
.rssBody ul { list-style: none; }
.rssBody ul, .rssRow, .rssRow h4, .rssRow p
{
	margin: 0;
	padding: 0;
}

.rssRow { padding: 0.8em; }
.rssRow h4 { font-size: 1.1em; }
.rssRow div
{
	font-size: 90%;
	color: #666;
	margin: 0.2em 0 0.4em 0;
}

/** Twitter Feed **/
/*<div id="test" class="twitterFeed">
  <div class="twitterHeader">
    <a><img... (icon) .../></a>
    <span>
      <a>... (screen name) ...</a>
    </span>
  </div>
  <div class="twitterBody"></div>
    <ul>
      <li class="twitterRow odd">
        <a><img... (icon) .../></a>
        <div class="tweetName">
          <a>... (screen name) ...</a>
        </div>
        <div class="tweetTime">... (lapsed time) ...</div>
        </div>
        <p>... (tweet) ...</p>
      </li>
      <li class="twitterRow even">...</li>
      ...
    </ul>
  </div>
</div>
*/

.twitterFeed
{
	/*background: url(../images/twitter.gif) top left no-repeat;*/
	margin-top: 0px;
	opacity:0.6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	width: 230px;
}
.twitterFeed a
{
	color: #000;
	font-weight: bold;
}
.twitterFeed a:hover, .twitterHeader a, .tweetName a { text-decoration: none; }
.twitterFeed a img { border: none; }
.twitterFeed img
{
	display:none;
	float: left;
	margin: 0 1em 1em 0;
}

.twitterHeader { 
	padding: 0.2em 0; 
}
.twitterHeader span
{
	font-weight: bold;
	font-size: 2.2em;
	display:none;
}

.twitterBody
{
	margin-top:0px;
	clear: left;
/*	border: 1px solid #ccc;*/
}
.twitterBody ul { list-style: none; }
.twitterBody ul, .twitterRow, .twitterRow h4
{
	margin: 0;
	padding: 0;
}

.twitterRow { padding: 0.5em; }
.twitterRow p { margin-left: 0px; }

.tweetName a, .tweetTime
{
	font-weight: bold;
	color: #444;
}
.tweetName
{
	display:none;
	float: left;
	font-size: 1.2em;
}
.tweetTime { text-align: right; }

.odd { background-color: #ccc; }
.even { background-color: #fff; }

/*Expansion RSS*/
#worldissaying {
	/*background:url(../images/rss_articles.gif) no-repeat left top;*/
	float:left;
	padding-top:25px;
	margin-left:0px;
	width: 500px;
	color:#FFF;
	border:1px #FFF;
}
#profile {
	font: normal 12px/100% Georgia,, "Times New Roman", Times, serif;
	float:left;
	padding:10px;
	width: 780px;
	color:#CCC;
	text-align:center;
}

#profile a{
	font: normal 12px/100% Georgia,, "Times New Roman", Times, serif;
	color:#CCC;
	text-decoration:underline;
}

#profile a:hover{
	font: normal 12px/100% Georgia,, "Times New Roman", Times, serif;
	color:#FFF;
	text-decoration:underline;
}


.collapse p {padding:0 10px 1em}

.expand a {
  display:block;
  padding:3px 10px
}
.expand h1 {
  margin-bottom:.75em; 
  font-family:georgia,'times new roman',times,serif; 
  font-size:2.5em; 
  font-weight:normal; 
  color:#FFF
}
h2.expand a{  

  background:url(../images/rss_articles.gif) no-repeat left top;
  margin-bottom:.75em; 
  font-family:georgia,'times new roman',times,serif; 
  font-size:12px; 
  font-weight:normal;
  border:1px dotted #ccc;
  color:#FFF}