/* YAHOO RESET -------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

/* --- DEFAULT BEGIN --- */

html {
	background-color: #016cd9;
}

body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:  15px;
	line-height: 1.5em;
	font-weight: lighter;
	color:#FFF;
	margin: 0px;	
}

img {
	border-style: none;
}

hr {
	height: 3px;
	background-color: rgba(1, 22, 62, 0.4);
	border: none;
	box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
	margin: 0 0 10px 0;
	color: #034082;
}

h1 {
	font-size: 35px;
	margin-bottom: 20px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
	color: #FFF;
	font-weight: lighter;
}

h2 {
	font-size: 22px;
	margin-bottom: 10px;
	font-weight:  lighter;
	color: #FFF;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

h3 {
	font-size: 22px;
	margin: 20px 0 10px 0;
	font-weight:  lighter;
	color: #034082;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

h4 {
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 8px;
}

h5 {
	color: #ce2424;
	font-size: medium;
	font-weight: lighter;
}

a {
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

strong, b {
	font-weight: bolder;
}

small {
	font-size: 10px;
}

#top-two {
	background: url(../images/background.png) repeat-x #016cd9;
	min-height: 800px;
	width: 100%;
}

/* --- TOP BEGIN --- */
#logo {
	background: url(../images/logo.png);
	width: 250px;
	height: 35px;
	display: block;
	float: left;
	text-indent: -9999px;
}

#top {
	height: 120px;
	width: 100%;
}

#top-content {
	width: 900px;
	margin: 0 auto 0 auto;
	padding: 40px 0 0 0;
}

nav {
	float: right;
}

nav ol li {
	float: left;
	margin: 0 0 0 10px;
	padding: 5px 10px 7px 10px;
	border-radius: 3px;
	font-size: 18px;
}

nav a {
	text-decoration: none;
	color: #FFF;
}

nav ol li.active {
	background: #FFF;
	color: #00054c;
}

nav ol li.active a {
	background: #FFF;
	color: #00054c;
}

/* --- CONTENT BEGIN --- */
#wrapper-main {
	width: 900px;
	min-height: 640px;
	margin: 0 auto 0 auto;
	padding: 40px 0 0 0;
}

#bottom-content {
	height: 100px;
	margin: 0 auto 0 auto;
	padding: 20px 0 0 0;
	width: 900px;
}

.warning {
	color: #ff0d0d;
	margin-bottom: 5px;
}

/* -- Portfolio Slideshow --- */

#slideshow {
	margin:0 auto;
	width:900px;
	min-height: 700px;
	position:relative;
}

#slideshow #slidesContainer {
  margin:0 auto;
  width:800px;
  min-height: 700px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:800px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  min-height:700px;
}

.control {
  display:block;
  width:50px;
  height:500px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

#leftControl {
  top:0;
  left:0;
  background:transparent url(../images/arrow-left.png) no-repeat 0 0;
}

#rightControl {
  top:0;
  right:0;
  background:transparent url(../images/arrow-right.png) no-repeat 0 0;
}

.screenshot {
	margin: 20px auto 20px 0px;
}

.skills {
	padding: 30px 0;
	overflow: hidden;
}

section.skill {
	text-shadow: 0 1px 1px rgba(0,0,0, 0.3);
	width: 305px;
	margin: 0 10px 30px 0;
	padding-left: 80px; 
	float: left;
}

section.skill p {
	font-size: 14px;
}

.analysis {
	background: url(../images/skill-analysis.png) left top no-repeat;
}

.design {
	background: url(../images/skill-design.png) left top no-repeat;
}

.develop {
	background: url(../images/skill-develop.png) left top no-repeat;
}

.html {
	background: url(../images/skill-html.png) left top no-repeat;
}

.html5 {
	background: url(../images/skill-html5.png) left top no-repeat;
}

.social {
	background: url(../images/skill-social.png) left top no-repeat;
}

/* -- Index page -- */

#tagline {
	margin-bottom: 30px;
	font-size: 16px;
	font-weight: lighter;
}

#front-show {
	background: url(../images/front-show.png);
	height: 374px;
	width: 900px;
}

#front-show a {
	color: #034082;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
	text-decoration: none;
	background: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display: block;
	float: right;
	font-size: 16px;
	position: relative;
	top: 167px;
	right: 407px;
	padding: 10px;
}

#action {
	color: #034082;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
	font-size: 20px;
	line-height: 2em;
	background: #FFF;
	padding: 15px;
	margin: 20px 0 20px 0;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;
}

.contact-me {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 200px;
	height: 80px;
	background: url(../images/contact-me.png) no-repeat;
	display: block;
	float: right;
	font-size: 14px;
}


/* --- Contact Form --- */
#contact-left {
	width: 350px;
	float: left;
}

#contact-left h4 {
	width: 100px;
	float: left;
	display: inline-block;
	margin: 10px 0;
}

.middle {
	margin-top: 20px;
}

#contact-left p {
	width: 250px;
	margin: 10px 0;
	display: inline-block;
}

#contact-left a {
	text-decoration: none;
	color: #FFF;
}

#contact {
	width: 450px;
	border: 2px solid #FFF;
	border-radius: 10px;
	float: right;
	padding: 10px;
	background-color: #FFF;
	color: #00054c;
}

#contact fieldset {
	border: 1px solid #EEE;
	padding: 10px;
	margin-top: 20px;
}

#contact header {
	margin-bottom: 20px;
}

#contact legend {
	text-align: right;
	border: 1px solid #EEE;
	border-radius: 5px;
	padding: 5px;
}

#contact label {
	width: 180px;
	float: left;
	display: inline-block;
}

#contact input {
	background: #EEE;
	color: #777;
	padding: 5px;
	width: 200px;
	border: 1px solid #CCC;
	margin: 5px 0;
	border-radius: 5px;
}

#contact input:focus:invalid {
	background: #faa7a7;
}

#contact input:focus:valid {
	background: #cff1d0;
}

#contact textarea {
	background: #EEE;
	color: #777;
	padding: 5px;
	border: 1px solid #CCC;
	margin: 5px 0;
	border-radius: 5px;
}

#contact select {
	margin: 5px 0;
}

#contact input.submit {
	position: relative;
	width: 80px;
	border: 1px solid #333;
	color: #FFF;
	padding: 6px 15px;
	margin-top: 20px;
	text-decoration: none;
	background: #333;
}

#errors {
	border:solid 1px #E58E8E;
	padding:10px;
	margin:25px 0px;
	display:block;
	width:428px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	background:#FFE6E6 center;
	display:none;
	font-size: 12px;
}

#errors li {
	padding:2px;
	list-style:none;	
}

#errors li:before {
	content: ' - ';	
}

#errors #info {
	font-weight:bold;
}

#errors #info:before {
	content: '';	
}

#success {
	border:solid 1px #83D186;
	padding:25px 10px;
	margin:25px 0px;
	display:block;
	width:428px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	background:#D3EDD3 center;
	font-size: 12px;
	font-weight:bold;
	display:none;
}

#errors.visible, #success.visible {
	display:block;	
}

/* --- FOOTER BEGIN --- */
#footer {
	background: url(../images/footer.png) repeat-x #00054c;
	min-height: 120px;
	padding-top: 20px;
}

#footer section {
	width: 215px;
	float: left;
	margin-right: 10px;
}

#footer-content {
	width: 900px;
	margin: 0 auto 0 auto;
}

#footer-content a {
	text-decoration: none;
	color: #FFF;
}

#footer-content a:link {
	text-decoration: none;
	color: #FFF;
}

#footer-content a:visited {
	text-decoration: none;
	color: #FFF;
}

#footer-content a:hover {
	text-decoration: underline;
	color: #FFF;
}

#footer-content a:active {
	text-decoration: none;
	color: #FFF;
}

#footer-content img {
	margin: 4px 5px 0 0;
}