/******** resets stuff *************
===================================*/

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;
}

/* 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;
}


/******** global stuff *************
===================================*/

body {
	margin:0;
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align:center;
	background:#3c220e url('../images/landscape.png') center top repeat-x;
}


h1 {
	font-weight:bold;
	font-size:3em;
	color:#F33;
	color:#FFF;
	font-family: Arial, Helvetica, sans-serif;
	margin:.2em 0 .2em 0;
}
h2 {
	font-weight:bold;
	font-size:1.7em;
	color:#555;
	font-family: Arial, Helvetica, sans-serif;
	margin:.1em 0 .1em 0;
}
h3 {
	font-weight:bold;
	font-size:1.4em;
	font-family: Arial, Helvetica, sans-serif;
	margin:.05em 0 .05em 0;
	color:#BAAA86;
}
h4 {
	font-weight:bold;
	font-size:1.1em;
	font-family: Arial, Helvetica, sans-serif;
	margin:.05em 0 .05em 0;
}

a, a:visited  {
/*	color: #C30;*/
	color:#febd8f;
	text-decoration:none;
	border:none;
}
a:hover, a:visited:hover {
	color: #ff2266;
}

img {
	border:0;	
	margin:0;
	padding:0;
}

p {
	margin:.8em 0 .8em 0;
	line-height:1.3em;
}

ul {
	margin-bottom:1em;
}
ul li {
	list-style: disc outside;
	margin:0 0 .2em 2em;
}


textarea {
	width:300px;
}

input.fieldclass {
	width:290px;
}

/******** main nav  *****************
===================================*/
.title {
	margin:20px auto 800px;	
	width:600px;
	background:#FFF;
	padding:10px;
	-moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; 		
	-moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px;
}	
.name {
	font: 4em "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	color:#f60d73;
	font-weight:bold;
}
.subheading {
	font: .8em "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	color:#999;
}

.nav {
	width:660px;
	margin:5px auto;
}
.nav-wide {
	width:810px;
	margin:5px auto;
}
a.navitem, a:visited.navitem {
	font: 2em "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	color:#f60d73;
	background:#FFF;
	padding:5px 40px;
	margin:5px;
	-moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;
}
a:hover.navitem, a:visited:hover.navitem {
	background:#f60d73;
	color:#FFF;
}

a.highlight, a:visited.highlight {
	background:#f60d73;
	color:#FFF;
}


/******** content stuff *************
===================================*/

#content {
	margin:0 auto;
	margin-top:30px;
	width:960px;
	overflow:hidden;
	color:#ccc;
}

.content-box {
	width:960px;
	margin:20px auto;
	padding:30px 8px 0px 8px;
	overflow:visible;
	text-align:left;
	position:relative;	
}

.projects-title {
	background:#000;
	color:#FFF;
	margin:20px auto 0 auto;
	text-align:center;
	padding:10px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	font-size:60px;
	width:600px;
}

.spacer-img {
	margin:400px auto;
}


#contact {
	margin-bottom:200px;
}


.roundBlack {
	background:#000;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	width:800px;
	padding:20px;
	margin:30px auto 10px auto;
	overflow:hidden;
}

.myname {
	float:left;
	width:400px;
}

.download {
	width:400px;
	float:right;
	margin-top:20px;
}


a.pdf, a.pdf:visited {
	width:150px;
	display:block;
	background:#222;
	color:#FFF;
	text-align:center;
	padding:5px;
	float:right;
	margin-left:20px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	
}
a.pdf:hover, a.pdf:visited:hover {
	background:#333;
	color:#ff2266;
}

.contact-text {
	float:left;
	width:400px;
	margin-left:20px;
}
.contact-form {
	margin-right:20px;
	float:right;
	width:300px;
}

#submiter {
	cursor:pointer;
	margin-top:10px;
	float:right;
	border:none;
	background:#222;
	color:#FFF;
	text-align:center;
	padding:5px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
#submiter:hover {
	background:#888;
	color:#000;
}

.notification_error {
	border: 1px solid #A25965;
	height: auto;
	padding: 4px;
	background: #F8F0F1;
	text-align: left;
	-moz-border-radius: 5px;
	color:#A25965;
}

.notification_ok {
	border: 1px #567397 solid;
	height: auto;
	padding: 8px;
	background: #f5f9fd;
	text-align: center;
	-moz-border-radius: 5px;
	color:#567397;
}


/******** Slider Galleries **********
===================================*/


#slider {
  width: 720px;
  height:300px;
  margin: 0 auto;
  position: relative;
}
#profile-slider {
  width: 700px;
  margin: 0 auto;
  position: relative;
}


.scroll {
  height: 300px;
  width:700px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
/*  background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;*/
}

#slider .scroll {
	width:720px;
}

.scrollContainer div.panel {
  padding: 0;
  height: 300px;
  width: 680px; /* change to 560px if not using JS to remove rh.scroll */
}

#slider .scrollContainer div.panel {
	width:700px;
}

.popup {
	float:left;
	width:300px;
}

.gallery-text {
	width:380px;
	float:right;
}

.gallery-text h1 {
	font-size:2em;
}
.tech {
	color:#625851;
	font-style: italic;
}

.profile-text {
	width:340px;
	float:left;
	color:#FFF;
}

#gallery-nav {
	margin-top:15px;
}
#profile-nav {
	width:190px;
	float:right;
	margin-top:7px;
}
#profile-nav li a {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
	background:#333;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	margin:4px;
	padding:5px;
	color:#000;
}
#profile-nav li a.selected, #profile-nav li a:hover {
	background:#999;
}
#profile-slider ul {
	line-height:1.3em;
	margin-top:40px;
}
#profile-nav ul.navigation {
	width:250px;
}

ul.navigation {
    list-style: none;
    margin: 0 auto;
    padding: 0;
	width:745px;
}

ul.navigation li {
    display: inline;
    margin: 0;
}

ul.navigation a {
    padding: 0;
    text-decoration: none;
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}

ul.navigation a:hover {    
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

ul.navigation a.selected  {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}
ul.navigation a.selected img {
	border:4px solid #FFF;
	position:relative;
	top:4px;
}

ul.navigation a:focus {
    outline: none;
}

.scrollButtons {
  position: absolute;
  top: 120px;
  cursor: pointer;
}

.scrollButtons.left, .scrollButtons.left2 {
  left: -60px;
}

.scrollButtons.right, .scrollButtons.right2 {
  right: -70px;
}




/******** random classes ************
===================================*/


.backdrop {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index:-1;
	opacity:0.9;
	filter: alpha(opacity=9);
	height:799px;
}



.centered {
	text-align:center;
}
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}
.alignright {
	float: right;
}
.alignleft {
	float: left
}


/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; }
.ui-corner-tr { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; }
.ui-corner-br { -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px; }
.ui-corner-top { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px; }
.ui-corner-right {  -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px; }
.ui-corner-left { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; }
.ui-corner-all { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }



/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#000;}

#colorbox{}
    #cboxContent{margin-top:20px;}
        #cboxLoadedContent{background:#000; padding:5px;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext.hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom center;}