@charset 'UTF-8';
@import url(reset.css);
@import url(global.css);
/*@import url(debug.css);*/

/* ----------------------------------------------------------------------------
Project:		Kinetic Shadows
Version:		2.8.4
Last Change:	11.29.08
Author:			Brian Rhinehart
Primary Use:	Light Styles
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
Dark Grey - #7d7d7d
Light Grey - #b1b1b1
Blue Nav BG - #506c8c
Blue Link Hover - #335782
---------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* ---------------------------->>> WRAPPERS <<<----------------------------- */
/* ------------------------------------------------------------------------- */
#wrapper {
margin:0 auto;
width:960px
}

#bodyWrapper {
background:url(tileBody.png) repeat-y
}

#scrollWrapper {
float:left;
margin:0 20px 0 10px;
padding:0 0 0 30px;
width:660px
}

#home {
margin:0 0 30px
}

#portfolio, #about, #contact {
margin:0 0 30px
}

#contactForm {
margin:0 auto;
width:600px
}

#clientList, #cs3Tip {
display:none
}

/* ------------------------------------------------------------------------- */
/* ------------------------------>>> LAYOUT <<<----------------------------- */
/* ------------------------------------------------------------------------- */
body {
background:#afafaf url(tileBackground.jpg) repeat-x;
display:inherit;
width:100%
}

/* ---------------------------> Head and Main Nav <------------------------- */
#mastHead {
background:url(masthead.jpg) no-repeat;
height:350px;
margin:20px 0 0 0;
padding:0 16px 0 0
}

#logo {
background:url(logo.png) no-repeat;
height:40px;
left:40px;
position:relative;
top:38px;
width:240px
}

#mainNav {
float:right;
margin:60px 0 0 0;
width:255px
}

/* --------------------------------> Footer <------------------------------- */
#footer {
background:url(footer.png) no-repeat;
clear:both;
color:#7e7e7e;
font-size:10px;
height:35px;
margin:0 auto 20px;
padding:5px 0 0;
text-align:center;
width:960px
}

#footer p {
margin:0
}

#footer a {
color:#7e7e7e;
text-decoration:none
}

#footer a:hover {
text-decoration:underline
}

/* ---------------------------> Side Panel Items <-------------------------- */
#sidePanel {
display:inline;
float:left;
margin:48px 0 0;
overflow:hidden;
width:210px
}

#tabber {
background:url(hdr.png) no-repeat;
border:none;
padding:0 1px
}

#tabberWrapper {
border-bottom:1px solid #d8d8d8;
border-left:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-top:none;
height:165px;
padding:10px;
}

.tabberContent {
display:none;
}

#styleSelector {
border-bottom:1px solid #d8d8d8;
border-left:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
padding:10px 9px
}

#styleSelector li {
float:left;
margin:0 9px 0 0
}

#styleSelector li#lastChild{
margin:0
}

#styleSelectorHead h4, #accordionHead h4 {
color:#211e19;
font-size:13px;
padding:4px 0 0 8px
}

#styleSelectorHead, #accordionHead {
background:url(hdr.png) no-repeat;
height:30px;
margin:0
}

#styleSelectorHead {
border-bottom:1px solid #d8d8d8
}

#accordionWrapper {
border-bottom:1px solid #d8d8d8;
border-left:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
padding:0
}

#adSpace {
background:#f8f8f8 url(hotsauceAd.png) no-repeat;
border:none;
display:block;
height:98px;
margin:0 0 7px;
width:210px
}

#styleSelector, #tabberWrapper, #accordionWrapper {
margin:0 0 20px
}

/* ------------------------------------------------------------------------- */
/* ---------------------------->>> TYPOGRAPHY <<<--------------------------- */
/* ------------------------------------------------------------------------- */
body {
color:#211e19;
font:12px/18px Arial, Verdana, Geneva, Helvetica, sans-serif
}

p {
margin:0 0 18px
}

strong,b {
font-weight:700
}

em,i {
font-style:italic
}

h1, h2, h3, h4 {
font-family:'Lucida Grande', 'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif
}

h1 {
color:#3a3a3a;
font-size:24px;
line-height:38px;
margin:0 0 8px
}

h2 {
color:#3a3a3a;
font-size:18px;
line-height:28px;
margin:0 0 10px
}

h3 {
color:#717809;
font-size:16px;
line-height:26px
}

h4 {
color:#335782;
font-size:14px;
line-height:22px
}

h5 {
font-weight:700;
line-height:20px
}

.indent {
background:none;
color:#3a3a3a;
font-size:11px;
line-height:14px;
margin:10px 10px 0 10px;
padding:0 0 40px 0
}

.quotee {
color:#7d7d7d;
font-size:10px
}

.mono {
font-family:'Courier New', Courier, monospace
}

.tiny {
color:#999;
font-size:9px;
}

.tinyOblique {
font-size:9px;
font-style:oblique
}

.byline {
float:left;
font-size:11px;
margin:0 0 16px 0
}

/* -------------------------------> Lists <--------------------------------- */
ul.omniList {
margin:0 0 18px 16px;
padding:0 0 0 16px
}

ul.omniList li {
background:url(bullet.png) no-repeat 0 2px;
list-style:none;
padding:0 0 0 16px
}

ol.omniList li, ul.omniList li {
margin:0 0 3px
}

ol.omniList {
margin:0 0 18px 24px;
padding:0
}

ol.omniList li {
list-style:decimal;
padding:0
}

/* -----------------------------> Client List <----------------------------- */
#clients {
margin:0 0 1.6em
}

#clients li {
background:url(bullet.png) no-repeat 0 -1px;
float:left;
font-size:10px;
line-height:14px;
width:140px
}

/* --------------------------------> Images <------------------------------- */
.imgFrame {
background:#fff;
border:1px solid #e8e8e8;
margin:0;
padding:5px
}

/* ------------------------------------------------------------------------- */
/* ---------------------------->>> NAVIGATION <<<--------------------------- */
/* ------------------------------------------------------------------------- */
a {
color:#222;
text-decoration:underline
}

a:hover {
color:#335782;
text-decoration:none
}

a:focus {
outline:none
}

/* ----------------------------> Sidebar Links <---------------------------- */
.sideLink li a {
border-bottom:1px solid #e8e8e8;
color:#222;
display:block;
font-size:11px;
height:16px;
line-height:16px;
margin:0;
padding:3px 0 3px 5px;
text-decoration:none
}

.sideLink li a:hover {
background:#506c8c;
color:#fff
}

.sideLink li img {
height:16px;
margin:0 5px 0 0;
width:16px;
vertical-align:text-bottom
}

/* ----------------------------> Profile Links <---------------------------- */
.profileLink li {
float:left
}

.profileLink li a {
border:2px solid #dadada;
display:block;
height:16px;
margin:3px 8px 3px 0;
width:16px
}

.profileLink li a:hover {
border:2px solid #335782
}

.profileLink li img {
height:16px;
margin:0;
width:16px
}

#galleries {
margin:0 0 20px 0
}

#tooltip {
background:#f8f8f8;
border:1px solid #506c8c;
display:none;
font-size:11px;
padding:2px 5px 1px;
position:absolute
}

/* ------------------------------> Main Nav <------------------------------- */
#mainNav a {
background:url(navDivider.png) no-repeat;
color:#222;
cursor:pointer;
float:left;
height:23px;
padding:7px 0 0;
text-align:center;
text-decoration:none;
width:85px
}

#mainNav a:hover {
background:#506c8c url(navDivider.png) no-repeat;
color:#fff
}

#follower {
background:url(follower.png) no-repeat 0 100%;
cursor:pointer;
display:block;
height:50px;
margin:0 0 -60px 0;
padding:10px 0 0 0;
position:relative;
left:810px;
width:100px;
z-index:50
}

#followerLinks {
display:none;
padding:50px 0 0 0
}

#followerLinks a {
background:url(btn.png) no-repeat -2px -2px;
border:1px solid #d8d8d8;
color:#222;
display:block;
font-size:11px;
height:17px;
line-height:17px;
margin:0 15px 1px;
padding:0;
text-align:center;
text-decoration:none;
width:70px
}

#followerLinks a:hover {
background:#506c8c;
color:#fff
}

/* --------------------------> Thumbnail Gallery <-------------------------- */
.example {
background:url(hdr.png) no-repeat 10% 100%;
border:1px solid #d8d8d8;
float:left;
font-size:11px;
height:148px;
line-height:14px;
margin:0 20px 20px 0;
width:198px
}

.frame{
cursor:pointer;
float:left;
height:120px;
margin:0 0 8px;
padding:0;
width:198px
}

.exampleInfo {
background:#1f354f;
border:1px solid #fff;
display:none;
height:0;
margin:0;
padding:8px 0 2px 5px;
width:191px
}

.clientInfo {
float:none
}

.outLink {
background:url(icn_externalLink.png) no-repeat 0 0;
display:block;
height:12px;
float:right;
padding:0 6px 0 0;
width:10px
}
.clientName {
float:left;
padding:0 0 0 6px
}

.cat {
color:#e8e8e8;
float:left;
line-height:14px;
margin:0 0 5px 0;
width:50px
}

.data {
color:#e8e8e8;
float:left;
line-height:14px;
margin:0 0 5px 0;
width:130px
}

#thumbs a, #recent a {
font-weight:400;
text-decoration:none
}

/* -------------------------> Thumbnail Pagination <------------------------ */
#thumbPagination {
margin:0
}

#pageCounter {
margin:10px 0 0
}

.qpCounter, .qpPrev, .qpNext {
margin:10px 10px 10px 0
}

.qpCounter {
padding:3px 0
}

.qpPrev, .qpNext {
background:url(hdr.png) no-repeat 10% 100%;
border:1px solid #d8d8d8;
padding:3px 10px
}

.qpDisabled, .qpDisabled:hover {
background:transparent;
color: #ccc
}

/* ---------------------------> Hoverbox Styles <--------------------------- */
#hover_overlay {
background:#000;
left:0;
position:absolute;
top:0;
width:100%;
z-index:90
}

#hover_loading {
background:transparent;
cursor:pointer;
display:none;
height:40px;
overflow:hidden;
position:absolute;
width:40px;
z-index:100
}

#hover_loading div {
background:url(hover_progress.png) no-repeat;
height:480px;
left:0;
position:absolute;
top:0;
width:40px
}

#hover_close {
background:url(hover_closebox.png);
cursor:pointer;
display:none;
height:30px;
left:-20px;
position:absolute;
top:-17px;
width:30px;
z-index:100
}

#hover_content {
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:96
}

#hover_frame {
display:none;
height:100%;
position:relative;
width:100%
}

#hover_img {
border:0;
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:92
}

#hover_outer {
background:transparent;
display:none;
left:0;
margin:0;
overflow:hidden;
padding:15px;
position:absolute;
top:0;
z-index:90
}

#hover_inner {
background:#f8f8f8;
border:5px solid #fff;
height:100%;
position:relative;
width:100%
}

#hover_bigIframe, #hover_freeIframe {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:10
}

#hover_bg {
display:none
}

.hover_bg {
display:block;
position:absolute;
z-index:70
}

/* -------------------------> Hidden Items Toggle <------------------------- */
.showme {
color:#222;
cursor:pointer;
text-decoration:underline
}

.showme:hover {
color:#335782;
text-decoration:underline
}

/* ------------------------> jTabber Tabbed Panels <------------------------ */
#tabber li {
background:url(tabDivider.png) no-repeat;
color:#222;
cursor:pointer;
float:left;
font-size:11px;
height:24px;
list-style:none;
margin:0;
padding:6px 0 0;
position:relative;
text-align:center;
text-decoration:none;
top:1px;
width:69px
}

#tabber li:first-child {
background:none
}

#tabber li.selected {
background:#f8f8f8 url(tabDividerHover.png) no-repeat;
color:#222
}

#tabber li:hover {
background:#f8f8f8 url(tabDivider.png) no-repeat;
color:#222
}

#tabber .lastChild {
width:70px
}

#tabber li.selected:first-child {
background:#f8f8f8
}

/* -------------------------> jQuery UI Accordion <------------------------- */
.drawer {
background:none
}

.drawerHandle {
background:#f8f8f8;
border-top:1px solid #e8e8e8;
color:#222;
cursor:pointer;
font-size:11px;
margin:0;
padding:2px 0 1px 5px
}

.drawerHandle:hover {
background:#506c8c;
color:#fff
}
.drawerHandle:focus {
outline:none
}

.drawerHandle.selected {
background:#fff url(hdrAccordionTab.png) no-repeat;
color:#222
}

/* -------------------------------> Buttons <------------------------------- */
.btn {
float:left;
text-align:center
}

.btn:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden
}

.btn a {
background:url(btn.png) no-repeat;
color:#222;
display:block;
font-size:11px;
height:25px;
line-height:25px;
margin:0;
padding:0;
text-decoration:none;
width:90px
}

.btn a:hover {
color:#335782
}

/* ------------------------------------------------------------------------- */
/* ------------------------------>>> FORMS <<<------------------------------ */
/* ------------------------------------------------------------------------- */
form.ksform {
font-size:11px;
line-height:11px
}

form.ksform fieldset {
border:none;
}

form.ksform input.submit {
background:url(btn.png) no-repeat 0 0;
border:none;
color:#222;
cursor:pointer;
display:block;
height:25px;
margin:10px 0 0 325px;
width:90px
}

div.error {
display:none
}

input:focus {
background:transparent;
}

/* -------------------------> Form Specific Styles <------------------------ */
form.ksform fieldset li {
clear:left;
list-style:none;
margin:0;
padding:0
}

form.ksform label {
cursor:pointer;
display:table-cell;
display:inline-block;
float:left;
vertical-align:top;
width:145px
}

form.ksform label.error {
color:#ad4e4e;
display:inline;
margin:0 0 0 10px;
width:auto
}

input[type=text], textarea {
background:transparent;
border:none;
color:#222;
font:11px Arial, Verdana, Geneva, Helvetica, sans-serif;
outline-style:none
}

input[type=text] {
height:14px;
padding:4px 5px 2px
}

textarea {
height:160px;
padding:5px 5px 7px;
overflow:hidden
}

#fname, #lname, #email, #phone, #url, #comments {
display:table-cell;
display:inline-block;
float:left;
margin:0 0 12px 0;
width:260px
}

#fname, #lname, #email, #phone, #url {
background:url(inputText.png) no-repeat
}

#comments {
background:url(textArea.png) no-repeat
}