@charset "UTF-8";
/* CSS Document */

/* RESET */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {
font-size:100%;
font-weight:400;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
}

ul,ol {
list-style:none;
}

abbr,acronym {
border:0;
}

fieldset,img {
border:0;
}

table {
border-collapse:collapse;
border-spacing:0;
}

caption,th {
text-align:left;
}


/* LAYOUT */

/* Wrappers */
.wrapper.header {
background:url(../images/tile-header.png) repeat;
border-bottom:1px solid #b3b3b3;
/*border-bottom:1px solid #555;*/
}

.wrapper.portfolio {
background:url(../images/tile-portfolio.png) repeat;
border-bottom:1px solid #b3b3b3;
}

.wrapper.nav {
/*background:url(../images/tile-nav.png) repeat-x;*/
}

.wrapper.content-lower {
background:url(../images/tile-content-lower.png) repeat;
border-top:1px solid #fafafa;
height:560px;
}


/* Footer */
.wrapper.footer {
background:url(../images/tile-footer.png) repeat;
border-top:1px solid #808080;
color:#555;
font-size:12px;
line-height:18px;
}

.wrapper.footer p {
margin:0 0 18px;
}

.wrapper.footer a {
border-bottom:1px dotted #555;
color:#555;
text-decoration:none;
}

.wrapper.footer a:hover {
border-bottom:1px solid transparent;
}

.wrapper.footer .validation {
font-size:14px;
line-height:28px;
}

.wrapper.footer img {
height:15px;
padding:0 5px 0 2px;
width:12px;
}


/* Sections */
#header, #content-lower, #footer {
margin:0 auto;
overflow:hidden;
padding:0 10px;
width:940px;
}

#header {
background:url(../images/bg-image-header.jpg) 300px 0 no-repeat;
height:499px;
}

#content-portfolio {
/*background:url(../images/bg-image-portfolio.jpg) 0 330px no-repeat;*/
height: auto;
margin:0 auto;
/*overflow:hidden;*/
width:960px;
}

#nav {
background:url(../images/tile-portfolio.png) repeat;
height:105px;
margin:0 0 50px;
width:960px;
}

#content-lower {
background:url(../images/bg-image-content-lower.jpg) 400px 80px no-repeat;
height:540px;
padding-top:50px;
}

#footer {
background:url(../images/logo-footer.jpg) 235px 45px no-repeat; /* logo */
padding:250px 0 40px;
margin:0 auto;
width:800px;
}

/* Subsections */
.section.intro {
width:460px;
}

.section.web-new, .section.web-dev, .section.portfolio {
float:left;
margin:0 20px 0 0;
width:280px;
}

.section.about {
float:left;
width:400px;
}

.section.contact {
float:right;
width:280px;
height:600px;
}


/* TYPOGRAPHY */
body {
background:#262626 url(../images/tile-footer.png) repeat;
color:#555;
font:14px/22px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif;
}

p {
margin:0 0 22px;
}

pre {
background-color:#eee;
font-size:12px;
padding:10px;
}

strong,b {
font-weight:700;
}

em,i {
font-style:italic;
}

code {
font-family:'Courier New', Courier, monospace;
}

.small {
font-size:11px;
}

.text-center {
text-align:center;
}


/* Headers */
#header h1 {
background:url(../images/logo-main.jpg) no-repeat;
height:100px;
margin:40px 0 32px;
width:500px;
}

#header h1 span, #header h2 span, .section.web-new h2 span, .section.web-dev h2 span, .section.portfolio h2 span, .section.about h2 span, .section.contact h2 span {
left:-999em;
position:absolute;
}

#header h2 {
background:url(../images/title-header.jpg) no-repeat;
height:54px;
width:380px;
}

.section.web-new h2, .section.web-dev h2, .section.portfolio h2 {
height:55px;
width:350px
}

.section.web-new h2 {
background:url(../images/title-web-new.jpg) no-repeat;
}

.section.web-dev h2 {
background:url(../images/title-web-dev.jpg) no-repeat;
}

.section.portfolio h2 {
background:url(../images/title-portfolio.jpg) no-repeat;
}

.section.about h2, .section.contact h2 {
height:50px;
width:220px;
}

.section.about h2 {
background:url(../images/title-about.jpg) no-repeat;
}

.section.contact h2 {
background:url(../images/title-contact.jpg) no-repeat;
}

h3 {
color:#6a6a6a;
font-size:12px;
padding:5px 0 10px;
}


/* NAVIGATION */
a {
border-bottom:1px dotted #3c3c3c;
color:#3c3c3c;
text-decoration:none;
}

a:hover {
border-bottom:1px solid transparent;
}

a:focus {
outline:none;
}

.basic_link a {
border-bottom:1px solid transparent;
}

.basic_link a:hover {
border-bottom:1px solid transparent;
}

.basic_link a:focus {
border-bottom:1px solid transparent;
}

/* Main Slider Navigation */
#slider {
position:relative;
width:960px;
overflow:visible;
}

.scroll {
clear:left;
height:500px;
left:10px;
overflow:auto;
position:relative;
width:940px;
}

.scroll-container div.panel {
float:left;
height:500px;
padding:0;
position:relative;
width:940px;
}

ul.navigation {
margin:0 auto;
width:960px;
}

ul.navigation li {
display:inline;
}

ul.navigation a {
background:url(../images/nav.png) 0 0 no-repeat;
border:none;
display:block;
float:left;
height:105px;
padding:0 0 0 20px;
width:300px;
}

ul.navigation a:focus {
outline:none;
}

ul.navigation span.title, ul.navigation span.subtitle {
cursor:pointer;
display:block;
width:300px;
}

ul.navigation span.title {
color:#d9d9d9;
font-size:30px;
padding:22px 0 11px;
}

ul.navigation span.subtitle {
color:#f2f2f2;
font-size:12px;
}

/* Tab State - Normal */
ul.navigation a#web-dev-panel-tab {
background-position:0 0;
}

ul.navigation a#web-new-panel-tab {
background-position:-320px 0;
}

ul.navigation a#portfolio-panel-tab {
background-position:-640px 0;
}

/* Tab State - Hover */
ul.navigation a#web-dev-panel-tab:hover {
background-position:0 -105px;
}

ul.navigation a#web-new-panel-tab:hover {
background-position:-320px -105px;
}

ul.navigation a#portfolio-panel-tab:hover {
background-position:-640px -105px;
}

/* Tab State - Selected */
ul.navigation a#web-dev-panel-tab.selected {
background-position:0 -210px;
}

ul.navigation a#web-new-panel-tab.selected {
background-position:-320px -210px;
}

ul.navigation a#portfolio-panel-tab.selected {
background-position:-640px -210px;
}


/* Portfolio Slideshows - Slider */
.slideshow {
background:url(../images/slideshow-frame.png) no-repeat;
float:left;
height:400px;
position:relative;
width:640px;
}

.slideshow ul li {
display:block;
float:left;
height:340px;
margin:0;
padding:0;
width:620px;
}

.slideshow .slide-wrapper {
background:#0a0a0a;
height:340px;
left:10px;
overflow:auto;
position:absolute;
top:10px;
width:620px;
}

.slideshow .slide-wrapper ul {
left:0;
list-style:none;
margin:0;
position:absolute;
top:0;
width:99999px;
}

.slideshow .slide-wrapper ul ul {
background:none;
border:0;
margin:0;
overflow:visible;
position:static;
width:auto;
}

.slideshow .slide-wrapper ul ul li {
background:none;
float:none;
height:auto;
width:auto;
}

.slideshow .arrow {
background:url(../images/slideshow-arrows.png) no-repeat 0 0;
border:none;
cursor:pointer;
display:block;
height:80px;
position:absolute;
text-indent:-9999px;
top:140px;
width:30px;
}

.slideshow .forward {
background-position:-90px -80px;
right:10px;
}

.slideshow .forward:hover {
background-position:-90px 0;
}

.slideshow .back {
background-position:0 -80px;
left:10px;
}

.slideshow .back:hover {
background-position:0 0;
}

#thumbNav {
left:10px;
position:absolute;
top:360px;
}

#thumbNav a, #thumbNav a:hover {
background:url(../images/slideshow-thumb-tab.png) 0 0 no-repeat;
border:none;
color:#f2f2f2;
display:inline-block;
height:22px;
margin:0 5px 0 0;
padding:5px 0;
text-align:center;
width:30px;
}

#thumbNav a:hover, #start-stop:hover {
color:#b3b3b3;
}

#thumbNav a.cur {
background:url(../images/slideshow-thumb-tab.png) -30px 0 no-repeat;
}

#start-stop {
background:url(../images/slideshow-start-stop.png) 0 0 no-repeat;
border:none;
color:#f2f2f2;
height:22px;
padding:5px 0;
position:absolute;
right:10px;
text-align:center;
top:360px;
width:60px;
}

#start-stop.playing {
background:url(../images/slideshow-start-stop.png) -60px 0 no-repeat;
}


/* Overlay */
.boxgrid {
float:left;
height:340px;
overflow:hidden;
position:relative;
width:620px;
}

.boxgrid p {
color:#f2f2f2;
font-size:12px;
line-height:18px;
}

.boxgrid h4 {
color:#f2f2f2;
font-size:16px;
}

.boxgrid img {
left:0;
position:absolute;
top:0;
}

.boxcaption {
background:url(../images/bg-image-trans-black.png) repeat;
border:1px solid #0a0a0a;
float:left;
height:80px;
padding:10px;
position:absolute;
width:100%;
}

.captionfull .boxcaption {
left:0;
top:340px;
}


/* FORMS */
form {
overflow:hidden;
}

form fieldset {
border:none;
}

form p {
margin:0 0 12px;
}

label {
clear:both;
float:left;
width:280px
}

input, input[type=text], textarea {
background:transparent;
border:none;
color:#555;
font-size:12px;
float:left;
font-family:'Lucida Grande', Helvetica, Arial, Geneva, sans-serif;
/* outline-style:none */
}

input[type=text], textarea {
width:260px;
}

input[type=text]:focus, textarea:focus {
background:transparent;
}

input[type=text] {
height:22px;
padding:8px 5px 2px;
}

textarea {
height:110px;
padding:5px 5px 7px;
overflow:auto;
/* resize:none; */
}

#name, #email, #contact, #message {
display:table-cell;
display:inline-block;
float:left;
margin:0 0 12px;
width:270px;
}

#name, #email, #contact {
background:url(../images/bg-image-form-input.png) no-repeat;
}

#message {
background:url(../images/bg-image-form-textarea.png) no-repeat;
}

.oubliette {
display:none;
}

input.button {
background:url(../images/bg-image-form-button.png) no-repeat;
border:none;
cursor:pointer;
float:right;
height:36px;
margin:5px 0 0;
text-align:center;
width:100px;
}


/* Form Validation */
#name.error-input, #email.error-input {
background:url(../images/bg-image-form-input-error.png) no-repeat;
color:#600;
}

#message.error-input {
background:url(../images/bg-image-form-textarea-error.png) no-repeat;
color:#600;
}

form .error-div {
color:#555;
float:left;
font-size:12px;
margin:12px 0 0;
}