/* Alex Coleman 2010 *******************/
/* External sheets & fonts *********************/

@import "reset.css";
@import "grid.css";
@import "fonts.css";

@import "blog.css";


/* General ****************************/

body {
	background: #181818 url(../images/bg.jpg) no-repeat center top;
	font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
}
p {
	font-size: 1.3em;
	color: #777777;
	line-height: 1.7em;
	margin-bottom: 1.2em;
}
a {
	color:#00AEEF;
	text-decoration:none;
}
a:hover {
	color:#00D3FF;
	text-decoration:none;
}
blockquote {
	border-left:1px solid #333333;
	margin-left:40px;
	padding-left:20px;
	font-style:italic;
}
.hidden { display:none; }

/* Header Tags ***********************/

h2 {
	font: normal 1.4em 'SansationRegular', arial, sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0,.7);
	color: #CCCCCC;
	position: absolute;
	left: 120px;
	top: 20px;
}
h3 {
	margin-bottom:16px;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,.7), 0px 0px 3px rgba(0,0,0,.8);
	font: 2.3em 'SansationRegular', arial, sans-serif;
}
h4 {
	margin-bottom:10px;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,.7), 0px 0px 3px rgba(0,0,0,.8);
	font: 1.4em 'SansationRegular', arial, sans-serif;
	text-transform: uppercase;
}
h5 {
	margin-bottom:10px;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,.7), 0px 0px 3px rgba(0,0,0,.8);
	font: 1.4em 'SansationRegular', arial, sans-serif;
}


/* Global Fashionable Lists ***********/

.list-1 {
	color: #666666;
}
	.list-1 li, .list-1 li {
	padding-top: 2px;
	padding-bottom: 2px;
	border-top: 1px solid #333333;
	}
	.list-1 li a, .list-1 li a {
		text-decoration: none;
		color:#CCC;
	}
	.list-1 li a:hover, .list-1 li a:hover { color:#FFFFFF; }

/* Widgetry ***************************/

#flickr_badge_wrapper {
	background: #1A1A1A url(../images/bg-boxes-2.jpg) no-repeat left top;
	font-size:1em!important;
	line-height:1.6em!important;
	color: #CCCCCC!important;
	overflow:auto;
	padding-bottom: 9px;
	margin-bottom: 10px;
}
	.flickr_badge_image {
		float: left;
		margin-left: 9px;
		margin-top:9px;
	}
	.flickr_badge_image img {
		width:50px;
		height:50px;
		padding:4px;
		background: #101010;
		border-top: 2px solid #000000;
		border-left: 2px solid #000000;
		border-right: 1px solid #303030;
		border-bottom: 1px solid #303030;
		-moz-border-radius: 1px;
		-webkit-border-radius: 1px;
		border-radius: 1px;
	}
.twitter-message {
	padding:10px;
	background: #1A1A1A url(../images/bg-boxes-2.jpg) no-repeat left top;
	font-size:1em!important;
	line-height:1.6em!important;
	color: #CCCCCC!important;
}
	.twitter-timestamp { 
		font-size:.9em; 
		color:#666666;
	}

/* Containers *************************/

#wrapper {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom:40px;
}
#header {
	margin-bottom: 30px;
	margin-top: 20px;
	position:relative;
	height:65px;
	width: 950px;
	overflow: hidden;
}
#main {
	width: 950px;
}
#footer {
	padding-top:20px;
	padding-bottom: 40px;
	overflow:auto;
}

/* Header ****************************/

h1#logo a {
	background: url(../images/alex-coleman.png);
	text-indent: -9999px;
	height: 58px;
	width: 100px;
	position: absolute;
	left: 0px;
}

#nav {
	position: absolute;
	right: 0px;
	top:12px;
}
	#nav li {
		float: left;
		margin-left: 5px;
		background: #000000;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	#nav li:hover, #nav li.current_page_item {
		background: #00aeef;
	}
	#nav li.current_page_item-2 {
		background: #FF0000;
	}
	#nav li a {
		color:#FFFFFF;
		font: 1.1em 'SansationRegular', arial, sans-serif;
		text-transform: uppercase;
		padding: 8px 10px;
		display: block;
		position:relative;
	}
		#nav li a:active {
			position:relative;
			top:1px;
		}
#nav-bottom { 
	padding-top:10px;
	padding-bottom:10px;
}
	#nav-bottom a {
	background: #000000;
	color:#FFFFFF;
	font: 1em 'SansationRegular', arial, sans-serif;
	text-transform: uppercase;
	padding: 8px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
	#nav-bottom a:hover {
	background: #0F0F0F;
}
	
#email {
	position: absolute;
	top: 75px;
	background: #FFFFFF;
	padding: 20px;
	width: 910px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	display:none;
}
	#email a, #email strong {
		color:#00AEEF;
	}
	#email-tri {
		position:absolute;
		top:-10px;
		left:50px;
	}
	#email ul li {
		float: left;
		margin-right: 14px;
		font: 1.6em 'SansationRegular', arial, sans-serif;
	}
	#email ul li span.your-name input, #email ul li span.your-email input, #email ul li span.your-message input, #headlinesuggest {
		padding: 10px;
		border-top: 1px solid #EFEFEF;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		border-left: 1px solid #EFEFEF;
	}
	#email ul li span.your-name input { width: 110px; }
	#email ul li span.your-email input { width:190px; }
	#email ul li span.your-message input { width:410px; }
		input.emailsubmit {
			width:75px;
			color: #999999;
			background: #F2F2F2;
			border-width: 0px;
			border-style: none;
			padding: .3em .6em;
			margin-top:25px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius: 5px;
		}
		input.emailsubmit:hover { color:#000000; }


/* Single ***************************/

.maincontent {
	padding: 18px;
	color: #CCCCCC;
}
	.maincontent p {
		margin-bottom:20px;
		color: #CCCCCC;
}
	.maincontent img {
		padding:5px;
		background: #101010;
		border-top: 2px solid #000000;
		border-left: 2px solid #000000;
		border-right: 1px solid #303030;
		border-bottom: 1px solid #303030;
		-moz-border-radius: 1px;
		-webkit-border-radius: 1px;
	}

/* Work ***************************/

.portfolio { }
	.portfolio li {
		float: left;
		width: 280px;
		min-height: 226px;
		padding: 5px;
		margin-left: 18px;
		margin-top:18px;
		background: #090909;
		border-top: 2px solid #000000;
		border-left: 2px solid #000000;
		border-right: 1px solid #303030;
		border-bottom: 1px solid #303030;
		-moz-border-radius: 1px;
		-webkit-border-radius: 1px;
		border-radius: 1px;
		position:relative;
	}
	.portfolio li p {
		margin-top: 2px;
		margin-bottom: 0px;
		color: #666666;
		font: 1.0em 'SansationRegular', arial, sans-serif;
		text-transform: uppercase;
	}
	.portfolio li p.hover {
		color: #FFFFFF;
	}
	.portfolio li img {
		width: 280px;
		height: 210px;
	}
	
.quotewrap {	
	background: #000000;
	margin-bottom:40px;
	padding:20px;
	border-top: 1px solid #131313;
	border-left: 1px solid #131313;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.quotewrap img { 
		float: left; 
		margin-right:20px; 
		padding:2px; 
		background: #101010;
		width:35px;
		border-top: 2px solid #000000;
		border-left: 2px solid #000000;
		border-right: 1px solid #303030;
		border-bottom: 1px solid #303030;
		-moz-border-radius: 1px;
		-webkit-border-radius: 1px;
		border-radius: 1px;
	}
	.quote {
		font: 1.8em Georgia, serif;
		color: #CCCCCC;
		margin-bottom: 20px;
	}
	.quote-auth {
		margin-bottom: 0px;
	}

#web, #print, #photo {
	margin-bottom:40px;
	padding-bottom:18px;
	background: #111111 url(../images/bg-boxes.jpg) no-repeat left top;
	-moz-box-shadow:0 0 20px rgba(0,0,0,.5);
	position:relative;
	z-index: 10;
	overflow: auto;
}	
	#web h3, #print h3, #photo h3 {
		margin-left:20px;
		margin-bottom:0px;
		padding-top:5px;
		height:22px;
		overflow:hidden;
		color: #FFFFFF;
		text-shadow: 1px 1px 1px rgba(0,0,0,.7), 0px 0px 3px rgba(0,0,0,.8);
		font: 1.6em 'SansationRegular', arial, sans-serif;
		text-transform:uppercase;
	}
	
/*.back {
	writing-mode:tb-lr;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	display:block;
	position:absolute;
	left:-40px;
	background: #181818;
	color:#FFFFFF;
	font-size: 1.1em;
	text-transform: uppercase;
	padding: 8px 10px;
	z-index: 1;
	-webkit-border-radius-topleft: 5px;
	-webkit-border-radius-topright: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
}
.back:hover { background-color:#00AEEF;color:#FFFFFF; }
*/

/*temp workaround*/ .size-full { width:900px; }


/* About ***************************/

#about { padding-bottom: 40px; }
	
#profile {
	background: #090909;
	border-top: 2px solid #000000;
	border-left: 2px solid #000000;
	border-right: 1px solid #303030;
	border-bottom: 1px solid #303030;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
	border-radius: 1px;
}
	#profile ul, #profile li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#profile, #profile li{ 
		width:147px;
		height:192px;
		overflow:hidden; 
		}
#profile .mug {
	width:137px;
	height:183px;
	margin-left:4px;
	margin-top:4px;
}	
#profilebuttons {
	margin-top: 5px;
	width:150px;
	overflow: auto;
}
	#profilebuttons span#prevBtn{
		float:left;
	}
	#profilebuttons span#nextBtn{
		float:right;
	}

#social {
	margin-top:20px;
}
	#social ul li {
		color:#CCCCCC;
		margin-bottom: 4px;
		padding-bottom: 4px;
		padding-left:20px;
		border-bottom: 1px solid #2F2F2F;
		text-transform: uppercase;
		text-align:right;
	}
		#social ul li#social-phone { background: url(../images/sprite-social.png) no-repeat 0px 2px; }
		#social ul li#social-email { background: url(../images/sprite-social.png) no-repeat 0px -15px; }
		#social ul li#social-linkedin { background: url(../images/sprite-social.png) no-repeat 0px -35px; }
		#social ul li#social-twitter { background: url(../images/sprite-social.png) no-repeat 0px -56px; }


/* Footer ***************************/

#footer p {
	font-size: 1em;
}