/*
 * Main CSS File for http://spncr.me
 * http://netspencer.com
 *
 * Copyright (c) 2010 Spencer Shcoeben
 *
 */

/* ----- SITE WIDE FEATURES ----- */

* {
	padding:0;
	margin:0;
	outline:none;
	border:0;
}

.clear {
	clear:both;
	display:block;
}

.hide {
	display:none;
}

.float_right {
	float:right;
}

.float_left {
	float:left;
}

.rounded {
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}

.shadow {
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
		
body {
	border-top:10px #CCC solid;
	background:#EEE;
}

.qtip {
	font-family:Helvetica;
}

div#main {
	width:600px;
	margin:auto;
	position:relative;
}
	div#main div.separator {
		width:100%;
		border-top:#CCC 1px solid;
		margin:5px 0;
	}
	
/* ----- END SITE WIDE FEATURES ----- */

/* ----- CONTENT TYPE STYLING ----- */

/* heading */

div#main h1 {
	font-family: "adelle-1","adelle-2", "Chalkboard";
	font-weight:normal;
	font-size:62px;
	text-align:center;
	color:#CCC;
	display:block;
	/*line-height:1.4;*/
	margin:10px 0;
	-webkit-transition: color 0.25s linear;
	-moz-transition: color 0.25s linear;
}
	div#main h1 a {
		color:inherit;
		text-decoration:none;
		-webkit-transition: color 0.25s linear;
		-moz-transition: color 0.25s linear;
	}
		div#main h1 a:hover, div#main h1:hover {
			color:#FF3432;
		}
		div#main h1 a:active, div#main h1:active {
			/* test */
		}

/* pictures */

div.picture_frame {
/*	border:1px #ccc solid;*/
	padding:10px;
	background:#FFF;
	display:inline-block;
}
	div.picture_frame p {
		line-height:1;
		font-family:Helvetica;
		font-weight:bold;
		font-size:14px;
		text-align:center;
		margin-top:5px;
	}
		div.picture_frame p a {
			text-decoration:none;
			color:inherit;
		}
			div.picture_frame p a:hover {
				text-decoration:underline;
			}
		div.picture_frame p span.com {
			font-weight:normal;
		}
		div.picture_frame p span.job {
		/*	font-style:italic; */
		}

img.medium_pic {
	width:310px;
}

img.medium_thumb {
	width:200px;
	/*height:150px;*/
}

/* buttons */

.big_button {
	display:block;
	width:580px;
	padding:10px;
	font-size:42px;
	text-align:center;
	border:1px #CCC solid;
	text-decoration:none;
	color:inherit;
	background-color:#FFF;
	background-image:url("../img/buttons/gradient.png");
	background-repeat:repeat-x;
	-webkit-transition: background 0.25s linear;
}
	.big_button:hover {
		background-image:url("../img/buttons/gradient_hover.png");
	}

/* content */

div.content {
	font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
	line-height:1.5;
	margin:10px 0;
	position:relative;
}
	div.content p.bottom {
		margin-bottom:15px;
	}
	div.content p.big {
		font-size:24px;
	}
	div.content p.medium {
		font-size:20px;
	}

/* list with images */

ul.img_list {

}
	ul.img_list li {
		list-style:none;
		border-bottom:#CCC 1px dotted;
		margin-bottom:5px;
		padding-bottom:5px;
	}
		ul.img_list li:last-child {
			border-bottom:none;
			margin-bottom:0;
			padding-bottom:0;
		}
		ul.img_list li h3 {
			font-weight:normal;
			font-size:24px;
		}
			ul.img_list li h3 a {
				text-decoration:none;
				color:inherit;
			}
				ul.img_list li h3 a:hover, ul.img_list li:hover h3 a {
					text-decoration:underline;
				}
		ul.img_list li div.description {
			width:350px;
			margin-left:20px;
		}
			ul.img_list li div.description p {
				margin:0.5em 0;
			}
				ul.img_list li div.description p a {
					color:#000;
					text-decoration:none;
					background:#fcffc0;
				}
					ul.img_list li div.description p a:hover {
						color:#000;
						text-decoration:none;
						background:#fff856;
					}
ul.img_list.expand {
	
}
	ul.img_list.expand div.details {
		margin-top:10px;
		display:none;
	}

	
/* ----- END CONTENT TYPE STYLING ----- */

/* ----- FRAGMENT STYLING ----- */

/* nav bar */

ul#nav {
	position: relative;
	width:500px;
	margin:auto;
	background:#FFF;
}
	ul#nav li {
	    position: relative;
		float:left;
	    z-index: 100;
		list-style:none;
		font-family: "gesta-1", "gesta-2";
		width:80px;
		text-align:center;
		font-size:20px;
		padding:10px;
	}
		ul#nav li a {
			text-decoration:none;
			color:inherit;
		}
	ul#nav li.current {
		
	}
		ul#nav li.current a {
			font-weight:bold;
		}
	ul#nav div.ahover {
	    position: absolute;
	    z-index: 99;
	    background: #FF3432;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
	}

/* footer */

div#footer {
	margin:20px auto;
	width:100%;
	text-align:center;
	font-family:"HelveticaNeue-Light", "HelveticaNeue", Helvetica, sans-serif;
	color:#CCC;
	-webkit-transition: color 0.25s linear;
}
	div#footer:hover {
		color:#666;
	}
	div#footer p.copyright {
		font-size:14px;
		margin-bottom:14px;
	}
	div#footer p.credit {
		font-size:12px;
	}
	div#footer a {
		color:inherit;
		text-decoration:none;
	}
		div#footer a:hover {
			text-decoration:underline;
		}

/* ----- END FRAGMENT STYLING ----- */
	
/* ----- PAGES ------ */

/* PAGE: (ALL) */

div.content div.page {
	
}
	div.content div.page h2 {
		font-weight:normal;
		font-family:"HelveticaNeue-Light";
		font-size:32px;
		text-align:left;
		margin:10px 0;
	}

/* PAGE: HOME */

div#home {
	
}
	div#home ul#networks {
		margin:auto;
	}
		div#home ul#networks li {
			float:left;
			list-style:none;
			margin:5px;
		}
			div#home ul#networks li img {
				width:32px;
			}
	div#home ul#networks_hover {
		display:none;
	}
	div#home div.details {
		margin-bottom:10px;
	}
		div#home div.details p.flag {
			width:250px;
		}

/* PAGE: ABOUT */

div#about {
	
}
	div#about h2 {
		font-weight:normal;
		margin-bottom:10px;
	}
	div#about h3 {
		font-weight:normal;
		margin-bottom:10px;
		font-size:22px;
	}
	div#about p {
		margin:1em 0;
	}

/* PAGE: PROJECTS */

div#projects {

}
	div#projects ul.img_list {
		/* inherit styles */
	}

/* PAGE: FRIENDS */

div#friends {
	
}
	div#friends ul.avatars {
		list-style:none;
	}
		div#friends ul.avatars li {
			float:left;
			margin:6px;
			opacity:0.7;
			height:73px;
			width:73px;
			background:#FFF;
			-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;
			-webkit-transition: opacity 0.25s linear;
		}
			div#friends ul.avatars li.current {
				opacity:1;
				padding:0;
			}
			div#friends ul.avatars li:hover {
				opacity:1;
			}

/* PAGE: CONTACT */

div#contact {
	
}
	div#contact div.form {
		margin-top:20px;
		text-align:left;
		background:#fff;
		border:1px solid #ccc;
		-webkit-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;
		-moz-box-shadow:rgba(0,0,0,.2) 0px 0px 5px;
	
	}
		div#contact div.form div.embed {
			margin:10px;
			width:580px;
		}
		div#contact div.form h1 {
			margin:0;
			padding:0;
			min-height:0;
			background-color:#dedede;
			text-indent:-9000px;
			text-decoration:none;
		}
			div#contact div.form h1 a {
				min-height:40px;
				height:40px;
				display:block;
				background:url('../img/wflogo.png') no-repeat left top;
				overflow:hidden;
			}

	div#contact div.item {
		display:block;
		clear:both;
	}
		div#contact div.item img {
			height:50px;
			float:left;
			margin-right:10px;
		}
		div#contact div.item p {
			float:left;
			display:inline-block;
			font-size:32px;
		}
		div#contact div.item a {
			text-decoration:none;
			color:inherit;
		}

/* ----- END PAGES ------ */