html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,figure,footer,header,
hgroup,menu,nav,section,menu,
time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article,aside,figure,footer,header,
hgroup,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
/* END RESET CSS */
/* fonts.css from the YUI Library:developer.yahoo.com/yui/
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages */
body{font:13px sans-serif;*font-size:small;*font:x-small;line-height:1.22;}
table{font-size:inherit;font:100%;}
select,input,textarea{font:99% sans-serif;}
/* normalize monospace sizing en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre,code,kbd,samp{font-family:monospace,sans-serif;}
/* minimal base styles */
body,select,input,textarea{color:#444;}
/* Headers (h1,h2,etc) have no default font-size or margin,you'll want to define those yourself. */
h1,h2,h3,h4,h5,h6{font-weight:bold;text-rendering:optimizeLegibility;}
html{-webkit-font-smoothing:antialiased;}
a:hover,a:active{outline:none;}
a,a:active,a:visited{color:#607890;}
a:hover{color:#036;}
small{font-size:85%;}
strong,th{font-weight:bold;}
td,td img{vertical-align:top;}
sub{vertical-align:sub;font-size:smaller;}
sup{vertical-align:super;font-size:smaller;}
pre{padding:15px;white-space:pre;/* CSS2 */ white-space:pre-wrap;/* CSS 2.1 */ white-space:pre-line;/* CSS 3 (and 2.1 as well,actually) */ word-wrap:break-word;/* IE */}
input[type="radio"]{vertical-align:text-bottom;}
input[type="checkbox"]{vertical-align:bottom;*vertical-align:baseline;}
.ie6 input{vertical-align:text-bottom;}
label,input[type=button],input[type=submit],button{cursor:pointer;}
::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none;}
::selection{background:#FF5E99;color:#fff;text-shadow:none;}
a:link{-webkit-tap-highlight-color:#FF5E99;}
/* always force a scrollbar in non-IE */
html{overflow-y:scroll;}
/* make buttons play nice in IE */
button{width:auto;overflow:visible;}
/* bicubic resizing for non-native sized IMG */
.ie7 img{-ms-interpolation-mode:bicubic;}
/* Non-semantic helper classes */
/* for image replacement */
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;}
/* Hide for both screenreaders and browsers */
.hidden{display:none;visibility:hidden;}
/* Hide only visually,but have it available for screenreaders */
.visuallyhidden{position:absolute !important;clip:rect(1px 1px 1px 1px);/* IE6,IE7 */ clip:rect(1px,1px,1px,1px);}
/* Hide visually and from screenreaders,but maintain layout */
.invisible{visibility:hidden;}
/* >> The Magnificent CLEARFIX << */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
/* Hides from IE-mac \*/
.clearfix{display:block;}



 /* Primary Styles Author: Zac Parker */

/* FONT-FACE --------------------------------------------------------------------- */

@font-face { font-family: 'Rockwell Bold'; src: url('fonts/rockwellstd-bold-webfont.eot'); src: local('☺'), url('fonts/rockwellstd-bold-webfont.woff') format('woff'), url('fonts/rockwellstd-bold-webfont.ttf') format('truetype'), url('fonts/rockwellstd-bold-webfont.svg') format('svg'); font-size-adjust: 0.47; }
@font-face { font-family: 'Rockwell'; src: url('fonts/rockwellstd-webfont.eot'); src: local('☺'), url('fonts/rockwellstd-webfont.woff') format('woff'), url('fonts/rockwellstd-webfont.ttf') format('truetype'), url('fonts/rockwellstd-webfont.svg') format('svg'); font-size-adjust: 0.47; }
@font-face { font-family: 'Archer Book'; src: url('fonts/archer-book-pro-webfont.eot'); src: local('☺'), url('fonts/archer-book-pro-webfont.woff') format('woff'), url('fonts/archer-book-pro-webfont.ttf') format('truetype'), url('fonts/archer-book-pro-webfont.svg') format('svg'); font-size-adjust: 0.41; }
@font-face { font-family: 'Archer Medium'; src: url('fonts/archer-medium-pro-webfont.eot'); src: local('☺'), url('fonts/archer-medium-pro-webfont.woff') format('woff'), url('fonts/archer-medium-pro-webfont.ttf') format('truetype'), url('fonts/archer-medium-pro-webfont.svg') format('svg'); font-size-adjust: 0.41; }
@font-face { font-family: 'Archer Light'; src: url('fonts/archer-light-pro-webfont.eot'); src: local('☺'), url('fonts/archer-light-pro-webfont.woff') format('woff'), url('fonts/archer-light-pro-webfont.ttf') format('truetype'), url('fonts/archer-light-pro-webfont.svg') format('svg'); font-size-adjust: 0.41; }

/* GLOBAL ------------------------------------------------------------------------ */

body { background: #9fb8a8 url("../images/bg.png") 0 0 repeat; }

header { margin-top: 60px; }


.active_item span { background-position: bottom left !important; }

#container { width: 960px; margin: 0 auto; }
#main { width: 100%; margin: 80px auto 50px; }

#home, #about, #portfolio, #contact { border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; background: rgba(255,255,255,0.2); width: 640px; margin: 0 auto; padding: 5px 0 10px 0; }


/* NAV --------------------------------------------------------------------------- */

nav { width: 640px; margin: 20px auto; }
nav ul { list-style: none; margin-left: none; padding-left: none; }
nav ul li { float:left;  }
nav ul li a { display: block; font-size: .001em; color: #A2B7AE; text-decoration: none; }
nav ul li a:hover { text-decoration: none; font-size: .001em; color: #A2B7AE; }
#prev { height: 24px; width: 60px; position: relative; margin: 0 0 0 10px; }
#prev span { background: url("../images/nav_left.png") top left no-repeat; position: absolute; width: 100%; height: 100%; }
#prev:hover span { background: url("../images/nav_left.png") bottom left no-repeat; }
#nav_home { height: 21px; width: 81px; position: relative; top: 1px; margin: 0 0 0 20px; }
#nav_home span { background: url("../images/home_link.png") top left no-repeat; position: absolute; width: 100%; height: 100%; }
#nav_home:hover span { background: url("../images/home_link.png") bottom left no-repeat; }
#nav_about { height: 21px; width: 80px; position: relative; top: 1px; margin: 0 0 0 25px; }
#nav_about span { background: url("../images/about_link.png") top left no-repeat; position: absolute; width: 100%; height: 100%; }
#nav_about:hover span { background: url("../images/about_link.png") bottom left no-repeat; }
#nav_portfolio { height: 22px; width: 119px; position: relative; margin: 0 0 0 25px; }
#nav_portfolio span { background: url("../images/portfolio_link.png") top left no-repeat; position: absolute; width: 100%; height: 100%; }
#nav_portfolio:hover span { background: url("../images/portfolio_link.png") bottom left no-repeat; }
#nav_contact { height: 22px; width: 106px; position: relative; margin: 0 0 0 24px; }
#nav_contact span { background: url("../images/contact_link.png") top left no-repeat; position: absolute; width: 100%; height: 100%; }
#nav_contact:hover span { background: url("../images/contact_link.png") bottom left no-repeat; }
#next { height: 24px; width: 60px; position: relative; margin: 0 0 0 20px; }
#next span { background: url("../images/nav_right.png") top left no-repeat; position: absolute; width: 100%; height: 100%; }
#next:hover span { background: url("../images/nav_right.png") bottom left no-repeat; }





/* TITLES ------------------------------------------------------------------------ */

h1#zac_parker { background: url("../images/titles/zac_parker.png") top left no-repeat; height: 68px; width: 460px; margin: 10px auto; }
h2#web_developer { background: url("../images/titles/front_end_web_developer.png") top left no-repeat; height: 37px; width: 460px; margin: 0 auto; }

/* ABOUT ------------------------------------------------------------------------- */

#zac_photo { float: left; margin: 8px 15px 5px 0; }

/* PORTFOLIO --------------------------------------------------------------------- */

#portfolio p img { float: left; margin: 0 15px 5px 0; border: 10px solid white; }
#content_slider_container p.portfolio_piece { margin: 5px 0 0 0; font-size: 18px; height: 200px; }
#content_slider_container p#first_portfolio_piece { margin-top: 20px; }

/* TYPOGRAPHY ------------------------------------------------------------- */

#content_slider_container p { font-family: 'Archer Medium'; color: #444; text-shadow: 0 1px 2px #F2F2F2; font-size: 26px; padding: 10px 15px; }