@charset "UTF-8";

/* ============================================================================
[Stylesheet]

theme name: Seavista
theme uri: http://SeavistaSoftware.com
description: Main Theme
version: 1.0.0
author: Jason Hawgood
author uri: http://seavista.biz
last change: 02.23.10

-------------------------------------------------------------------------------
[Copyright]

All content copyright of Seavista Software. 

-------------------------------------------------------------------------------
[Table of contents]

0. Glossary
1. Reset
2. Layout
3. Typography
4. Navigation
5. Forms
6. Misc

-------------------------------------------------------------------------------
[Palette]

96% Black - #0a0a0a
90% Black - #1a1a1a
83% Black - #2b2b2b
76% Black - #3c3c3c
70% Black - #4d4d4d
67% Black - #555
30% Black - #b3b3b3
20% Black - #ccc
10% Black - #e6e6e6
05% Black - #f2f2f2
   
============================================================================ */


/* ============================================================================
= 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 #555
}

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

.wrapper.nav {
background:url(images/bg-nav.png) no-repeat;
}

.wrapper.navinner {
background:#000;
display:block;
}


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


/* Footer
---------------------------------------------------------------------------- */
.wrapper.footer {
border-top:1px solid #808080;
color:#555;
font-size:12px;
line-height:18px;
}

.wrapper.footer p {
margin:20px 0 10px
}

.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 {
padding:8px;
}


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

#header {
	background: url(images/bg-image-header.png) right no-repeat;
	height: 410px;
	width: auto;
	min-width: 940px;
	margin: 0;
	overflow: hidden;
}

#content-portfolio {
background:url(images/bg-image-portfolio.png) 0 350px no-repeat;
height:604px;
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.png) 400px 60px no-repeat; 
height:480px;
padding-top:50px;
overflow:visible;
}

#footer {
background:url(images/logo-footer.png) 0px 15px no-repeat;
padding:160px 10px 10px 10px;
margin:0 auto;
width:320px;
}

#softwarelab {

	
}

/* Subsections
---------------------------------------------------------------------------- */
.section.intro {
	width: 40%;
	margin: -50px 0px 0px 2%;
	color:#f7f7f7; /*#509ED4;*/
}

.section.intro:hover {
	width: 40%;
	margin: -50px 0px 0px 2%;
	color:#fff;
}





.section.web-design, .section.ui, .section.illustration {
float:left;
margin:0 20px 0 0;
width:280px;
color:#fff;
}

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

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


/* ============================================================================
= TYPOGRAPHY
============================================================================ */
body {
background: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 Shadow
---------------------------------------------------------------------------- */
/*#header, #content-portfolio, #content-lower {
text-shadow:1px 1px 1px rgba(255,255,255, .8)
}

#nav, .slideshow {
text-shadow:0 0 0 rgba(0,0,0, 1)
}*/


/* Headers
---------------------------------------------------------------------------- */
#header h1 {
	background: url(images/logo-main.png) no-repeat;
	height: 170px;
	margin:  15px 0 5% 40px;
	width: 420px;
}

#header h1 span, #header h2 span, .section.web-design h2 span, .section.ui h2 span, .section.illustration h2 span, .section.about h2 span, .section.contact h2 span {
left:-999em;
position:absolute
}

#header h2 {
	background: url(images/title-header.png) no-repeat;
	margin: -30px 0 0px 10px;
	height: 60px;
	width: 420px;
}

.section.web-design h2, .section.ui h2, .section.illustration h2 {
height:55px;
width:250px
}

.section.web-design h2 {
background:url(images/title-web-design.png) no-repeat
}

.section.ui h2 {
background:url(images/title-ui.png) no-repeat
}

.section.illustration h2 {
background:url(images/title-illustration.png) no-repeat
}

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

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

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

.section.contact img {
padding: 0px 5px 0px 5px;
}


.section.contact a {
border: 0;
}



.section.about h3,.section.contact h3 {
color:#212A34;

}

h3 {
color:#f7f7f7;
font-size:12px;
padding:5px 0 10px;
text-transform:uppercase;
}


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

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

a:focus {
outline:none
}


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

.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;
background:#000;
}

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#ui-panel-tab {
background-position:0 0
}

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

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

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

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

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

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

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

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


/* Portfolio Slideshows - Anything 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:visible
}

form fieldset {
border:none
}

form p {
margin:0 0 12px
}

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

input, input[type=text], textarea {
background:#ffffff;
border:solid 2px #f7f7f7;
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:90px;
padding:5px 5px 7px;
overflow:auto;
/* resize:none; */
}

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

#name, #email {
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
}


/* ============================================================================
= MISC
============================================================================ */