@charset "UTF-8";
/* CSS Document */

/* general styling */
html,body {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	height:100%;
	width:100%;
	}

body {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:10px;
	color:#2c2c2c;
	text-align:center;
	background-color:#ffffff;
	background-image:url(images/bg2.jpg);
	background-repeat:repeat-x;
	}
	
ul {
	list-style:none;
	margin:0;
	padding:0;
	}	

a img {
	border:none;
	}	
	
a {
	color:#86ae26;
	text-decoration:none;
	}
a:link {
	color:#86ae26;
	}
a:visited {
	color:86ae26;
	}
a:hover {
	text-decoration:none;
	color:#a8db2d;
	}
a:active {
	text-decoration:none;
	}

p {
	color:#2c2c2c;
	}

h1 {
	font-size:16px;
	}		
	
h2 {
	color:#555555;
	font-size:10px;
	}			

/* main div structure */

#container {
	width:900px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
		}
#header {
	height:85px;
	margin:0px;
	padding-right:40px;
	}
	
#banner {
	height:166px;
	margin:0px 0px 0px 0px;
	}	
	
#navigation {
	height:59px;
	width:100%;
	}
	
#content {
	width:900px;
	padding-bottom:40px;
	}

#leftcol {
	float:left;
	}

#midcol {
	float:left;
	}

#rightcol {
	float:right;
	}

#footer {
	clear:both;
	width:100%;
	}
	
/* main navigation menu */

.glossymenu {
	position:relative;
	padding:0px 0px 0px 34px;
	margin:12px auto 0px auto;
/*	background:url(images/menu_bg.jpg) repeat-x; /*tab background image path*/
	height:33px;
	list-style:none;
	}

.glossymenu li {
	float:left;
	}

.glossymenu li a {
	float:left;
	display:block;
	color:#5c5c5c;
	text-decoration:none;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight:normal;
	padding-left:16px; /*Padding to accomodate left tab image. Do not change*/
	height:33px;
	line-height:33px;
	text-align:center;
	cursor:pointer;	
	}

.glossymenu li a b {
	float:left;
	display:block;
	padding:0px 24px 0px 8px; /*Padding of menu items*/
	}

.glossymenu li.current a, .glossymenu li a:hover {
	color:#ffffff;
	background:url(images/menu_hover_left.jpg) no-repeat left; /*path to left tab image*/
	}

.glossymenu li.current a b, .glossymenu li a:hover b {
	color:#ffffff;
	background:url(images/menu_hover_right.jpg) no-repeat right top; /*path to right tab image (so the tab size can adjust to length of text)*/
	}
	
/* sub-elements styling, color, positioning, images */	

#container {
	text-align:left;
	}	

#tagline {
	text-align:right;
	float:right;
	margin-top:15px;
	}
	
#logoman {
	float:left;
	margin:14px 0px 0px 25px;
	height:166px;
	width:180px;
	background-image:url(images/logoman.gif);
	background-repeat:no-repeat;
	vertical-align:bottom;
	}
		
#logo {
	float:left;
	margin-top:70px;
	height:77px;
	width:320px;
	background-image:url(images/logo.jpg);
	background-repeat:no-repeat;
	}	

#orbs {
	float:right;
	height:150px;
	width:500px;
	margin-top:5px;
	}	
	
#footer {
	background:#ffffff;
	color:#ffffff;
	}

#footer p {
	margin:0px;
	padding:5px 10px;
	}
	
.together {
	line-height:16px;
	color:#86ae26;
	text-align:left;
	font-weight:bold;
	}
	
/* styles for sub pages */

/* questionaire page */
#questionaire {
	margin:0px 0px 0px 58px;
	width: 800px;
	}
	
.cssqform {
	width: 800px;
	}
	
.cssqform p {
	clear: left;
	margin: 0px;
	padding: 5px 0px 8px 0px;
	padding-left: 175px; /*width of left column containing the label elements*/
	/*border-top: 1px dashed gray;*/
	height: 1%;
	}

.cssqform label {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight: normal;
	float: left;
	margin-left: -175px; /*width of left column*/
	width: 250px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
	}

.cssqform input[type="text"] { /*width of text boxes. IE6 does not understand this attribute*/
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	width: 400px;
	margin-left:30px;
	}
	
.cssqform input[type="submit"] { /*width of text boxes. IE6 does not understand this attribute*/
	float: left;
	margin-right:20px;
	}
	
.cssqform input[type="reset"] { /*width of text boxes. IE6 does not understand this attribute*/
	float: left;
	margin-right:6px;
	}

.cssqform textarea {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	width: 400px;
	margin-left:30px;
	}

.media {
	margin-left: 30px;
	}
	
.qthreepxfix {
	margin-left: 30px;
	}

/* contact page */
#contact {
	margin:30px 0px 0px 58px;
	}
	
#c_rightcol {
	float:right;
	text-align:left;
	width:150px;
	margin-top:110px;
	margin-right:150px;
	}

#c_rightcol p{
	margin-top:0em;
	margin-bottom:0em;
	}

.cssform p {
	width: 300px;
	clear: left;
	margin: 0px;
	padding: 5px 0px 8px 0px;
	padding-left: 155px; /*width of left column containing the label elements*/
	/*border-top: 1px dashed gray;*/
	height: 1%;
	}

.cssform label {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight: bold;
	float: left;
	margin-left: -155px; /*width of left column*/
	width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
	}

.cssform input[type="text"] { /*width of text boxes. IE6 does not understand this attribute*/
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	width: 250px;
	}

.cssform textarea {
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	width: 250px;
	height: 100px;
	}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

.threepxfix{
	margin-left: 3px;
	}

/* extras page */

.extras label {
font-size:10px;
}

.extras h2 {
color:#555555;
font-size:14px;
}

/* portfolio page */

#gallery {
	margin:20px auto;
	}

/* resources page */
	
#resources {
	text-align:center;
	font-size:18px;
	margin-top:50px;
	margin-bottom:30px;
	padding-right:130px;
	}
		
#re_leftcol {
	float:left;
	width:300px;
	}

#re_midcol {
	float:left;
	width:300px;

	}

#re_rightcol {
	float:right;
	width:300px;
	}
	
.re_links li a{
	color:#8c8c8c;
	line-height:2.0;
	font-size:12px;
	}	
		
.re_links li a:hover{
	color:#86ae26;
	line-height:2.0;
	font-size:12px;
	}	
		
/* faq page */
	
#faq {
	text-align:left;
	margin-top:40px;
	margin-bottom:30px;
	padding-right:130px;
	}

#faq p {
	font-size:1.1em;
	line-height:1.4em;
	}
	
#faq .q {
	font-size:1.2em;
	font-weight:bold;
	color:#86ae26;
	padding:6px 0px 0px 0px;
	}
	
#f_leftcol {
	float:left;
	width:300px;
	}

#f_midcol {
	float:left;
	width:300px;

	}

#f_rightcol {
	float:right;
	width:300px;
	}
	
.f_links li a{
	color:#8c8c8c;
	line-height:2.0;
	font-size:12px;
	}	
		
.f_links li a:hover{
	color:#86ae26;
	line-height:2.0;
	font-size:12px;
	}	
	
/* prices page */
	
#prices {
	text-align:left;
	color:#555555;
	margin-top:10px;
	margin-bottom:30px;
	padding-right:130px;
	line-height:16px;
	}	
			
#p_leftcol {
	margin-right:50px;
	float:left;
	width:270px;
	}
	
#p_leftcol h1{	
	margin-top:0em;
	color:#86ae26;
	}

#p_leftcol h2{
	font-size:10px;
	margin-bottom:0em;
	}

#p_leftcol h3{
	text-align:right;
	font-size:20px;
	line-height:5px;
	margin-top:1em;	
	}

#p_leftcol h4{
	font-size:16px;
	margin-bottom:0em;
	margin-top:0em;
	}	

#p_leftcol p{
	margin-top:0.5em;
	}

#p_leftcol ul {
	list-style:square;
	margin:0;
	padding-left:20px;
	}
		
#p_leftcol li {
	margin:5px 0 0 0;
}
#p_midcol {
	margin-right:30px;
	float:left;
	width:270px;
	}
	
#p_midcol h1{	
	margin-top:0em;
	font-size:16px;
	color:#86ae26;
	}

#p_midcol h2{
	font-size:10px;
	margin-bottom:0em;
	}

#p_midcol h3{
	text-align:right;
	font-size:20px;
	line-height:5px;
	margin-top:1em;	
	}
	
#p_midcol h4{
	font-size:16px;
	margin-bottom:0em;
	margin-top:0em;
	}	

#p_midcol p{
	margin-top:0.5em;
	}
	
#p_midcol ul {
	list-style:square;
	margin:0;
	padding-left:20px;
	}
		
#p_midcol li {
	margin:5px 0 0 0;
	}
	
#p_rightcol {
	float:right;
	width:250px;
	padding-left:25px;
	}
	
#p_rightcol {
	}

#p_rightcol h2{
	font-size:10px;
	margin-bottom:0em;
	color:#86ae26;
	}
	
#p_rightcol p{
	margin-top:1em;
	}
	
#p_rightcol ul {
	list-style:square;
	margin:0;
	padding-left:20px;
	}
		
#p_rightcol li {
	margin:5px 0 0 0;
	}	

#p_footer {
	float:left;
	}	

#p_footer h4{
	font-size:12px;
	line-height:100%;
	}

.p_links li a{
	color:#8c8c8c;
	line-height:2.0;
	font-size:12px;
	}	
		
.p_links li a:hover{
	color:#86ae26;
	line-height:2.0;
	font-size:12px;
	}
	
.sml_h3{
	font-size:10px;
	text-align:right;
	font-weight:lighter;
	}		
		
hr {
	width: 100%;
	color:#6c6c6c;
	height:1px;
	text-align: left;/*this will align it for IE*/
	margin: 0 auto 0 0; /*this will align it left for Mozilla*/
	}	
	
/* inspiration page */

#insp_content {
	width:900px;
	text-align:center;
	}

#inspiration {
	clear:both;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:30px;
	color:#7c7c7c;
	padding:30px 0px 30px 60px;
	}

#insp_leftcol {
	float:left;
	width:280px;
	margin-top:50px;
	text-align:left;
	}
		
.leftalign {
	text-align:left;
	}

#insp_rightcol {
	float:right;
	width:600px;
	padding:28px 0x 0px 0px;
	}
	
.green {
	color:#86ae26;
	}	

/* support page */
	
#support {
	font-size:18px;
	margin:20px 0px 20px 200px;
	float:right;
	}
	
/* about page */
	
#about {
	margin:30px 0px 20px 230px;
	width:580px;
	}

	
#pageflip {
	width:600px;
	height:523px;
	}
	
#tutorials {
margin-top:30px;
}

.greylink {
color:#555555;
}