/* Global Body Styles */

body { background: url('../images/global/bkgnd.png'); color: #fff; font-family: Calibri, Arial, Verdana, sans-serif }
#page-wrapper { background: url('../images/global/top-bkgnd-repeat.png') repeat-x; min-height: 827px }
#logo { background: url('../images/global/filler.png') no-repeat; width: 100px; height: 50px; display: block; text-indent: -9999px; float: left }
header { width: 950px; margin: 0 auto 55px auto; padding: 35px 0 0 0; overflow: hidden }
nav { float: right }
nav ul li { float: left; margin-left: 10px; padding: 5px 10px 7px 10px; border-radius: 3px; font-size: 18px }
nav ul li.active { background: #fff; color: #01163e }
nav a { color: #fff; text-decoration: none }
nav li.active a { color: #01163e }

/* Selection Styling */
::selection, ::-moz-selection, ::-webkit-selection { background: #D83B3E; }
::selection a, ::-moz-selection a, ::-webkit-selection a { color: #fff }

/* Headers */
h1 { margin-bottom: 0.5em; font-weight: normal }
h1 { font-size: 42px }
h2 { font-size: 18px; font-weight: strong; margin-bottom: 0.25em }
h3 { font-size: 22px; font-weight: normal; margin-bottom: 0.5em }
p { line-height: 1.25em; margin-bottom: 1em }

/* Grid */
#portfolio { width: 1100px; margin: 0 auto -100px auto; height: 700px; }
#portfolio-content { float: left; width: 950px; position: relative }
	#portfolio-content .description { width: 410px; float: left; font-size: 18px; margin-right: 20px }
#main { width: 950px; margin: 0 auto; overflow: hidden }
#footer { background: url('../images/global/footer-bkgnd.png') top repeat-x #021a49; height: 208px; margin-top: 50px }
	#footer .content-wrapper { background: url('../images/global/footer-bkgnd-center.jpg') center top no-repeat; height: 178px; padding-top: 30px }
	#footer .content { width: 950px; margin: 0 auto }
	#footer section { width: 310px; float: left; margin-right: 10px }
	#footer section p { font-size: 14px }
	#footer section h5 { color: #ad2d2f; font-size: 16px; margin-bottom: 0.35em; font-weight: strong }
	#footer a { color: #fff }
#blog { float: left; width: 720px; margin-right: 30px }
#side { float: left; width: 200px }

/* Widgets */
#portfolio-prev, #portfolio-next { text-align: center; width: 75px; float: left; margin-top: 220px; cursor: pointer; position: relative }
#portfolio-prev .glow { display: none; opacity: 0; background: url('../images/global/arrow-left-glow.png') no-repeat; width: 40px; height: 75px; position: absolute; top: -8px; left: 17px }
#portfolio-next .glow { display: none; opacity: 0; background: url('../images/global/arrow-right-glow.png') no-repeat; width: 40px; height: 75px; position: absolute; top: -8px; left: 18px }
#signature { margin-bottom: 1em }

.portfolio-item { position: absolute; height: 700px; top: 0px; left: 410px }
.portfolio-item .image { width: 500px; height: 500px; background-repeat: no-repeat; text-indent: -9999px; left: 30px; z-index: 500; position: absolute}
.portfolio-item .shadow { background: url('../images/portfolio/shadow.png') no-repeat; width: 564px; height: 33px; z-index: 400; position: absolute; top: 485px }
.portfolio-item .reflection { height: 141px; width: 500px; position: absolute; top: 500px; left: 30px }

#dots-wrapper { margin-top: 520px; float: right; left: -50%; position: relative }
ul#dots { list-style: none; padding: 0;  left: 50%; position: relative }
ul#dots li { width: 15px; height: 15px; float: left; margin: 2px; position: relative }
ul#dots li.active { background: url('../images/portfolio/dot-active.png') 0px 0px no-repeat }
ul#dots li { background: url('../images/portfolio/dot-inactive.png') 4px 4px no-repeat }

.dark { color: #034082; text-shadow: 0 1px 1px rgba(255,255,255, 0.3); }
hr.dark { 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}

#skills { padding: 30px 0; overflow: hidden }
section.skill { text-shadow: 0 1px 1px rgba(0,0,0, 0.3); width: 385px; margin: 0 10px 15px 0; padding-left: 80px; float: left }
section.skill.icon-design { background: url('../images/icons/color-palette.png') left center no-repeat }
section.skill.icon-javascript { background: url('../images/icons/cup.png') left center no-repeat }
section.skill.icon-html { background: url('../images/icons/html.png') left center no-repeat }
section.skill.icon-programming { background: url('../images/icons/macbook.png') left center no-repeat }
section.last { margin-right: 0px !important }
section.skill h4 { font-size: 18px; font-weight: normal; margin-bottom: 0.35em }
section.skill p { font-size: 14px }

#contact-form { margin: 30px 0; overflow: hidden }
#contact-form-left { width: 300px; margin-right: 40px; float: left }
#contact-form-right { width: 590px; float: left }
#contact-form ul { list-style: none }
#contact-form li { margin-bottom: 10px }
#contact-form label { display: block; margin: 0 0 3px 0 }
#contact-form input[type=text], #contact-form textarea { color: #fff; border: 1px solid #0260b6; background: rgba(255,255,255,0.2); width: 99%; padding: 8px 10px; border-radius: 5px; outline: none; font-size: 14px; -webkit-box-shadow: inset 1px 3px 6px #0266ba, 1px 1px 1px #0266ba; }
#contact-form textarea { height: 100px; font-family: Calibri, Arial, Verdana, sans-serif }

.btn-send { background: url('../images/global/btn-send.png'); font-size: 0; display: block; line-height: 0; width: 158px; height: 38px; border: 0; text-indent: -9999px; cursor: pointer }

/* Blog Styling */

#blog { text-shadow: 0 1px 1px rgba(0,0,0, 0.3); }
#blog h1 { margin-bottom: 0.1em }
#blog .date { color: #D83B3E }
#blog a { color: #D83B3E }
pre.prettyprint { text-shadow: none; background: #fff; padding: 15px; border: none; margin-bottom: 1em; border-radius: 7px; -moz-border-radius: 7px; line-height: 1.25em; font-family: Calibri, Arial, Verdana, sans-serif }
#side { font-size: 90% }
#side .avatar { border: 1px solid #fff; margin: 0 7px 7px 0; float: left }