/***** sutkus.com ***** Charles Kiblinger ***** May 2007 *****/

/***** Global Settings *****/
 
html, body {
border: 0;
margin: 0;
padding: 0;
}

body {
/*font-size: 100%;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;*/
background: #9a7d63;
}


/***** Wrap with dropshadow *****/
 
#wrap {
background-image: url('images/dropshadow-row.png');
background-repeat: repeat-y;
width: 836px;
text-align: center;
margin: 0 auto;
}

img.preload {
position: absolute; 
top: -2000px;
width:0;
display: none;
}

#monoSlideshow {
background-image: url('images/djs-front-slideshow1.jpg');
}

/***** Common Formatting *****/
 
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
}
 
h1 {
/*padding: 30px 0px 25px 0px;*/
letter-spacing: -1px;
font-size: 2em;
}
 
h2 {
padding: 20px 0px 20px 0px;
letter-spacing: -1px;
font-size: 1.5em;
}
 
h3 {
font-size: 1em;
font-weight: bold;
}
 
p, ul, ol {
margin: 0;
padding: 0px 0px 18px 0px;
}
 
ul, ol {
list-style: none;
padding: 0px 0px 0px 20px;
}
  
img {
border: 0;
}

a, a:visited, a:hover {
text-decoration: none;
}
 
 
/***** Global Classes *****/
 
.clear         { clear: both; }
 
.float-left    { float: left; }
.float-right   { float: right; }
 
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.text-justify  { text-align: justify; }
 
.bold          { font-weight: bold; }
.italic        { font-style: italic; }
.underline     { border-bottom: 1px solid; }
.highlight     { background: #ffc; }
 
.img-left      { float: left; margin: 4px 10px 4px 0; }
.img-right     { float: right; margin: 4px 0 4px 10px; }
 
.nopadding     { padding: 0; }
.noindent      { margin-left: 0; padding-left: 0; }
.nobullet      { list-style: none; list-style-image: none; }

.spacer { 
clear: both; 
padding: 0; 
margin: 0; 
height: 1px;
line-height: 1px;
font-size: 1px; /* **** MAKES IT STAY SMALL EVERYWHERE **** */
}

#credit {
width: 836px;
text-align: center;
margin: 0 auto;
}

p.credit {
color: #512b1b;
text-align: right;
margin: 5px 25px 30px 0px;
padding: 0;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-size: 0.6em;
font-weight: normal;
}

p.credit a {
color: #512b1b;
text-decoration: none;
}

p.credit a:hover {
color: #660000;
}


#container {
text-align: left;
width: 760px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
background-color: #f6f3e2;
}

body.error #container, body.contact #container {
border-bottom: 1px solid #512b1b;
}

#header {
border-bottom: 3px solid #660000;
margin: 0px;
padding: 0px;
}

#logo {
display: block;
margin: 0;
padding: 0;
width: 300px;
float: left;
}

#logo img {
display: block;
margin: 0;
padding: 0;
}

#top_nav {
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 0.9em;
width: 435px;
padding: 0px;
margin: 100px 2px 2px 0px;
float: right;
}

#top_nav p {
padding: 0px;
margin: 0px;
}

#top_nav a {
color: #9a7d63;
text-decoration: none;
}

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

body.portfolio #top_nav a.portfolio {
color: #660000;
}

body.about #top_nav a.about {
color: #660000;
}

body.events #top_nav a.events {
color: #660000;
}

body.contact #top_nav a.contact {
color: #660000;
}

body.home #top_nav a.home {
color: #660000;
}

#content {
float: right;
width: 604px;
border-bottom: 2px solid #9a7d63; /*#b19b83;*/   /* changed from 3px to 2px 6-19-07*/ 
margin-left: 5px;
}

body.home #content {
border-bottom: 0px;
border-left: 1px solid #660000;
border-right: 1px solid #660000;
width: 477px;
background-image: url('images/djs-front-slideshow1.jpg');
}

#right_column {
width: 220px;
float: left;
padding-bottom: 40px;
}


#content img {
display: block;
margin: 0px;
padding: 0px;
}

body.portfolio #content img {
height: 534px;
}

#navigation {
float: left;
width: 140px;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 0.9em;
}

body.home #navigation {
width: 265px;
}

body.home #navigation img {
margin-top: 120px;
}

body.overview #navigation ul li.overview, 
body.biography #navigation ul li.biography,
body.awards #navigation ul li.awards,
body.client #navigation ul li.client  {
background: url('images/hotdot.png') left no-repeat; 
margin-left: -13px;
padding-left: 13px;
}

body.overview #navigation ul li.overview a, 
body.biography #navigation ul li.biography a,
body.awards #navigation ul li.awards a,
body.client #navigation ul li.client a {
color: #660000;
}

#navigation ul {
margin-top: 30px;
margin-left: 5px;
padding: 0;
}

#navigation ul li {
margin-bottom: 8px;
padding: 0;
color: #9a7d63;
}

#navigation ul li.hot {
background: url('images/hotdot.png') left no-repeat; 
margin-left: -13px;
padding-left: 13px;
color: #660000;
}

#navigation ul li a {
color: #9a7d63;
}

#navigation ul li a:hover {
color: #660000;
}

#heading {
margin: -20px 0px 0px 0px;
padding: 0;
}

#heading h2 {
color: #660000;
font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, serif;
font-weight: bold;
font-size: 1.4em;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0;
}


#bottom {
float: right;
width: 604px;
}

#footer {
clear: both;
border-top: 3px solid #660000;
padding-bottom: 60px;
}

#footer p {
color: #96776f;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-weight: normal;
font-size: 0.72em;
padding: 0;
margin-top: 15px;
}

#footer a {
color: #96776f; /* #471210; */ 
text-decoration: none;
}

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

#thumbnails {
width: 140px;
position: absolute;
/* Sorry everybody; I'm too dumb to do it any other way. 
Email me at kiblinger at gmail dot com if you have a better suggestion... */
top: 590px;
}

#thumbnails h4 {
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 0.72em;
color: #9a7d63;
margin: 0px 0px 4px 0px;
padding: 0px;
letter-spacing: 1px; 
}

#thumbnails img, #thumbnails a img {
margin: 0;
padding: 0;
}

#thumbnails a img {
border: 1px solid #dbd0c2;
}

#thumbnails img.current {
border: 1px solid #9a7d63;
}

#description {
width: 400px;
margin-top: 13px;
float: left;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-weight: normal;
font-size: 0.8em;
line-height: 17px;
color: #512b1b;
}

#specs {
width: 175px;
margin-left: 25px;
margin-top: 15px;
margin-bottom: 20px;
padding: 0;
float: left;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
}

#specs p {
color: #512b1b;
margin-top: 0px;
margin-bottom: 15px;
padding: 0;
font-size: 0.72em;
font-weight: bold;
}

#specs h4 {
color: #b8a084;
margin: 0px 0px 3px 0px;
padding: 0;
font-size: 0.75em;
font-weight: bold;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
}


#mid_column {
width: 350px;
float: left;
padding-bottom: 60px;
margin-right: 5px;
}

#mid_column h1 {
color: #660000;
font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, serif;
font-weight: bold;
font-size: 1.4em;
text-transform: uppercase;
letter-spacing: 1px;
margin: 30px 0px 15px 0px;
padding: 0;
}

#mid_column h4 {
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
color: #b8a084;
margin: 20px 0px 3px 0px;
padding: 0;
font-size: 0.80em;
font-weight: bold;
text-transform: uppercase;
}

#mid_column p {
color: #512b1b;
margin: 0px 0px 12px 0px;
padding: 0;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-size: 0.80em;
font-weight: normal;
}

body.error #content, body.contact #content, body.events #content, body.about #content {
border-bottom: 0px;
}

div.event_listing {
margin: 30px 0px 0px 0px;
padding: 0;
}

#mid_column a {
color: #660000;
text-decoration: underline;
}

#mid_column a:hover {
color: #9a7d63;
text-decoration: underline;
}

body.events #mid_column, body.client #mid_column {
width: 400px;
}

body.events #right_column, body.client #right_column {
width: 170px;
}

body.client #mid_column p, 
body.biography #mid_column p, 
body.overview #mid_column p, 
body.awards #mid_column p {
padding-right: 25px;
}

#right_column img {
margin: 30px 0px 5px 10px;
border: 1px solid #512b1b;
}

#right_column p {
/*color: #512b1b;*/
color: #9a7d63;
margin: 20px 0px 12px 10px;
padding: 0;
font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, sans-serif;
font-size: 0.85em;
font-weight: normal;
line-height: 1.75em;
}

body.contact #mid_column p {
font-weight: bold;
}

body.contact #mid_column p.normal {
font-weight: normal;
}

body.overview #right_column p.text-right {
margin: -5px 0px 0px 0px;
padding: 0px;
font-size: 0.75em;
}