/*
Theme Name: Treethink
Theme URI: http://treethink.com
Description: Wordpress theme for Treethink.
Version: 2.0
Author: Wade Ouellet
Author URI: http://treethink.com
Tags: blue, green, beige, dynamic width, fixed height, photographic, overlays
*/

/* the following Reset CSS was modified from Eric Meyer's v1.0 | 20080212 */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, abbr, acronym, address,
em, img, strong,
dl, dt, dd, ol, ul, li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}

body {
line-height: 1;
}

/* end of Eric Meyer's Reset CSS */

body{
	background: url('images/background.jpg');
	font-family: Arial, Verdana, sans-serif;
	font-size: 0.9em;
	color: #667070;
	line-height: 1.3em;
}

h1{
	position: absolute;
	top: 15px;
	left: 40px;
	background: url(images/logo.png);
	width: 254px;
	height: 103px;
	text-indent: -2000em;
	z-index: 6;
}

h1 a{
	display: block;
	width: 254px;
	height: 103px;
}

a{
	color: #25c8db;
	background: inherit;
	text-decoration: none;
}

a:hover{
	color: #ffffff;
	background: inherit;
}

p{
	padding: 0 0 15px 0;
}

#wrapper{
	width: 100%;
	min-height: 100%;
	position: absolute;
	overflow: hidden;
}

#nav li{
	text-indent: -2000em;
	width: 100px;
	height: 100px;
}

#nav ul a{
	margin: 0 0 0 50%;
	display: block;
	height: 150px;
	position: absolute;
	z-index: 7;
}

li#services-link a{
	bottom: 200px;
	left: -500px;
	background: url(images/nav_services.png) no-repeat;
	width: 300px;
}

li#portfolio-link a{
	bottom: 360px;
	left: -365px;
	background: url(images/nav_portfolio.png)  no-repeat;
	width: 250px;
}

li#contact-link a{
	bottom: 330px;
	left: 150px;
	background: url(images/nav_contact.png)  no-repeat;
	width: 250px;
}

#ticker{
	width: 450px;
	height: 140px;
	font-size: 0.95em;
	background: #4b4b4b url(images/twitter-bird.png) bottom right no-repeat;
	color: #ffffff;
	position: absolute;
	right: -450px;
	bottom: 200px;
	z-index: 5;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-radius-topleft: 15px;
	-webkit-border-radius-bottomleft: 15px;
	-khtml-border-radius-topleft: 15px;
	-khtml-border-radius-bottomleft: 15px;
}

#ticker h3{
	padding: 0 0 10px 0;
}

.ticker-box{
	width: 400px;
	height: 100px;
	padding: 20px 25px;
	position: absolute;
	top: 0;
	left: 0;
}

ul.icons {
	margin: 10px auto 0 auto; 
	padding: 0;
}

ul.icons li {
	float: left;
	margin: 0 10px 0 0; 
	padding: 0;
	text-align: center;
	display: inline;
	position: relative;
	width: 20px;
	height: 20px;
}

ul.icons li a.thumb {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

ul.icons li span {
	width: 20px;
	height: 20px;
	overflow: hidden;
	display: block;
}

ul.icons li a {
	text-decoration: none; 
	color: #777; 
	display: block;
}

#footer{
	width: 100%;
	height: 42px;
	background: url(images/footer-overlay.png);
	color: #ffffff;
	font-size: 0.95em;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 4;
	line-height: 42px;
	text-transform: lowercase;
}

#footer li{
	display: inline;
}

#footer-left{
	float: left;
	width: 80%-30px;
	padding: 0 0 0 30px;
}

#footer-right{
	float: right;
	text-align: right;
	width: 20%-25px;
	padding: 0 25px 0 0;
}

#foreground{
	width: 6760px;
	height: 95px;
	background: url('images/foreground.png');
	position: absolute;
	bottom: 0;
	left: -1500px;
	margin: 0 0 0 50%;
	z-index: 3;
}

#tree{
	width: 365px;
	height: 400px;
	background: url(images/tree.png);
	position: absolute;
	bottom: 80px;
	margin: 0 0 0 50%;
	left: -182px;
	z-index: 2;
}
	
#clouds{
	width: 1280px;
	height: 800px;
	position: absolute;
	bottom: 0;
	left: -700px;
	z-index: 1;
	margin: 0 0 0 50%;
	background: url(images/clouds.png) no-repeat;
}

.clear{
	clear: both;
}

/* Box */

#overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(images/overlay.png) 0 0 repeat;
	z-index: 999;
}

#close{
	position:absolute; 
	top: 20px; 
	right:0;
	height: 45px;
	width: 60px;
	text-align: center;
	z-index: 1002;
	background: #ffffff;
	color: #777777;
	text-transform: lowercase;
	line-height: 45px;
	cursor: pointer;
	display: block;
	font-size: 1.1em;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-radius-topleft: 5px;
	z-index: 1000;
}

#close:hover{
	background: #e0e0e0;
	color: #333333;
}

.post-edit-link{
	position: absolute;
	top: 80px;
	right: 0;
	height: 45px;
	z-index: 1002;
	background: #ffffff;
	color: #777777;
	text-transform: lowercase;
	line-height: 45px;
	text-decoration: none;
	width: 60px;
	text-align: center;
	display: block;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-radius-topleft: 5px;
}

.post-edit-link:hover{
	background: #e0e0e0;
	color: #333333;
}

/* Services */

#services{
	width: 960px;
	height: 490px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -245px 0 0 -480px;
}

#services h2{
	width: 100%-20px;
	background: #a0a0a0;
	color: #e5e5e5;
	font-size: 1.75em;
	padding: 20px;
}

#services-main{
	position: absolute;
	width: 930px;
	height: 410px;
	border: 15px solid #000000;
	margin: 0 0 20px 0;
	overflow: hidden;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	background: #e5e5e5;
	color: #222222;
}

#services .block{
	position: absolute;
	width: 930px;
	height: 410px;
}

#services .block p{
	padding: 20px;
	width: 890px;
}

#services .block ul{
	padding: 0 20px 20px 20px;
	width: 890px;
}

#services .block li{
	list-style: inside circle;
}

/* Portfolio */

#portfolio{
	width: 960px;
	height: 490px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -245px 0 0 -480px;
}

#portfolio-main{
	position: absolute;
	width: 930px;
	height: 410px;
	border: 15px solid #000000;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px;
	background: #000000;
	color: #c0c0c0;
}

#portfolio-main .desc{
	width: 191px;
	height: 160px;
	position: absolute;
	background: url(images/portfolio-overlay.png);
	font-size: 0.9em;
	padding: 15px;
	bottom: -190px;
}

#portfolio-main .desc p{
	margin: 15px 0 0 0;
}

#thumbs .column h2{
	color: #ffffff;
	background: inherit;
	text-decoration: underline;
	font-weight: normal;
	font-size: 1.2em;
}

#thumbs .column a{
	display: block;
	width: 100%;
	height: 100%;
	color: #c0c0c0;
	text-decoration: none;
}

/* Portfolio Items */

#portfolio-item{
	width: 960px;
	height: 490px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -245px 0 0 -480px;
}

#portfolio-item h2{
	font-size: 1.3em;
	color: #ffffff;
	background: inherit;
	text-decoration: underline;
	font-weight: normal;
	padding: 0 0 15px 0;
}

#portfolio-item a{
	color: #ffffff;
	background: inherit;
}

#portfolio-item #date{
	font-size: 0.9em;
}

#portfolio-item-main{
	position: absolute;
	width: 930px;
	height: 410px;
	border: 15px solid #000000;
	margin: 0 0 20px 0;
	overflow: hidden;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px;
}

#portfolio-info{
	width: 900px;
	position: absolute;
	background: url(images/portfolio-overlay.png);
	height: 380px;
	color: #c0c0c0;
	bottom: -410px;
	padding: 15px;
}

.portfolio-button{
	background: #000000;
	padding: 7px 15px;
	text-decoration: none;
	color: #999999;
	margin: 28px 0 0 5px;
	float: right;
}

.portfolio-button:hover{
	background: #666666;
	color: #ffffff;
}

#main-buttons{
	height: 30px;
	width: 560px;
	top: 460px;
	right: 0;
	position: absolute;
	z-index: 1;
	text-align: right;
}

#main-buttons .banner-button{
	background: #000000;
	padding: 7px 15px;
	text-decoration: none;
	color: #999999;
}

#main-buttons .banner-button:hover{
	background: #666666;
	color: #ffffff;
}

#pic-buttons{
	position: absolute;
	top: 460px;
	width: 930px;
	left: 0;
}

#pic-buttons .banner-button{
	background: #000000;
	width: 24px;
	height: 24px;
	text-decoration: none;
	color: #333333;
	-webkit-border-radius: 12px; 
	-moz-border-radius: 12px;
	-khtml-border-radius: 12px;
	text-indent: -2000em;
	margin: 0 8px 0 0;
	display: block;
	float: left;
}


#pic-buttons .banner-button_active{
	background: #666666;
	color: #000000;
}

#pic-buttons .banner-button:hover{
	background: #888888;
	color: #ffffff;
}

/* Contact */

#contact{
	width: 960px;
	height: 490px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -245px 0 0 -480px;
}

#contact-main{
	position: absolute;
	width: 930px;
	height: 410px;
	border: 15px solid #000000;
	margin: 0 0 20px 0;
	overflow: hidden;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px;
	background: #e5e5e5;
	color: #222222;
}

#contact-main a{
	color: #e5e5e5;
	background: inherit;
	text-decoration: none;
}

#contact-main a:hover{
	color: #ffffff;
	background: inherit;
}

#contact-column-left{
	width: 330px;
	float: left;
	padding: 30px 0 0 30px;
}

#contact-column-right{
	width: 500px;
	float: left;
	padding: 30px 30px 0 0;
}

#contact-info-page{
	width: 890px;
	height: 60px;
	background: #a0a0a0;
	padding: 30px;
	position: absolute;
	bottom: 0;
	margin: 14px 0 0 0;
}

.contact-info-column{
	width: 295px;
	float: left;
}

.screenReader {
	left: -9999px; 
	position: absolute; 
	top: -9999px;
}

.thanks {
	background: #ddfdd7; 
	border: 1px solid #4ba43c; 
	padding:10px;
	width: 865px;
	margin: 30px;
	color: #4ba43c;
	z-index: 1004;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 35px 0 0 -445px;
}

.error {
	color: #ff0000;
	border: 1px solid #ff0000;
	padding:10px;
	width: 865px;
	background: #ffcaca;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 35px 0 0 -445px;
	z-index: 1003;
}

ol.forms {
	float: left; 
	list-style: none; 
	margin: 0;
}

ol.forms li {  
	margin-bottom: 18px; 
}

ol.forms label {
	cursor: pointer;
	display: block;
	float: left;
	padding-right: 20px;
	width: 70px;
}

ol.forms input, ol.forms textarea {
	border: 1px solid #7E8AA2;
	border-radius: 3px;
	font: inherit;
	-moz-border-radius: 5px;
	padding: 2px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
}

ol.forms textarea {
	width: 540px;
	height: 190px; 
}

ol.forms li .error {
	font-size: 12px; 
	margin-left: 20px;
}

ol.forms li.textarea .error {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
}

ol.forms li.screenReader {
	margin-bottom: 0;
}

ol.forms li.buttons button {
	background: #a0a0a0;
	border: none;
	color: #000;
	cursor: pointer;
	overflow: hidden;
	padding: 5px;
	text-transform: lowercase;
	font-size: 1em;
	width: auto;
	font-family: Arial Rounded, Arial, Verdana, sans-serif;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
}

ol.forms li.buttons, ol.forms li.inline {
	float: right; 
	width: 460px;
}

ol.forms li.inline input {
	width: auto;
}

ol.forms li.inline label {
	display: inline; 
	float: none; 
	width: auto;
}