/*
 * Portfolio styles
 * Edward Jung
 *
 * 14/11/2009
 * Layout - 12 col Flexible - based on 960 Grid System
 * JCarousel - Jquery extension
 *
 **/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Containers */

.container_12,
.container_16 {
	width: 92%;
	margin:2% 4%;
	max-width:1000px;
}

/* =Grid >> Global */

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
	display: inline;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
}

.container_12 .grid_3,
.container_16 .grid_4 {
	width: 23%;
}

.container_12 .grid_6,
.container_16 .grid_8 {
	width: 48%;
}

.container_12 .grid_9,
.container_16 .grid_12 {
	width: 73%;
}

.container_12 .grid_12,
.container_16 .grid_16 {
	width: 98%;
}

/* =Grid >> Children (Alpha ~ First, Omega ~ Last) */

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* =Grid >> 12 Columns */

.container_12 .grid_1 {
	width: 6.333%;
}

.container_12 .grid_2 {
	width: 14.666%;
}

.container_12 .grid_4 {
	width: 31.333%;
}

.container_12 .grid_5 {
	width: 39.666%;
}

.container_12 .grid_7 {
	width: 56.333%;
}

.container_12 .grid_8 {
	width: 64.666%;
}

.container_12 .grid_10 {
	width: 81.333%;
}

.container_12 .grid_11 {
	width: 89.666%;
}


/* =Prefix Extra Space >> Global
--------------------------------------------------------------------------------*/

.container_12 .prefix_3,
.container_16 .prefix_4 {
	padding-left: 25%;
}

.container_12 .prefix_6,
.container_16 .prefix_8 {
	padding-left: 50%;
}

.container_12 .prefix_9,
.container_16 .prefix_12 {
	padding-left: 75%;
}

/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
	padding-left: 8.333%;
}

.container_12 .prefix_2 {
	padding-left: 16.666%;
}

.container_12 .prefix_4 {
	padding-left: 33.333%;
}

.container_12 .prefix_5 {
	padding-left: 41.666%;
}

.container_12 .prefix_7 {
	padding-left: 58.333%;
}

.container_12 .prefix_8 {
	padding-left: 66.666%;
}

.container_12 .prefix_10 {
	padding-left: 83.333%;
}

.container_12 .prefix_11 {
	padding-left: 91.666%;
}


/* =Suffix Extra Space >> Global
--------------------------------------------------------------------------------*/

.container_12 .suffix_3,
.container_16 .suffix_4 {
	padding-right: 25%;
}

.container_12 .suffix_6,
.container_16 .suffix_8 {
	padding-right: 50%;
}

.container_12 .suffix_9,
.container_16 .suffix_12 {
	padding-right: 75%;
}

/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
	padding-right: 8.333%;
}

.container_12 .suffix_2 {
	padding-right: 16.666%;
}

.container_12 .suffix_4 {
	padding-right: 33.333%;
}

.container_12 .suffix_5 {
	padding-right: 41.666%;
}

.container_12 .suffix_7 {
	padding-right: 58.333%;
}

.container_12 .suffix_8 {
	padding-right: 66.666%;
}

.container_12 .suffix_10 {
	padding-right: 83.333%;
}

.container_12 .suffix_11 {
	padding-right: 91.666%;
}


/* =Clear Floated Elements
--------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */

/** Clearfix **/
.cf:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.cf {display:inline-block;}
/* Hide from IE Mac \*/
.cf {display:block;}
/* End hide from IE Mac */

/** Custom layout **/
#header {
	position:absolute;
	right:4%;
}

#nav {
	text-align:right;
	font-size:1.2em;
	width:195px;
	margin:0;
	padding:0;
}

#mainHolder {
	min-width: 720px;
}

#footer {
	text-align:right;
	padding:1em 0;
}

#workHolder {
	/* margin:2em 0; */
}

/* Basic HTML */

body {
	font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
	background:#000;
	color:#fff;
	margin: 0 0 1em 0;
}

a {
	color:#ff6600;
}

a:hover {
	color:#ff9900;
}

hr {
	border-color: #ccc;
	border-style: solid;
	border-width: 1px 0 0;
	clear: both;
	height: 0;
}

/* Headings */

h1,h2,h3,h4,h5,h6 {
	font: 12px/1.5 Arial, sans-serif;
	font-weight:normal;

}

h1 {
	font-size: 1.85em;
	margin:0 0 0.5em 0;
}

h2 {
	font-size: 1.7em;
	padding:0.5em 0 0.2em 0;
}

h3 {
	color:#ff9900;
	font-size: 1.4em;
	padding:0;
	line-height:1.3em
}

h4 {
	font-size: 1.2em;
}

h5 {
	font-size: 1.1em;
}

h6 {
	font-size: 1em;
}

/* title replacement */
h1#title {
	width:199px;
	height:91px;
	text-align:right;
	background:transparent url(../images/edward_jung.gif) no-repeat top left;
}

h2#profile {
	width:120px;
	height:40px;
	background:transparent url(../images/profile.gif) no-repeat left 10px;
}

h2#skills {
	width:120px;
	height:40px;
	background:transparent url(../images/skills.gif) no-repeat left 10px;
}

h2#webWork {
	width:460px;
	height:40px;
	background:transparent url(../images/web_design_dev_work.gif) no-repeat right 10px;
}

h1 span, h2 span {
	display:none;
}


/* Spacing */

ol {
	list-style: decimal;
}

ul {
	list-style: square;
}

li {
	margin-left:13px;
	padding:0.3em 0;
}

p,
dl,
hr,
ol,
ul,
pre,
table,
address,
fieldset {
	margin-bottom: 0.8em;
}


.boxBorderRight {
	border-right:5px solid #ff6600;
	border-bottom:1px solid #ff6600;
	padding: 0 1em 2em 0;
}

.boxBorderLeft {
	border-left:5px solid #ff6600;
	border-bottom:1px solid #ff6600;
	padding: 0 0 2em 1em;
}

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
	z-index: 2;
	padding: 0;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.jcarousel-list {
	z-index: 1;
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 10px 5px;
}

.jcarousel-list li,
.jcarousel-item {
	float: left;
	list-style: none;
	width: 530px;
	height: 250px;
	width:100%;
}


.jcarousel-container {
	 margin:0 0px;
	 color:#FFF;
	background:#222;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
}

.jcarousel-container li {
	width:520px; 
	width:100%;
	height:240px !important; 
	float:left; 
}
.jcarousel-container li img {
	float:left;
	border: 2px solid #fff; 

}

.jcarousel-container-horizontal {
    width: 530px;
}

.jcarousel-clip-horizontal {
    width: 530px;
}

.jcarousel-container-vertical {
    height: 240px;
}

.jcarousel-clip-vertical {
    height: 240px;
}

.jcarousel-scroll a { text-decoration:none; background-position:center; background-repeat:no-repeat; background-color:#6f6f6f; height:180px; width:20px; position:absolute; display:block; top:0px; }
.jcarousel-scroll a:hover { background-color:#888; }

/** elements **/
.workAbout {
	margin:0 1em 0 220px;
	width:62%;
	min-width:290px;
}

.skills {
	padding:0.6em 0;
	font-size:0.8em;
	color:#ff6600;
}

.awards {
	font-size:0.8em;
	color:#aaa
	margin:-2em 0 0 0;
}

#carouselControls {
	border-top:1px solid #222;
	text-align:center;
	z-index:100;
	margin:5px 0 0 0;
	padding:0.5em 0 0 0;
}

#carouselButtonPrev, #carouselButtonNext {
	padding:0.1em 1em 0.4em 1em;
	border-radius:3px;
	-moz-border-radius: 3px;
	-webkit-border-radius:3px;
	background:#f60;
	color:#fff;
	text-decoration:none;
}

#carouselButtonPrev:hover, #carouselButtonNext:hover {
	background:#ff8800;
}