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

/* ----------------------------------------------------------------------------
Project:		Kinetic Shadows
Version:		2.8.6
Last Change:	12.06.08
Author:			Brian Rhinehart
Primary Use:	Shadow Styles
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
Base Palette:
bright - 		#9d9be8
light -			#484591
medium -		#2f2c5e
dark -			#232045
bg -			#000

Accents:
yellow/green -	#97b03e
light green -	#7b9041
---------------------------------------------------------------------------- */

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

#bodyWrapper {
background:url(bodyWrapperBG.jpg) no-repeat 100% 100%
}

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

#home {
margin:30px 0
}
#home p { text-align:justify; }
#portfolio, #about {
margin:0 0 30px
}

#contact {
margin:0
}

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

#clientList, #cs3Tip {
display:none
}

/* ------------------------------------------------------------------------- */
/* ------------------------------>>> LAYOUT <<<----------------------------- */
/* ------------------------------------------------------------------------- */
body {
background:#000 url(masthead-1.jpg) no-repeat 50% 0;
display:table;
width:100%
}

/* ---------------------------> Head and Main Nav <------------------------- */

#logo {
background:url(logo.png) no-repeat;
height:80px;
left:0;
position:relative;
top:35px;
width:250px;
}

#mainNav {
margin:180px auto 0;
width:315px;
}

/* --------------------------------> Footer <------------------------------- */
#footer {
background:url(footerTile.jpg) repeat-x
}

#footerContent {
background:url(footer.jpg) no-repeat 50% 0;
clear:both;
color:#222;
font-size:10px;
height:210px;
margin:0 auto;
padding:20px 0;
text-align:center;
width:auto
}

#footer p {
margin:205px 0 0 0
}

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

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

/* ---------------------------> Side Panel Items <-------------------------- */
#sidePanel {
display:inline;
float:right;
margin:96px 0 0;
overflow:hidden;
width:260px
}

#tabber {
background:url(trans_black.png);
border-left:1px solid #2f2c5e;
border-right:1px solid #2f2c5e;
border-top:1px solid #2f2c5e;
padding:0 0 0 20px
}

#tabberWrapper {
border:1px solid #2f2c5e;
height:175px;
padding:10px;
}

.tabberContent {
display:none;
}

#styleSelector {
border:1px solid #2f2c5e;
padding:10px 19px
}

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

#styleSelector li#lastChild {
margin:0
}

#styleSelectorHead h4, #accordionHead h4 {
color:#ebebeb;
font-size:13px;
padding:3px 0 0 10px
}

#styleSelectorHead, #accordionHead {
background:url(trans_black.png);
border-left:1px solid #2f2c5e;
border-right:1px solid #2f2c5e;
border-top:1px solid #2f2c5e;
height:30px
}

#accordionWrapper {
border-bottom:1px solid #2f2c5e;
border-left:1px solid #2f2c5e;
border-right:1px solid #2f2c5e
}

#adSpace {
background:#000 url(hotsauceAd.png) no-repeat 0 0;
border:1px solid #2f2c5e;
display:block;
height:98px
}

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

/* ------------------------------------------------------------------------- */
/* ---------------------------->>> TYPOGRAPHY <<<--------------------------- */
/* ------------------------------------------------------------------------- */
body {
color:#e3e3e3;
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:#efefef;
font-size:24px;
line-height:38px;
margin:0 0 8px
}

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

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

h4 {
color:#97b03e;
font-size:14px;
line-height:22px
}
h4 A {
color:#97b03e;
text-decoration:none;
}
h5 {
font-weight:700;
line-height:20px
}

.indent {
background:transparent url(quote.png) no-repeat;
color:#ccc;
font-size:11px;
line-height:14px;
margin:10px 10px 0 10px;
padding:3px 0 40px 32px
}

.quotee {
color:#fefefe;
font:700 11px/18px 'Times New Roman', Times, serif
}

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

.tiny {
color:#9d9be8;
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 18px
}

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

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

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

a:hover {
color:#7b9041
}

a:focus {
outline:none
}

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

.sideLink li a:hover {
background:#484591;
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 #000;
display:block;
height:16px;
margin:3px 8px 3px 0;
width:16px
}

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

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

#galleries {
margin:0 0 20px 0
}

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

/* ------------------------------> Main Nav <------------------------------- */
#mainNav a {
background:url(mnTabs.png) no-repeat 0 0;
color:#d8d8d8;
cursor:pointer;
float:left;
height:24px;
margin:0 20px 0 0;
padding:6px 0 0;
text-align:center;
text-decoration:none;
width:85px
}

#mainNav a:hover {
background:url(mnTabs.png) no-repeat -85px 0;
color:#f9f9f9
}

#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:740px;
width:100px;
z-index:50
}

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

#followerLinks a {
background:#000;
border:1px solid #2f2c5e;
color:#e8e8e8;
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:#484591;
color:#fff
}

/* --------------------------> Thumbnail Gallery <-------------------------- */
.example {
background:#232045;
border-bottom:1px solid #484591;
font-size:11px;
float:left;
height:150px;
line-height:14px;
margin:0 20px 20px 0;
width:200px
}

.example:hover {
border-bottom:1px solid #7b9041
}

.frame {
border:4px solid #232045;
cursor:pointer;
float:left;
height:120px;
margin:0 0 2px;
padding:0;
width:192px
}

.exampleInfo {
background:#000;
border:1px solid #484591;
display:none;
height:0;
margin:0;
padding:8px 0 2px 5px;
width:185px
}
.exampleInfo A { color:#FFFFFF; }
.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
}
.clientName A { color:#FFFFFF; }
.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 {
border:1px solid #2f2c5e;
padding:3px 10px
}

.qpPrev:hover, .qpNext:hover {
background:#484591;
color:#fff
}

.qpDisabled, .qpDisabled:hover {
background:#000;
color: #4a4a4a
}

/* ---------------------------> 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:-15px;
position:absolute;
top:-12px;
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:12px;
position:absolute;
top:0;
z-index:90
}

#hover_inner {
background:#000;
border:1px 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:#d8d8d8;
cursor:pointer;
text-decoration:underline
}

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

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

#tabber .lastChild {
margin:0
}

#tabber li.selected {
background:url(tTab.png) no-repeat 100% 0;
color:#fcfcfc
}

#tabber li:hover {
color:#f9f9f9
}

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

.drawerHandle {
background:url(accordionArrowClosed.png) no-repeat 100% 0;
border-top:1px solid #232045;
color:#fdfdfd;
cursor:pointer;
font-size:11px;
margin:0;
padding:2px 0 1px 10px
}
.drawerHandle A { text-decoration:none; }
.drawerHandle:hover {
background:#484591 url(accordionArrowClosed.png) no-repeat 100% 0
}

.drawerHandle:focus {
outline:none
}

.drawerHandle.selected {
background:#484591 url(accordionArrowOpen.png) no-repeat 100% 0
}

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

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

.btn a {
background:#010101;
border:1px solid #2f2c5e;
color:#e8e8e8;
display:block;
font-size:11px;
height:23px;
line-height:23px;
margin:5px;
padding:0;
text-decoration:none;
width:88px
}

.btn a:hover {
background:#484591;
color:#f9f9f9
}

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

form.ksform fieldset {
border:none;
}

form.ksform input.submit {
background:#010101;
border:1px solid #2f2c5e;
color:#e8e8e8;
cursor:pointer;
display:block;
height:25px;
margin:10px 0 0 315px;
padding:0 0 3px 0;
width:100px
}

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; /* FF2 */
display:inline-block;
float:left;
vertical-align:top;
width:145px
}

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

input[type=text], textarea {
background:#010101;
border:1px solid #2f2c5e;
color:#fff;
font:11px Arial, Verdana, Geneva, Helvetica, sans-serif;
outline-style:none
}

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

textarea {
height:160px;
padding:2px 4px 2px;
overflow:hidden
}

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