/*
Site Name: Mr. Diggles
Site URL: http://www.benjamindiggles.com
Description: A site designed to show off my rad skills. 
Version: 3.0
Author: Mr. Diggles
Author URI: http://www.mrdiggles.com/
*/


/******      GLOBAL COMMAND CENTRAL     ******/

* {
	border: 0px solid #fff;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

html,body,#bg,#bg table,#bg td,#main {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	cursor: default;
	background: #1d1d1d url(../img/loading.gif) top center no-repeat;
	color: #242424;
}

div.sizer {
	position:absolute;
	top: 15px;
	text-align: right;
	right: 15px;
	z-index:80;
	padding: 5px;
}

div.sizer p {
	font-size: 130%;
	width: 20px;
	height: 20px;
	float: left;
	text-align: center;
	margin-left: 6px;
}

div.sizer p a{
	display: block;
	background: #fff;
}


a {
	text-decoration: none;
}

div.clear {
	clear: both;
}


img {
	display: block;
	border: none;
}



#main {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 70;
	overflow: auto;
}

div.wrap {
	width: 960px;
	margin: 20px;
}


#bottom {
	width: 600px;
}


/******      BACKGROUND IMAGE     ******/

#bg div {
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
}

#bg td {
	vertical-align: middle;
	text-align: center;
}

#bg img {
	min-height: 50%;
	min-width: 50%;
	margin: 0px auto;
}


/******      NAVIGATION     ******/

div.nav {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

div.nav ul {
	margin-top: 20px;
}

div.nav li {
	float: left;
	margin-right: 10px;
}

div.nav li a{
	color: #d5e6ff;
	display: block;
	padding: 4px;
	background: #000;
}

div.nav li a:hover {
	background: #fff;
	color: #000;
}

div.nav li.selected a {
	color: #d5e6ff;
	display: block;
	padding: 4px;
	background: #000;
	border-bottom: 2px solid #e93729;
}

div.nav li.selected a:hover {
	color: #d5e6ff;
	background: #000;
}




/************      HOME PAGE     ************/

div.homebox {
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: #000;
	padding: 10px 0px;
}

div.homebox h1{
	font-weight: 100;
	letter-spacing: -4px;
	color: #ffc1a8;
	padding-left: 4px;
	font-size: 700%;
}


div.homebox h2{
	font-weight: 100;
	letter-spacing: -2px;
	color: #d55e64;
	font-size: 400%;
	padding-left: 4px;
	background: url(/img/stripe-1d1d1d.gif) top left repeat;	
}

div.homecontent {
	margin-top: 20px;
	height: 380px;
	padding: 20px 0px 0px 0px;
	background: url(/img/stripe-home.gif) top left repeat;
}

div.homecontent p{
	color: #f8f8f8;
}





/************      WEB KNOWLEDGE PAGE     ************/

div.webbox {
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: #000;
	padding: 10px 0px;
}

div.webbox h1{
	font-weight: 100;
	letter-spacing: -4px;
	color: #e8cbb9;
	font-size: 700%;
	padding-left: 4px;
}


div.webbox h2{
	font-weight: 100;
	letter-spacing: -2px;
	color: #8d6145;
	font-size: 400%;
	background: url(/img/stripe-1d1d1d.gif) top left repeat;
	padding-left: 4px;
}

div.webcontent {
	margin-top: 20px;
	background: url(/img/gray-striper.gif) top left repeat;
	padding: 10px 4px 10px 4px;
}

div.webcontent h2{
	color: #fb3cf0;
	font-weight: 100;
	letter-spacing: -1px;
	font-size: 175%;
	margin-bottom: 5px;
}

div.webcontent h2 span {
	padding: 0px 4px 0px 8px;
	background: #1d1d1d;

}

div.webcontent p{
	color: #fff;
	font-size: 95%;
	line-height: 1.5em;
	text-align: justify;
	padding-bottom: 5px;
}

div.webcontent p span{
	color: #fb3cf0;
	font-weight: bold;
}

div.webcontent a{
	color: #0040ff;
	font-weight: bold;
}

div.webcontent a:hover{
	background: #1d1d1d;
	color: #4e7aff;
}

div.webwrap {
	padding: 10px;
	font-size: 95%;
	background: #1d1d1d;
}


/************      VISION PAGE     ************/

div.visionbox {
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: #000;
	padding: 10px 0px;
}

div.visionbox h1{
	font-weight: 100;
	letter-spacing: -4px;
	color: #c0636a;
	font-size: 700%;
	padding-left: 4px;
}


div.visionbox h2{
	font-weight: 100;
	letter-spacing: -2px;
	color: #d0c4dc;
	font-size: 400%;
	background: url(/img/stripe-1d1d1d.gif) top left repeat;
	padding-left: 4px;
}

div.visioncontent {
	margin-top: 20px;
	background: url(/img/red-stripe.gif) top left repeat;
	padding: 10px 4px 10px 4px;
}

div.visioncontent h2{
	color: #d67268;
	font-weight: 100;
	letter-spacing: -1px;
	font-size: 175%;
	margin-bottom: 5px;
}

div.visioncontent h2 span {
	padding: 0px 4px 0px 8px;
	background: #680900;

}

div.visioncontent p{
	color: #f8f8f8;
	font-size: 95%;
	line-height: 1.5em;
	text-align: justify;
	padding-bottom: 5px;
}

div.visioncontent p span {
	padding: 0px 4px;
}

div.visioncontent a{
	color: #0040ff;
	font-weight: bold;
}

div.visioncontent a:hover{
	background: #680900;
	color: #4e7aff;
}

div.visionwrap {
	background: #680900;
	padding: 10px;
	font-size: 95%;
}

div.visioncontent h3{
	font-weight: 100;
	color: #c1b3d0;
	margin-bottom: 10px;
	margin-top: 5px;
}

div.visioncontent h3 span{
	text-decoration: underline;
}


/************      PROJECTS + AWARDS PAGE     ************/

div.projectsbox {
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: #000;
	padding: 10px 0px;
}

div.projectsbox h1{
	font-weight: 100;
	letter-spacing: -4px;
	color: #f3d194;
	font-size: 700%;
	padding-left: 4px;
}


div.projectsbox h2{
	font-weight: 100;
	letter-spacing: -2px;
	color: #d6cccb;
	font-size: 400%;
	background: url(/img/stripe-1d1d1d.gif) top left repeat;
	padding-left: 4px;
}

div.projectscontent {
	margin-top: 20px;
	background: url(/img/blonde-stripe.gif) top left repeat;
	padding: 10px 4px 10px 4px;
}

div.projectscontent h2{
	color: #621e69;
	font-weight: 100;
	letter-spacing: -1px;
	font-size: 175%;
	margin-bottom: 5px;
}

div.projectscontent h2 span {
	padding: 0px 4px 0px 8px;
	background: #faecdd;

}

div.projectscontent p{
	color: #ac4c42;
	font-size: 95%;
	line-height: 1.5em;
	text-align: justify;
	padding-bottom: 5px;
}

div.projectscontent p span{
	text-decoration: underline;
	font-weight: bold;
}

div.projectscontent a{
	color: #4e7aff;
	font-weight: bold;
}

div.projectscontent a:hover{
	color: #877e97;
}


div.projectscontent img.project {
	float: left;
	margin: 10px 3px 0px 2px;
	background: #d67268;
	padding: 2px;
}

div.projectscontent img.project:hover{
	background: #4e7aff;
	padding: 2px;
}

div.sites {
	margin-bottom: 15px;
}	

div.projectswrap {
	background: #fbedde;
	padding: 10px;
	font-size: 95%;
	z-index: 80;
}


/******      WORK EXPERIENCE PAGE     ******/

div.workbox {
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: #000;
	padding: 10px 0px;
}

div.workbox h1{
	font-weight: 100;
	letter-spacing: -4px;
	color: #aeb72b;
	font-size: 700%;
	padding-left: 4px;
}

div.workbox h2{
	font-weight: 100;
	letter-spacing: -2px;
	color: #c0d4e2;
	font-size: 400%;
	background: url(/img/stripe-1d1d1d.gif) top left repeat;
	padding-left: 4px;
}

div.workcontent {
	margin-top: 20px;
	background: url(/img/blue-light.gif) top left repeat;
	padding: 10px 4px 10px 4px;
}

div.workcontent h2{
	color: #7300c3;
	font-weight: 100;
	letter-spacing: -1px;
	font-size: 175%;
	margin-bottom: 5px;
}

div.workcontent h2 span {
	padding: 0px 4px 0px 8px;
	background: #c0d4e2;
}

div.workcontent p{
	color: #175562;
	font-size: 95%;
	line-height: 1.5em;
	text-align: justify;
	padding-bottom: 5px;
}

div.workcontent p span{
	font-weight: bold;
	text-decoration: underline;
	color: #7300c3;
}

div.workcontent a{
	color: #3466fc;
	font-weight: bold;
}

div.workcontent a:hover{
	color: #0131c3;
}

div.workcontent ul {
	width: 185px;
	float: left;
	margin: 15px 0px;
}

div.workcontent ul.middle {
	margin: 15px 8px;
}

div.workcontent ul li{
	color: #393939;	
	line-height: 1.3em;
	font-weight: bold;
}


div.workcontent ul li.year {
	font-size: 130%;
	color: #531812;
	letter-spacing: -1px;
	word-spacing: 2px;
	border-bottom: 2px solid #a8c2d2;
}


div.workcontent ul li.gig {
	font-size: 100%;
	color: #0c0c0c;
	font-weight: bold;
}


div.workcontent ul li.desc {
	font-size: 90%;
}

div.workfull {
	background: #c0d4e2;
	padding: 10px;
	font-size: 95%;
}


/************      EDUCATION PAGE     ************/

div.edubox {
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: #000;
	padding: 10px 0px;
}

div.edubox h1{
	font-weight: 100;
	letter-spacing: -4px;
	color: #d6c886;
	font-size: 700%;
	padding-left: 4px;
}


div.edubox h2{
	font-weight: 100;
	letter-spacing: -2px;
	color: #adafd4;
	font-size: 400%;
	background: url(/img/stripe-1d1d1d.gif) top left repeat;
	padding-left: 4px;
}

div.educontent {
	margin-top: 20px;
	background: url(/img/black-stripe.gif) top left repeat;
	padding: 10px 4px 10px 4px;
}

div.educontent h2{
	color: #97d33e;
	font-weight: 100;
	letter-spacing: -1px;
	font-size: 175%;
	margin-bottom: 5px;
}

div.educontent h2 span {
	padding: 0px 4px 0px 8px;
	background: #000;

}

div.educontent h3{
	font-weight: 100;
	color: #97d33e;
	border: 1px solid #242424;
	padding-bottom: 3px;
	margin-bottom: 1px;
	padding-top: 3px;
	margin-top: 1px;
	background: #191919;
	padding-left: 5px;
	font-size: 105%;
}

div.educontent h3 span{
	color: #f2a385;
	margin-left: 15px;
}


div.educontent p{
	color: #dcd9eb;
	font-size: 95%;
	line-height: 1.5em;
	text-align: justify;
	padding-bottom: 5px;
}

div.educontent p.school {
	padding: 2px 5px;
	background: #222;
}

div.educontent a{
	color: #8ca9ff;
	font-weight: bold;
}

div.educontent a:hover{
	color: #3366ff;
}

div.eduwrap {
	background: #000;
	padding: 10px;
	font-sizE: 95%;	
}



/******      CONTACT INFORMATION PAGE     ******/

div.contactbox {
	opacity: 0.6;
	filter: alpha(opacity=60);
	background: #000;
	padding: 10px 0px;
}

div.contactbox h1{
	font-weight: 100;
	letter-spacing: -4px;
	color: #fff600;
	font-size: 700%;
	padding-left: 4px;
}


div.contactbox h2{
	font-weight: 100;
	letter-spacing: -2px;
	color: #00e4ff;
	font-size: 400%;
	background: url(/img/stripe-1d1d1d.gif) top left repeat;
	padding-left: 4px;
}

div.contactcontent {
	margin-top: 20px;
	background: url(/img/gray-striper.gif) top left repeat;
	padding: 10px 4px 10px 4px;
}

div.contactcontent h2{
	color: #e93729;
	font-weight: 100;
	letter-spacing: -1px;
	font-size: 175%;
	margin-bottom: 5px;
}

div.contactcontent h2 span {
	padding: 0px 4px 0px 8px;
	background: #1d1d1d;

}

div.contactcontent p{
	color: #ddd;
	font-size: 95%;
	line-height: 1.5em;
	text-align: justify;
	padding-bottom: 5px;
}

div.contactcontent p span {
	color: #ffae00;
}

div.contactcontent a{
	color: #00e4ff;
	font-weight: bold;
}

div.contactcontent a:hover{
	color: #c6f9ff;
}

div.contactwrap {
	background: #1d1d1d;
	padding: 10px;
	font-size: 95%;
}

img.bio {
	float: left;
	margin-right: 10px;
	border: 2px solid #151515;
}

div.contactbot {
	margin-top: 8px;
	padding-top: 5px;
	border-top: 1px dashed #333;
}

div.contactcontent h3{
	font-weight: 100;
	color: #fdf400;
	margin-bottom: 5px;
	padding-bottom: 3px;
	border-bottom: 1px dashed #333;
}


div.contactcontent p.smile {
	font-size: 110%;
	color: #666;
}


div.b {
	float: left;
	width: 165px;
	margin-right: 30px;
}

div.c {
	float: left;
	width: 165px;
}




/******      RIGHT FOOTER LINKS     ******/


div.homeblog {
	position:absolute;
	bottom: 20px;
	text-align: right;
	right: 20px;
	z-index:80;
	width:100%;
	color: #fff;
	width: 175px;
}


div.homeblog p.eye{
	text-transform: uppercase;
	font-size: 90%;
}

div.homeblog p.eye a{
	background: #e93729 url(/img/blog-red.jpg) top left repeat;
	padding: 5px 10px;
	margin-left: 3px;
	height: 20px;
	color: #ffa5a5;
}

div.homeblog p.eye a:hover{
	color: #173c6f;
}

div.homeblog p.eye a span {
	color: #173c6f;
}