@import url(reset.css);

body {
background-image:url(images/bg.png);
color:#fff;
font-family:Helvetica, Arial, sans-serif;
}

#content {
margin:0 auto;
padding-top:15px;
text-align:left;
width:830px;
}

.return_top {
background-image:url(images/dottedline.png);
background-position:top center;
background-repeat:repeat-x;
clear:both;
color:#999087;
display:block;
margin: 0 auto 70px;
padding-top:7px;
text-align:right;
text-decoration:none;
text-transform:uppercase;
width: 750px;
}

.return_top:hover {
color:#fff;
}

#heading {
margin:0 auto 45px;
overflow:hidden;
padding:0;
width: 750px;
}

#heading ul {
float:left;
font-family:Helvetica, Arial, sans-serif;
list-style:none;
margin:20px 0 0;
padding:0;
}

#heading ul li {
float:left;
margin:0 10px 0 0;
}

#heading ul li a {
display:block;
height:12px;
text-indent:-9999px;
width:56px;
}

#heading ul li a.portfolio {
background:url("images/roll_portfolio.png") 0 0 no-repeat;
margin-right: 6px;
}

#heading ul li a.resume {
background:url("images/roll_resume.png") 0 0 no-repeat;
}

#heading ul li a.contact {
background:url("images/roll_contact.png") 0 0 no-repeat;
}

#heading ul li a:hover {
background-position:-56px 0;
}

#heading ul li a:active {
background-position:-112px 0;
}

#heading h1 {
float:right;
margin:0;
}

#heading h1	a {
background-image:url("images/caitlinhathaway_h1.png");
background-repeat:no-repeat;
display:block;
height:55px;
margin:0;
padding:0;
text-indent:-9999px;
width:195px;
}

p.intro_text {
clear:both;
color:#c6bcb2;
font-size:1.9em;
line-height:1.7em;
padding-top:2em;
}

#portfolio {
margin: 0 auto;
width: 830px;
}

#portfolio h2 {
background-image:url(images/portfolio.png);
background-repeat:no-repeat;
height:21px;
margin: 0 auto 25px;
text-indent:-9999px;
width: 750px;
}

#portfolio ul {
float: left;
overflow:hidden;
width: 750px;
}

.debug {
border: 1px solid purple
}

#portfolio ul li {
float:left;
margin-bottom:50px;
margin-left:10px;
margin-right:10px;
width:230px;
}

#portfolio ul li a {
color:#e6d1c4;
display:block;
font-size:1em;
font-weight:700;
line-height:1.5em;
margin:0;
padding:0;
text-decoration:none;
width:230px;
}

#portfolio ul li a img {
margin:0 0 5px;
padding:0;
}

#portfolio ul li a:hover {
color:#f36;
}

#portfolio ul li a br {
margin:0;
}

#slider_nav {
position: relative;
top: 300px;
width: 830px;
}

.SlideItMoo_back {
background-image: url(images/portfolio-arrows.png);
background-repeat: no-repeat;
background-position: -60px -71px;
float: left;
width: 30px;
height: 71px;
cursor: pointer;
text-indent: -9999px;
}

.SlideItMoo_forward {
background-image: url(images/portfolio-arrows.png);
background-repeat: no-repeat;
background-position: 0px 0px;
float: right;
width: 30px;
height: 71px;
cursor: pointer;
text-indent: -9999px;
}

#SlideItMoo_inner {
margin: 0 auto;
width: 750px;
overflow: hidden;
}

.SlideItMoo_back:hover {
background-position: -30px -71px
}

.SlideItMoo_back:active {
background-position: 0px -71px
}

.SlideItMoo_forward:hover {
background-position: -30px 0px
}

.SlideItMoo_forward:active {
background-position: -60px 0px
}

#resume {
margin: 0 auto;
width: 750px;
}

#resume img {
padding-right:5px;
}

#resume p {
font-size:1.25em;
line-height:1.5em;
}

#resume h2 {
background-image:url(images/resume.png);
background-repeat:no-repeat;
height:21px;
padding-bottom:20px;
text-indent:-9999px;
width:62px;
}

#resume h3 {
color:#fff;
float:left;
font-family:Helvetica, Arial, san-serif;
font-size:1.2em;
font-weight:700;
letter-spacing:.25em;
line-height:1.7em;
margin-bottom:10px;
text-transform:uppercase;
width:125px;
}

#resume h4 {
color:#ff3;
display:inline;
font-family:Helvetica, Arial, sans-serif;
font-size:1.25em;
font-weight:700;
padding-right:10px;
}

p.company {
display:inline;
font-style:italic;
}

p.location {
display:inline;
font-style:italic;
}

p.responsibilities {
padding-top:5px;
}

#resume dl {
clear:both;
line-height:1.5em;
}

#resume dt {
clear:left;
color:#e6d1c4;
float:left;
width:125px;
}

#resume dd {
margin-bottom:2.5em;
margin-left:130px;
}

#resume_download {
clear:both;
margin-bottom:50px;
padding-top:2em;
}

#resume_download a {
color:#f36;
margin-bottom:50px;
padding-top:10px;
}

#resume_download a img {
text-decoration:none;
}

#resume_download a:hover {
text-decoration:none;
}

#contact {
margin: 0 auto;
overflow:hidden;
padding-bottom:70px;
width: 750px;
}

#contact .hidden {
display:none;
}

#contact h2 {
background-image:url(images/contact.png);
background-repeat:no-repeat;
height:16px;
margin-bottom:25px;
text-indent:-9999px;
width:63px;
}

#contact form {
float:left;
line-height:1.5em;
margin-bottom:3em;
}

#contact label {
display:block;
float:left;
font-weight:700;
padding-right:30px;
text-align:right;
text-transform:uppercase;
width:95px;
}

#contact input,#contact textarea {
background-image:url(images/bg-tile_light.png);
border:1px solid #847165;
color:#fff;
font-family:Helvetica, Arial, sans-serif;
font-size:1.2em;
margin-bottom:20px;
padding:2px;
width:250px;
}

#contact button {
background-color:#362113;
border:1px solid #847165;
color:#ff3;
float:left;
font-size:.9em;
margin-left:125px;
text-transform:uppercase;
}

#contact input:hover,#contact textarea:hover,#contact button:hover,#contact input:focus,#contact textarea:focus,#contact button:focus {
border:1px solid #e6d1c4;
}

#contact .loading {
background-image:url(images/loading2.gif);
background-position:center 75px;
background-repeat:no-repeat;
height:275px;
margin-bottom:50px;
width:200px;
}

#contact .confirmation {
float:left;
width:500px;
}

#contact .error {
border:1px solid #ff3;
}

#form_message {
color:#e6d1c4;
float:right;
font-family:Helvetica, Arial, sans-serif;
font-size:1.15em;
line-height:1.5em;
padding-right:30px;
width:275px;
}

#form_message p {
margin-bottom:1.7em;
}

#form_message ul li {
list-style-type:square;
margin-bottom:1.5em;
}

#form_message ul li em {
color:#ff3;
}

#footer {
background-color:#372214;
border-top:1px solid #553d2c;
line-height:1.5em;
margin:0;
min-height:160px;
overflow:hidden;
padding:1em 0 4em;
width:100%;
}

#footercontainer {
margin:20px auto 0;
padding:0;
text-align:left;
width:750px;
}

div.photo {
float:left;
}

#bio {
float:left;
font-family:Helvetica, Arial, sans-serif;
margin-left:25px;
width:350px;
}

#bio a {
color:#f36;
}

#bio a:hover {
text-decoration: none;
}

#copyright {
float:right;
text-align:right;
width:250px;
}

#footer p {
font-family:Helvetica, Arial, sans-serif;
}

/* Twitter */
#twitter {
position: absolute;
top: 50px;
left: 600px;
width: 200px;
border: 1px solid purple;
background-color: #fff;
padding: 10px;
}

#tweet {
font-size: 150%;
color: #000;
display: block;
}

#tweet-date {
display: block;
font-size: 100%;
font-style: italic;
color: #c4c4c4;
}