@charset "UTF-8";
/* CSS Document */
body {
background:url(../img/bg-main-full.gif) repeat-x #A5B4B1;
color:#222;
}


body a {
color:#fff;
}

body h1 {color:#fff; font-size:2em;}

body h2 {
color:#8C3124;
}

body h3 {
color:#f2f2f2;
}

body h4 {margin-bottom:.5em;}



.wrapper {
margin:0 auto;
padding:30px 10px 0;
width:970px;
}


/* Header */
.header h1 a {
background:url(../img/studio605-logo.gif) no-repeat scroll 0 0;
display:block;
float:left;
height:0;
overflow:hidden;
padding-top:50px;
width:145px;
}

.header .nav {
list-style:none;
margin:0;
padding:0;
}

.header .nav li a {
background:url(../img/bg-menuItem.gif);
display:block;
line-height:40px;
margin:0 5px;
text-align:center;
width:61px;
}

.header .nav li a:hover {
background:url(../img/bg-menuItem_o.gif);
color:#333;
text-decoration:none;
}


.header .nav li.current a {
background:url(../img/bg-menuItem_o.gif);
color:#333;
text-decoration:none;
}

.content {
background:#f5f5f5;
clear:both;
margin:80px 0 0 150px;
padding:20px;
width:560px;
font-size:1.1em;
}

#home-page .content,#projects-page .content {
background:none;
margin:0;
padding:0;
width:auto;
}

/* About */
.about {
clear:both;
float:left;
width:50%;
}

#home-page .about .intro {
height:240px;
margin:20px 0 0;
padding:0 30px 0 0;
}

#home-page h2 {color:#f5f5f5;}

.about .intro {
min-height:188px;
margin:40px 0 0;
padding:0 30px 0 0;
}


.about .intro p {
font-size:1.1em;
line-height:1.4em;
}

.about .projects {
margin-top:40px;
}

.about .projects ul {
list-style:none;
margin:15px 0;
padding:0;
}

.about .projects ul li {
float:left;
font-size:1.3em;
margin:0 20px 10px 0;
}

.about .projects ul li a {
background:#555;
color:#fff;
display:block;
padding:5px 10px;
width:190px;
}


.about .projects ul li a:hover {
background:#f2f2f2;
color:#555;
text-decoration:none;
}

/* Gallery */
.gallery {
float:left;
width:50%;
}

DIV#loader {
  width: 430px;
  height: 324px;
}

/** 
 * While we're having the loading class set.
 * Removig it, will remove the loading message
 */
DIV#loader.loading {
 /* background: url(../img/spinner.gif) no-repeat center center; */
}

.gallery h3 {
background:#8C3124;
margin:30px auto 0;
padding:10px;
width:420px;
}


.gallery .featured {
background:url(../img/ajax-loader.gif) no-repeat center center #8C3124;
margin:0 auto;
padding:5px;
width:430px;
height:330px;
}

.gallery .featured .caption {
background:url(../img/bg-black-50.png);
color:#fff;
margin:295px 0 0;
padding:5px;
position:absolute;
width:420px;
font-size:.9em;
}

.gallery .featured img {
width:430px;
}
.thumbs .carousel {width:445px; height:90px;}
.thumbs .left {
background:url(../img/arrow-left.gif) no-repeat 10px 42px;
display:block;
float:left;
height:70px;
width:20px;
}

.thumbs .right {
background:url(../img/arrow-right.gif) no-repeat 2px 42px;
display:block;
float:left;
height:70px;
width:20px;
}

.thumbs ul {
list-style:none;
margin:5px 0 0;
padding:0;
height:90px;
}

.thumbs ul li {
float:left;
margin:2px;
}

.thumbs ul li a {
border:5px solid #555;
cursor:pointer;
display:block;
height:75px;
padding:0;
width:75px;
}

.thumbs ul li a img{display:block;}

.thumbs ul li a.selected {
border:5px solid #D1DFDB;
}

.thumbs ul li a:hover {
border:5px solid #f2f2f2;
}

#footer {
clear:both;
}

/* Contact */
#contact-page ol li {
list-style:none;
margin:10px 0;
}

#contact-page form {
margin:0 auto;
width:400px;
}

#contact-page form label {
display:block;
float:left;
width:80px;
}

#contact-page form input {
border:3px solid #ccc;
padding:5px;
width:220px;
}

#contact-page form textarea {
border:3px solid #ccc;
height:200px;
width:214px;
}

#contact-page .submit {
background:#8C3124;
border-color:#fff;
color:#fff;
display:block;
font-size:1.3em;
font-weight:700;
margin:0 0 0 98px;
width:235px;
}

/* Links */
#links-page .content ul li {
float:left;
list-style:none;
margin:5px 10px;
}

#links-page .content ul li a {
background:#8C3124;
display:block;
font-size:1.1em;
padding:5px;
width:230px;
}

.header .nav li,.thumbs .carousel {
float:left;
}