@import url(reset.css);

html { background:#0093ad url(/_images/layout/stripe_bg.png); }
body { font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:14px; color:#424242; }

h1,.h1 { font-size:28px; font-weight:normal; margin-bottom:15px; }
h2,.h2 { font-size:22px; font-weight:normal; margin-bottom:15px; }
h3,.h3 { font-size:18px; font-weight:normal; margin-bottom:15px; }
h4,.h4 { font-size:18px; font-weight:normal; margin-bottom:15px; line-height:20px; color:#3b5998; }
h5,.h5 {}
h6,.h6 { font-size:16px; font-weight:normal; color:#3b5998; }

.heading-right { float:right; margin-left:15px; }
.heading { margin-bottom:5px; }

/* Links */
a { color:#0293ac; text-decoration:none; }
a:hover, a:active { color:#00bad0; text-decoration:none; }
p a { margin:0; padding:0 6px 2px 18px; background:url(/_images/link_arrow.png) no-repeat 5px 50%; text-decoration:none; border:none; }


b,strong { font-weight:bold; }

p { line-height:26px; margin-bottom:15px; }

ol,ul { }

em,i { }

.space { height:20px; clear:both; }
.clear { clear:both; }

.wrap { width:960px; margin:0 auto; margin-bottom:20px; }

.content-white { background:#0293ac; padding:0 20px; overflow:hidden; }

.cap-white { background:url(/_images/layout/caps_white.png) no-repeat; width:920px; height:20px; }
.cap-aqua { background:url(/_images/layout/caps_aqua.png) no-repeat; width:960px; height:20px; }
.top { background-position:top; }
.bottom { background-position:bottom; }

#top-panel { display:none;  font-size:14px; }
#top-panel a { color:#fff; }
#top-panel a:hover { color:#fff; }
div.tp-wrap { background:#333; }
div.tp-cont { width:960px; margin:0 auto; padding:20px 20px 0; }
div.tp-close { float:right; }
div.tp-spacer { background:#333; height:10px; }
div.tp-toggle { width:960px; margin:0 auto; margin-bottom:20px; }
div.tp-toggle-cont { width:250px; height:25px; position:relative; float:right; }
div.tp-toggle-left { width:20px; height:25px; float:left; background:url(/_images/login-panel/corner-left.png) bottom center no-repeat; }
div.tp-toggle-right { width:20px; height:25px; float:left; background:url(/_images/login-panel/corner-right.png) bottom center no-repeat; }
div.tp-toggle-center { width:210px; height:20px; float:left; font-size:14px; color:#ccc; background:#333; padding:0 0 5px 0; text-align:left; }
div.tp-toggle-center a { color:#fff; }
div.tp-toggle-center a:hover { color:#fff; }

#header { background:#25b9ce; padding:0 20px; overflow:hidden; }

/* Logo */
#logo { width:210px; height:83px; }
#logo h1, #logo h2 { text-indent:-9999px; }
#logo a { width:210px; height:83px; display:block; background:url(/_images/soaptray_logo.png) top no-repeat; }
#logo a:hover { background-position:bottom; }

/* Nav Elements */
#nav { width:513px; height:36px; display:block; float:right; margin-top:25px; }
#nav.client { width:586px; }
#nav ul { margin:0; padding:0; }
#nav ul li { display:inline; text-indent:-9999px; margin:0; padding:0; }
#nav ul li a { display:block; float:left; height:36px; background:url(/_images/nav.png) top left no-repeat; cursor:pointer; }
#nav.client ul li a { float:right; } 

#nav ul li.nav-item-home a { width:0px; }
#nav ul li.nav-item-about a { width:89px; background-position:0 0; margin-right:5px; }
#nav ul li.nav-item-services a { width:104px; background-position:-89px 0; margin-right:5px; }
#nav ul li.nav-item-portfolio a { width:117px; background-position:-193px 0; margin-right:5px; }
#nav ul li.nav-item-blog a { width:77px; background-position:-416px 0; margin-right:5px; }
#nav ul li.nav-item-contact a { width:106px; background-position:-310px 0; }

#nav ul li.nav-item-projects a { width:107px; background-position:-493px 0; margin-right:5px; }
#nav ul li.nav-item-invoices a { width:103px; background-position:-600px 0; margin-right:5px; }
#nav ul li.nav-item-account a { width:109px; background-position:-703px 0; margin-right:5px; }
#nav ul li.nav-item-login a { width:82px; background-position:-812px 0; }
#nav ul li.nav-item-logout a { width:98px; background-position:-894px 0; }
#nav ul li.nav-item-admin a { width:87px; background-position:-992px 0; margin-right:5px; }

#nav ul li.nav-item-home a:hover, #nav ul li.nav-item-home.nav-item-selected a {  }
#nav ul li.nav-item-about a:hover, #nav ul li.nav-item-about.nav-item-selected a { background-position:0 bottom; }
#nav ul li.nav-item-services a:hover, #nav ul li.nav-item-services.nav-item-selected a { background-position:-89px bottom; }
#nav ul li.nav-item-portfolio a:hover, #nav ul li.nav-item-portfolio.nav-item-selected a { background-position:-193px bottom; }
#nav ul li.nav-item-blog a:hover, #nav ul li.nav-item-blog.nav-item-selected a { background-position:-416px bottom; }
#nav ul li.nav-item-contact a:hover, #nav ul li.nav-item-contact.nav-item-selected a { background-position:-310px bottom; }

#nav ul li.nav-item-projects a:hover, #nav ul li.nav-projects-home.nav-item-selected a { background-position:-493px bottom; }
#nav ul li.nav-item-invoices a:hover, #nav ul li.nav-item-invoices.nav-item-selected a { background-position:-600px bottom; }
#nav ul li.nav-item-account a:hover, #nav ul li.nav-item-account.nav-item-selected a { background-position:-703px bottom; }
#nav ul li.nav-item-login a:hover, #nav ul li.nav-item-login.nav-item-selected a { background-position:-812px bottom; }
#nav ul li.nav-item-logout a:hover, #nav ul li.nav-item-logout.nav-item-selected a { background-position:-894px bottom; }
#nav ul li.nav-item-admin a:hover, #nav ul li.nav-item-admin.nav-item-selected a { background-position:-992px bottom; }

/* Buttons */
div.button { width:165px; height:42px; text-indent:-9999px; }

div.button a.button-login { background:url(/_images/buttons/login.png); }
div.button a.button-send { background:url(/_images/buttons/send.png); }

div.button a { width:165px; height:42px; display:block; cursor:pointer; background-position:top center; background-repeat:no-repeat; }
div.button a:hover { background-position:bottom; }

/* Small Buttons */
div.button_s { width:28px; height:28px; text-indent:-9999px; }

div.button_s a.button-close { background:url(/_images/buttons/close.png); }

div.button_s a { width:28px; height:28px; display:block; cursor:pointer; background-position:top center; background-repeat:no-repeat; }
div.button_s a:hover { background-position:bottom; }



/* Forms */
/*form { margin:0; padding:0; font-size:14px;  }

.form { margin:0; }
.form ul { margin:0; padding:0; list-style-type:none;  }
.form li { margin:0; padding:1px 0px; position:relative; overflow:hidden; margin-bottom:0px; }
* html .form li, * html .form .buttons { height:1%; }
.form li, .form .buttons { display:block; }
.form li span { float:left; margin-bottom:0; }
.form li div, .form li span { margin:0 6px 0 0; padding:0 0 15px 0; color:#444; }
.form li label { font-weight:bold; height:20px; line-height:20px; display:block; font-size:14px; margin-bottom:5px; }
.form li div label,
.form li span label { margin:0; padding-top:5px; clear:both; height:15px; line-height:15px; font-size:12px; color:#666; font-weight:normal; display:block; }


.form input.text,
.form input.file,
.form textarea.textarea,
.form select.select { background:#fff url(/_images/forms/field-bg.gif) top left repeat-x; margin:0; color:#444; clear:both; border:1px solid #999; padding:2px; }

.form input.text,
.form input.file,
.form select.select { height:28px; }

.form input.text,
.form input.file,
.form textarea.textarea { line-height:28px; text-indent:3px; }

.form input.text {}
.form input.file { }
.form textarea.textarea { }
.form select.select { height:34px; }

.form .submit { margin:0; }
*/

.form .s1 { width:60px; }
.form .s2 { width:140px; }
.form .s3 { width:220px; }
.form .s4 { width:300px; } /* E-mail */
.form .s5 { width:380px; }
.form .s6 { width:460px; }
.form .s7 { width:540px; }
.form .s8 { width:620px; }

.form .s4-2 { width:147px; }
.form .s5-2 { width:187px; }
.form .s6-2 { width:227px; }
.form .s7-2 { width:267px; }
.form .s8-2 { width:307px; }

.form .s7-3 { width:176px; }

.form select.select.s1 { width:66px; }
.form select.select.s2 { width:146px; }
.form select.select.s3 { width:220px; }
.form select.select.s4 { width:306px; }
.form select.select.s5 { width:386px; }
.form select.select.s6 { width:466px; }
.form select.select.s7 { width:546px; }
.form select.select.s8 { width:626px; }