/*
    Name: Quinn Gable's Resume
    Date: 13 July 2010
    Description: One page, online resume
    Version: 1.0.1
    Author: Quinn Gable
    Author URI: http://qgable.com

@import "style/reset.css";
@import "style/layout.css";

*/

@charset "UTF-8";

@media screen, projection {
/* ----------------------------RESET----------------------------- */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	input {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		line-height: 1.2em;
		height: 1.2em;
		vertical-align: top;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
	}
	:focus {
		outline: 0;
	}
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	div, ul, li {
		position: relative; 
	}
	strong { 
		font-weight: bolder;
	}
	em { 
		font-style: italic;
	}
	h1, h2, h3, h5, h5, h6 {
		font-weight:bold;
	}
	/* HTML5 */
	header, section, footer, aside, 
	nav, article, figure { 
		display: block; 
	}
	/* Gets rid of IE's blue borders */
	a img { 
		border: none;
	}
	/* sticky footer  */
	html, body {
		height:100%;
	}
	
/* -------------------------LAYOUT--------------------------- */
/* @group General */
	body {
	    font: .875em/1 Geneva, Helvetica, "Helvetica Neue", Arial, sans-serif;
	    color: #393939;
	    cursor: default;
	    line-height: 1.2em;
	    background: #ddd no-repeat;
	}
	#pagewrap {
	    width: 960px;
	    margin: 0 auto;
	    padding: 20px;
	    overflow: hidden;
	    background: #fff;
	    
	    -webkit-box-shadow: 0 10px 30px #888;
	    -webkit-border-radius: 3px;
	    -webkit-transform: rotate(-.3deg);
	    -moz-box-shadow: 0 10px 30px #888;
	    -moz-border-radius: 3px;
	    -moz-transform: rotate(-.3deg);
	}
	.clear { 
	    clear: both; 
	    display: block; 
	    height: 1px; 
	    margin: 10px 0;
	}
	.rule { 
	    display: block; 
	    width: 100%;
	    height: 2px; 
	    margin: 10px 0;
	    background: rgba(64,111,148,0.3);  
	}
/* -------------------------STD LINKS-------------------------- */
	a {
	    color: #348c3d;
	    text-decoration: none;
	}
	a:visited {
	    color: #439b49;
	}
	a:hover {
	    color: #5e8b78;
	}
/* -----------------------END STD LINKS------------------------- */
/* @end */
/* @group Content */
/* -------------------------HEADER SECTION------------------------- */
	header h1 {
	    font: italic bold 2.55em "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	    padding-bottom: 3px;
	    border-bottom: 1px solid #aaa;
	    text-shadow: 1px 1px #eee;
	    
	    -webkit-box-shadow: 0 2px 3px #eee;
	    -moz-box-shadow: 0 2px 3px #eee;
	    -o-box-shadow: 0 2px 3px #eee;
	    
	    -webkit-transition: all 0.12s ease-out;
	    -moz-transition: all 0.12s ease-out;
	    -o-transition: all 0.12s ease-out;
	}
	header h1:hover {
	    text-shadow: 1px 1px #ccc, 2px 2px #ddd, 3px 3px #eee;
	    
	}
	#pic {
	    float: right; 
	    margin: -137px 40px 0 0;
	    border: 14px solid #fff;
	    
	    -webkit-transform: rotate(18deg); 
	    -moz-transform: rotate(18deg);
	    -o-transform: rotate(18deg);
	    
	    -webkit-box-shadow: 0 3px 6px #aaa;
	    -moz-box-shadow: 0 3px 6px #aaa;
	    -o-box-shadow: 0 3px 6px #aaa;
	}
/* -----------------------END HEADER SECTION----------------------- */

/* -------------------------CONTENT SECTION------------------------- */
	.hresume .vcard {
	    line-height: 1.8em;
	}
	.hresume h2 {
	    margin: 20px 0 10px 0;
	    font-size: 1.3em;
	    color: #a5a49d;
	    text-indent: 30px;
	    text-shadow: 0px 1px 2px #fff;
	}
	.attribute {
	    color: #555;
	    font-weight: bold;
	    display: inline-block;
	    width: 150px !important;
	}
	.hresume .vcalendar {
	    display: table;
	    clear: both;
	    width: 960px;
	}
	.hresume .education .htitle, .hresume .experience .htitle {
	    display: table-cell;
	    float:left;
	    width: 50%;
	    line-height: 1.4em;
	    
	}
	.hresume .education .date_duration, .hresume .experience .date_duration {
	    float: right;
	    font-size: smaller;
	    color: #777;
	    line-height: 1.4em;
	    margin-top: .6em;
	}
	.hresume .summary {
	    color: #333;
	    font-weight: bolder;
	}
	.hresume .org {
	    color: #333;
	    margin: 0 10px;
	}
	.hresume .experience .title {
	    font-weight: bold;
	}
	.hresume .experience .org {
	    font-style: italic;
	}
	.hresume .experience ul {
	    list-style: disc;
	    line-height: 1.35em;
	    margin: 0 50px;
	    
	}
	.skill {
	    width: 200px;
	    display: inline-block;
	    font-weight: bold;
	    color: #444;
	}
	.xp {
	    width: 180px;
	    display: inline-block;
	}
	.tags li {
	    line-height: 2em;
	    padding: 2px 10px;
	    
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px; 
	    -o-border-radius: 5px;    
	}
	.tags li:nth-child(2n+1) {
	    background-color: #eee;
	}
	
	#references h3 {
	    margin: 10px 0;
	    font: italic 1.3em Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	    text-align: center;
	}
/* -----------------------END CONTENT SECTION----------------------- */

/* -------------------------FOOTER SECTION------------------------- */
	footer {
	    margin: 50px 0;
	    font: .75em/1 Geneva, Helvetica, "Helvetica Neue", Arial, sans-serif;
	    text-align: center;
	}
/* -----------------------END FOOTER SECTION----------------------- */

/* -------------------------SOCIAL SECTION------------------------- */
	aside {
		position: fixed;
		top: .5em;
		left: .5em;
		height: 100px;
		
	}
	#social ul {
		text-indent: -9999px;
	}
	#social ul li a {
		display: block;
		margin: 2px;
		height: 32px;
		width: 32px;
		cursor: pointer;
		background: url('images/socialMediaButtons.png');
	
	}
	#social ul li a#facebook {
		background-position: 0 0;
	}
	#social ul li a#twitter {
		background-position: -32px -32px;
	}
	#social ul li a#linkedin {
		background-position: -64px -64px;
	}
	#social ul li a#delicious {
		background-position: -96px -96px;
	}
	#social ul li a#dropbox {
		background-position: -128px -128px;
	}
	#social ul li a#flickr {
		background-position: -160px -160px;
	}
	#social ul li a#ember {
		background-position: -192px -192px;
	}
	#social ul li a#youtube {
		background-position: -224px -224px;
	}
/* -----------------------END SOCIAL SECTION----------------------- */
/* @end */
}