/***********************************************************************************/
/*   Design:  Aaron Snowberger Homepage - Space Theme                              */
/*   Author:  Aaron Snowberger (jekkilekki@gmail.com)                              */
/*   Date:    March 13, 2009                                                       */
/*---------------------------------------------------------------------------------*/
/*   Recommended CSS-Editor: TopStyle Lite 3.10 (Freeware)                         */
/*   http://www.newsgator.com/download/products/ts3lite.exe                        */
/* 	 Recommended HTML-Editor: (Windows) Notepad++ (Freeware)                       */
/*	 http://sourceforge.net/project/showfiles.php?group_id=95717&package_id=102072 */
/* 	 Recommended HTML-Editor: (MAC) TextWrangler (Freeware)                        */
/*	 http://birch.barebones.com/TextWrangler_2.3.dmg							   */
/*---------------------------------------------------------------------------------*/
/*   You can use this stylesheet any way you want!                                 */
/*   Check out my blog: http://jekkilekki.wordpress.com                            */
/***********************************************************************************/


/*************************/
/* SECTION 1 - MAIN BODY */
/*************************/

/*----------------------------*/
/* 1.1 - Whole Page Wrap      */
/*----------------------------*/
body {
	color: #464646;
	background: #000000;
	font-family: Verdana, sans-serif;
	font-size: 0.875em; /*12pt font*/
	margin: 0 auto;
	padding: 0;
	height: 100%;

}
html {
	height: 100%;
	margin-bottom: 0;
}

#wrapper {
	width: 100%;
	background: url(../img/contentbody.jpg) #808080 repeat-y top center;
	overflow-x: hidden;
	margin: 0px auto 0px auto;
	padding: 0;
}
#headerWrapper, #contentWrapper, #footerWrapper {
	width: 960px;
	margin: 0 auto;
	padding: 0;
}


/*----------------------------------*/
/* 1.2 - Main Wrappers              */
/*----------------------------------*/
#header {
	background: url(../img/space-header.jpg) #000000 no-repeat top center;
	height: 330px;
	margin: 0px auto 0px auto;
	padding: 0;
	width: 100%;
}
#headersmall {
	background: url(../img/space-header.jpg) #000000 no-repeat bottom center;
	height: 275px;
	margin: 0px auto 0px auto;
	padding: 0;
	width: 100%;
	overflow: hidden;
}
#headermin {
	background: url(../img/space-header.jpg) transparent no-repeat bottom center;
	height: 175px;
	margin: 0px auto 0px auto;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}
#logo {
	width: 400px;
	float: left;
	position: relative;
	margin: 30px 0 0 30px;
	padding: 0;
	z-index: 0;
	display: inline;
}
#logosmall {
	width: 300px;
	float: left;
	position: relative;
	margin: 30px 0 10px 30px;
	padding: 0;
	z-index: 0;
	display: inline;
}
#logomin {
	width: 180px;
	float: left;
	position: relative;
	margin: 35px 100px 10px 30px;
	padding: 0;
	z-index: 0;
	display: inline;
}
#styles {
	position: relative;
	width: 215px;
	float: right;
	margin: 5px 0px 0 0;
	display: inline;
}
#stylesmin {
	position: relative;
	width: 215px;
	float: right;
	margin: 5px 0px 0 0;
	display: inline;
}
#styles ul, #stylesmin ul{
	list-style: none;
}
#styles li, #stylesmin li{
	float: left;
	display: inline;
	margin: 0 3px 0 3px;
	padding: 0;
}
#styles img, #stylesmin img{
	border: solid 1px;
	width: 25px;
}
#styles img a:hover, #styles img a:hover{
	border: solid 1px white;
}
#sidebar {
	width: 220px;
	float: right;
	margin: 0;
	padding: 0;
	display: inline;
}
/* finished to here -> continue at home*/
#topgray {
	margin: 0px 0 0 0;
	padding: 0;
	position: relative;
}
.hire {
	margin: 10px;
	padding: 0;
}
.hire ol li {
	display: block;
	margin: 20px;
	font-size: 0.875em;
}
input {
	width: 300px;
	float: left;
}
label {
	float: left;
	width: 150px;
	display: block;
}
textarea {
	width: 300px;
	height: 150px;
}
#topgraymin {
	margin: -57px 0 0 0;
	padding: 0;
	position: relative;
	height: 100%;
}
#topgray a, #topgraymin a{
	color: #464646;
	font-size: 1.25em;
	text-decoration: none;
	float: right;
	display: inline;
	margin: -8px 10px 0 10px;
}
#intro {
	margin: 0px 10px 10px 40px;
	padding: 0;
}
.quote {
	background: url(../img/quotes.jpg) white no-repeat top left;
	margin: 0px 10px 10px 25px;
}
.quote img {
	float: right;
	display: inline;
	margin: -70px 0 0 0;
	padding: 0;
	position: relative;
}
.quote p {
	width: 530px;
	margin: 0;
	padding-left: 25px;
}
#showcase {
	background: url(../img/content-backing.jpg) white repeat-x top left;
	border: 1px solid #c2c2c2;
	width: 705px;
	height: 250px;
	margin: 18px;
	padding: 0;
}
.showcase-inside {
	border: 1px solid white;
	width: 703px;
	height: 247px;
	margin: 0px;
	padding: 0;
}
.showbox {
	background: url(../img/content-backing.jpg) white repeat-x top left;
	border: 1px solid #c2c2c2;
	width: 705px;
	margin: 18px;
	padding: 0;
}
.showbox-inside {
	border: 1px solid white;
	width: 703px;
	margin: 0px;
	padding: 0;
}
.showbox2 {
	background: url(../img/content-backing.jpg) white repeat-x top left;
	border: 0px solid;
	width: 705px;
	margin: 18px;
	padding: 0;
}
.showbox-gradient {
	background: url(../img/content-backing.jpg) white repeat-x top left;
	border: 1px solid #c2c2c2;
	width: 705px;
	margin: 18px;
	padding-top: 5px;
}
.showbox-gradient-inside {
	border: 1px solid white;
	width: 703px;
	margin: -5px 0 0 0px;
	padding: 0px;
}
.tv {
	width: 274px;
	margin: 20px 0 0 200px;
}
.item  {
	float: left;
	display: inline;
	width: 300px;
}
.item img {
	float: left;
	margin: 30px 0 0 30px;
	padding: 0;
	display: inline;
}
.item p {
	font-weight: bold;
	font-size: 0.7em;
	line-height: 1.75em;
	float: left;
	margin: 30px 0 0 20px;
	padding: 0;
	display: inline;
}
.item p a {
	color: #440e62;
	text-decoration: none;
}
.item p a:hover {
	color: #8560a8;
	text-decoration: underline;
}
.itemclear {
	clear: left;
}
.item h6 {
	margin: -20px 0 0 35px;
	padding: 0;
	font-weight: lighter;
	z-index: 99;
}
.item a {
	color: #8560a8;
}
.item a:hover {
	color: #440e62;
}
.showcasebutton {
	float: left;
	margin: 0 30px 0 0;
	padding: 0;
	display: inline;
}
.portfoliobutton  {
	float: right;
	display: inline;
}
.fullwidth {
	margin: 20px;
}
.fullwidthport {
	clear: both;
	margin: 0px 15px 20px 15px;
}
.fullwidthport ol {
	font-size: 0.875em;
	line-height: 1.75em;
	margin: 0 10px 0 10px;
}
.leftcolumn{
	margin: 0px;
	float: left;
	width: 330px;
	display: inline;
}
.leftcolumn h3 {
	margin-left: 15px;
}
.rightcolumn {
	margin: 0px;
	float: right;
	width: 330px;
	display: inline;
}
.rightcolumn h3 {
	margin-left: 15px;
}
.leftcolumn ul, .rightcolumn ul, .leftcolumn ol, .rightcolumn ol {
	font-size: 0.875em;
	line-height: 1.75em;
}
.contactleft {
	width: 285px;
	float: left;
	margin: 0 15px;
	padding: 15px;
	text-align: right;
	border-right: 2px solid #c2c2c2;
	display: inline;
}
.contactright {
	width: 290px;
	float: left;
	display: inline;
	margin: 0px;
	margin-top: -80px;
}
#maincontent {
	width: 720px;
	margin: 0px;
	padding: 0;
	float: left;
	display: inline;
}
#bottomcontent {
	width: 960px;
	margin: 0 0 0 25px;
}
.verticaldivider {
	float: left;
	width: 2px;
	height: 350px;
	margin: 50px 0 0px 10px;
	border-right: 2px solid #e1e1e1;
	display: inline;
}
.verticaldividersmall {
	float: left;
	width: 2px;
	height: 100px;
	margin: 40px 0 0px 10px;
	border-right: 2px solid #e1e1e1;
	display: inline;
}
.clear {
	clear: both;
}
.linksbox {
	width: 230px;
	float: left;
	display: inline;
}
.linksbox ul {
	list-style: none;
	margin-left: -15px;
}
.linksbox li {
	line-height: 1.5em;
	font-size: 0.875em;
}
.linksbox a {
	color: #464646;
}
.me {
	margin: -50px 0 0 15px;
	position: relative;
}
.memin {
	margin: -40px 0 10px 55px;
	width: 100px;
	position: relative;
}
.iconsbox, .box{
	list-style: none;
	width: 200px;
	margin: 0 auto;
	padding: 0;
	clear: both;
	border-bottom: 2px solid #e1e1e1;
}
.iconsbox p {
	margin-top: -15px;
}
.iconsbox ul {
	margin-left: -30px;
}
.iconsbox li {
	float: left;
	display: block;
	margin: 0 5px 20px 0px;
	padding: 0;
}
.box li {
	float: left;
	display: inline;
	margin: 0 0 0 10px;
	padding: 0 0 0 25px;
	line-height: 1.75em;
	font-size: 0.875em;
	width: 190px;
}
.box ul {
	margin-left: -50px;
}
.box a {
	color: #555555;
}
.box a:hover {
	background-color: #a186be;
}
.box strong {
	font-weight: bold;
}
.first a {
	text-decoration: none;
}
.first {
	background: url(../img/purplestar.png) transparent no-repeat top left;
	margin: 0;
	padding: 0 0 0 25px;
	position: relative;
	height: 100%;
}
#stats {
	background-color: white;
	float: right;
	display: inline;
	margin: 200px 20px 0 30px;
	position: absolute;
	width: 160px;
}
#statsinside {
	background-color: white;
	border: 1px solid #c2c2c2;
	width: 160px;
	height: 250px;
	padding: 15px;
}
#statsinside p {
	margin-left: 10px;
}
#stats h6 {
	background: url(../img/portfoliostats-reflection.jpg) white no-repeat top left;
	width: 100%;
	height: 100px;
	margin: 2px 0 0 0px;
	padding: 15px 15px 0px 15px;
	font-weight: lighter;
}
#stats a {
	color: #8560a8;
}
#portimg {
	float: left;
	display: inline;
	margin-left: 40px;
	margin-top: 20px;
	position: relative;
}
#portimg h1 {
	position: absolute;
	margin-left: -15px;
}
#portimg img {
	position: relative;
	width: 400px;
	margin-top: 50px;
}
#twitterbox {
	width: 200px;
	margin: 0 auto;
	border: 1px solid #c2c2c2;
}
#twitterbox h3 {
	margin: 10px 0 0 10px;
}
#twitter_update_list {
	list-style: none;
	margin-left: -20px;
	margin-right: 5px;
	font-size: 0.875em;
	line-height: 1.5em;
}
#twitter-link {
	font-size: 0.7em;
	margin: 0 5px 5px 0;
}
	
/*************************************************/
/* SECTION 3 - FONT STYLES & GENERAL PROPERTIES  */
/*************************************************/
p {
	font-family: Verdana, sans-serif;
	font-size: 0.875em; /*12pt font*/
	color: #464646;
	margin: 10px 10px 10px 30px;
	line-height: 1.75em;
}
h1 {
	font-family: "Bookman Old Style", "Times New Roman", serif;
	font-size: 2em; /* 36pt should be*/
	color: #440e62;
	margin: 0px 0 0 5px;
	font-weight: lighter;
}
h2 {
	font-family: "Bookman Old Style", "Times New Roman", serif;
	font-size: 1.5em; /*24pt font should be*/
	color: #440e62;
	margin: 0 0 0 5px;
	padding: 0;
	font-weight: lighter;
}
h3 {
	font-family: "Bookman Old Style", "Times New Roman", serif;
	font-size: 1.25em; /*18pt font should be*/
	color: #440e62;
	margin: 0 0 0 5px;
	padding: 0;
	font-weight: lighter;
}
h4 { /* footer */
	font-family: Verdana, sans-serif;
	font-size: 1em; /*14pt font should be*/
	color: #662d91;
	margin: 10px 0 0 10px;
	padding: 0;
	font-weight: lighter;
}
h5 { /*orange/portfolio */
	font-family: Verdana, sans-serif;
	font-size: 1em; /*14pt font should be*/
	color: #ff6600;
	margin: 0;
	padding: 0;
}
h6 { /*small purple links */
	font-family: Verdana, sans-serif;
	font-size: 0.7em; /*10pt font should be*/
	color: #8560a8;
	margin: 0;
	padding: 0;
}
a {
	color: #ff6600;
	text-decoration: underline;
	margin: 0;
	padding: 0;
}
a:hover {
	text-decoration: none;
	margin: 0;
	padding: 0;
}
img {
	border: none;
}


/*****************************/
/* SECTION 4 - HEADER        */
/*****************************/



/*****************************/
/* SECTION 5 - MENU STYLES   */
/*****************************/

/*---------------------------*/
/* 5.1 - Top menu style      */
/*---------------------------*/
#menubar {
	width:100%;
	height: 60px;
	background: url(../img/topmenu.jpg) #000000 repeat-x top left;
	margin: -10px 0 0 0;
	padding: 0;
}
#menu {
	margin:-48px auto -10px auto;
	position: absolute;
}
#menu ul {
	margin: 0 0 0 10px;
	padding: 0;
	list-style:none;
}
#menu li {
	float: left;
	display: inline;
	margin: 0 15px 0 15px;
	padding: 0;
}
#menu a {
	margin: 0;
	padding: 0;
	font-family: "Bookman Old Style", "Times New Roman", serif;
	font-size: 1.5em;
	color: #464646;
	display: block;
	text-decoration: none;
}
#menu a span {
	margin: -3px 0 0 2px;
	padding: 0;
	font-family: Arial, sans-serif;
	font-size: 50%;
	display: block;
	text-decoration: none;
}   
#menu a:hover{
	padding:0;
	color: white;
}


/*-----------------------------------*/
/* 4.2 - Left column menu style      */
/*-----------------------------------*/



/*******************************/
/* SECTION 6 - SPACE GALLERY   */
/*******************************/

table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

.navigationTabs {
	height: 23px;
	line-height: 23px;
	border-bottom: 1px solid #ccc;
	background-color: white;
	margin: 0;
	padding: 0;
}
.navigationTabs li {
	float: left;
	height: 23px;
	line-height: 23px;
	padding-right: 3px;
}
.navigationTabs li a{
	float: left;
	display: block;
	height: 23px;
	line-height: 23px;
	padding: 0 10px;
	overflow: hidden;
	color: #a186be;
	background-color: #eee;
	position: relative;
	text-decoration: none;
}
.navigationTabs li a:hover {
	background-color: #e1e1e1;
	color: #440e62;
}
.navigationTabs li a.active {
	background-color: #e1e1e1;
	border: 1px solid #ccc;
	border-bottom: 1px solid #e1e1e1;
	color: #440e62;
}
.navigationTabs-inside li a.active {
	border: 1px solid white;
	border-bottom: 1px solid #e1e1e1;
	margin: -1px;
}
.tabsContent {
	border: 1px solid #ccc;
	border-top: 0px solid;
	width: 703px;
	overflow: hidden;
}
.tabsContent-inside {
	border: 1px solid white;
	width: 701px;
	overflow: hidden;
}
.tab {
	padding: 16px;
	display: none;
}
.tab h2 {
	font-weight: normal;
	font-size: 16px;
}
.tab h3 {
	margin: -30px 0 15px 0;
}
.tabpara {
	border-bottom: 2px solid #c2c2c2;
	margin: 0px 10px 50px 10px;
	padding: 0;
}
.tabp {
	margin: 0px;
	float: right;
	display: inline;
	width: 150px;
	font-size: 0.75em;
	/*line-height: 1.75em;*/
}
.tab ul {
	margin-top: 16px;
	list-style: disc;
}
.tab li {
	margin: 10px 0 0 35px;
}
.tab a {
	text-decoration: none;
}
.tab strong {
	font-weight: bold;
}
.tab pre {
	font-size: 11px;
	margin-top: 20px;
	width: 668px;
	overflow: auto;
	clear: both;
}
.tab table {
	width: 100%;
}
.tab table td {
	padding: 6px 10px 6px 0;
	vertical-align: top;
}
.tab dt {
	margin-top: 16px;
}
.tab img {
	margin-left: 10px;
}

/***************************************/
/* SECTION 7 - PAGE SPECIFIC STYLES    */
/***************************************/



/*****************************/
/* SECTION 6 - FOOTER   */
/*****************************/
#footer {
	background: url(../img/bottombig.png) transparent no-repeat bottom center;
	height: 600px;
	margin: -350px auto 0 auto;
	padding: 0;
	width: 100%;
}
#footer a {
	color: #959595;
}
#footer a:hover {
	color: #464646;
}
#footer h2 {
	color: #959595; 
	text-decoration: none; 
	font-size: 2.25em;
	font-family: Verdana, sans-serif;
	float: left;
	margin: 95px 0 0 20px;
	font-weight: lighter;
	display: inline;
}
#footer p {
	color: #959595;
	font-size: 0.75em; /*10pt font*/
	margin: 100px 0 0 10px;
	padding: 0;
	float: left;
	line-height: 1.5em;
	display: inline;
}
#valid, #greenhost {
	float: left;
	margin: 100px 0 0 20px;
	display: inline;
}
#bottomlogo {
	float: right;
	margin: 96px 20px 0 0;
	display: inline;
}