* {
margin:0; padding:0
}
body {
background:#18191c; color:#8b98a3;
font:.835em/2.275em Arial,Sans-Serif;
text-align:center; letter-spacing:.033em
}
#header,#footer {
color:#a6aab3;
text-shadow:2px 2px 0 #151619;
padding:18px 0 16px;
text-align:left
}
#header {
background:url(images/home.jpg) top center;
border-bottom:1px solid #2a2c33
}
.wrapper {
width:750px; margin:0 auto;
text-align:justify
}
h1 {
float:left; font-size:1.75em; line-height:1em;
letter-spacing:.05em; padding:2px 0 0
}
h1 a {
font-weight:700 !important
}
h1 a:active,#container a:active {
color:#fff
}
#header ul {
float:right; font-size:1.3em; text-align:left;
margin:0 0 0 40px; padding:0
}
#header li {
display:inline;
letter-spacing:.05em;
padding:0 20px 0 0
}
#header li a {
color:#a6aab3;
font-weight:400
}
#header li a:hover {
color:#cbced5
}
#header li a:active {
color:#f0f0f0
}
#container {
background:#23262b;
text-shadow:2px 2px 0 #1f2024;
text-align:left; padding:30px 0
}
#footer {
border-top:1px solid #2a2c33;
font-size:1.1em; letter-spacing:.05em
}

a {
color:#cbced5;
text-decoration:none;
outline:none !important
}
a:hover {
color:#fafafa
}
#header a {
text-transform:lowercase;
font-weight:400
}
#container a,#footer a {
font-weight:700;
letter-spacing:.05em;
outline:none !important
}
a img {
border:0
}


hr {
clear:both; height:0; border:0;
border-top:1px solid #1d1f24;
border-bottom:1px solid #292b33;
margin:25px 0 25px
}
.clear {
clear:both
}
.right {
float:right
}
.left {
float:left
}
ul {
margin-left:15px;
list-style:circle
}
ul li {
padding-left:5px
}
#intro {
font-size:1.27em; line-height:1.95em;
letter-spacing:.05em
}
.skills {
margin-right:35px;
float:left
}
.skills + .skills {
margin-left:15px
}
p + p {
margin-top:15px
}

h2,h3,h4 {
font-family:"Helvetica Neue",arial,sans-serif; 
font-weight:700; color:#b7c3cd
}
h2 {
font-size:1.5em;
font-weight:normal;
letter-spacing:.075em;
margin-bottom:5px
}
h3 {
font-size:1.15em;
font-weight:normal;
letter-spacing:.1em;
margin-bottom:2px
}

p + p,p + ul,ul + p,p + ol,ol + p,blockquote + p,p + blockquote,p + form,form + p {
margin-top:15px
}
p + h2,ul + h2,ol + h2,form + h2,blockquote + h2 {
margin-top:25px
}
p + h3,ul + h3,ol + h3,form + h3,blockquote + h3 {
margin-top:20px
}
h2 + h3 {
margin-top:5px
}
h2 + h2,h3 + h3 {
margin-top:0
}
.col {
margin-top:5px;
width:30%; float:left
}
.col + .col {
margin-left:5%
}

#design {
background:url(images/design.png) 0 5px no-repeat
}
#dev {
background:url(images/dev.png) 0 2px no-repeat
}
#art {
background:url(images/art.png) 0 5px no-repeat
}
#design h3,#dev h3,#art h3 {
padding-left:35px
}

input,textarea {
background:#1a1b1f; color:#b7c3cd;
border:0; border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0 1px #2d2f38;
-webkit-box-shadow:0 1px #2d2f38;
-moz-box-shadow:0 1px #2d2f38;
margin-right:35px; padding:10px;
font:1.05em arial,verdana,tahoma,sans-serif;
letter-spacing:.05em
}
input {
min-width:200px
}
textarea {
min-width:455px;
min-height:200px;
line-height:1.3em
}
label {
display:block; font-size:1.1em;
margin:0 0 5px
}
form p {
margin:10px 0 !important
}

#profile {
float:right;
width:100px; height:100px;
margin:7px 0 35px 35px; padding:5px;
background:#1a1b1f; color:#b7c3cd;
border:0; border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0 1px #2d2f38;
-webkit-box-shadow:0 1px #2d2f38;
-moz-box-shadow:0 1px #2d2f38
}

.portfolio {
margin:30px 0 0; padding:10px;
background:#1a1b1f; color:#b7c3cd;
border:0; border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 1px #2d2f38;
-webkit-box-shadow:0 1px #2d2f38;
-moz-box-shadow:0 1px #2d2f38;
text-align:center
}
.portfolio h3 {
padding:0 10px 5px
}
.portfolio img {
width:710px; margin:0 auto
}
.portfolio p {
padding:0 10px 5px; text-align:justify
}

#lightbox{
position:absolute;	left:0; width:100%; z-index:100; text-align:center; line-height:0
}
#lightbox img {
width:auto; height:auto
}
#lightbox a img {
border:none
}
#outerImageContainer {
position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto
}
#imageContainer { 
padding:10px
}
#loading {
position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0
}
#hoverNav {
position:absolute; top:0; left:0; height:100%; width:100%; z-index:10
}
#imageContainer>#hoverNav {
left:0
}
#hoverNav a {
outline:none
}
#prevLink, #nextLink {
width:49%; height:100%; background-image:url(http://localhost/hannahwarmbier.com/images/data:image/gif;base64,AAAA); display:block
}
#prevLink {
left:0; float:left
}
#nextLink {
right:0; float:right
}
#prevLink:hover, #prevLink:visited:hover {
background:url(http://localhost/hannahwarmbier.com/images/prevlabel.gif) left 15% no-repeat
}
#nextLink:hover, #nextLink:visited:hover {
background:url(http://localhost/hannahwarmbier.com/images/nextlabel.gif) right 15% no-repeat
}
#imageDataContainer {
font:10px Verdana, Helvetica, sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em; overflow:auto; width:100%
}
#imageData {
padding:0 10px; color:#666
}
#imageData #imageDetails {
width:70%; float:left; text-align:left
}	
#imageData #caption {
font-weight:bold
}
#imageData #numberDisplay {
display:block; clear:left; padding-bottom:1.0em
}			
#imageData #bottomNavClose {
width:66px; float:right;  padding-bottom:0.7em; outline:none
}	 	
#overlay {
position:absolute; top:0; left:0; z-index:90; width:100%; height:500px; background-color:#000
}