@charset "UTF-8";

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

theme name: Hot Sauce
theme uri: http://kineticshadows.com/hotsauce/
description: Hot Sauce Collection
version: 1.0.3
author: Brian Rhinehart
author uri: http://kineticshadows.com
author email: brian[at]kineticshadows[dot]com
last change: 11.30.09

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

All content copyright of Kinetic Shadows, Brian Rhinehart. No unauthorized
use permitted.

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

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

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

Text - #9da5bd
Link - #b2bbd6
Error - #966f45
   
============================================================================ */


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


/* ============================================================================
= TYPOGRAPHY
============================================================================ */
body {
background:#171a23 url(images/tile-body.jpg) repeat;
color:#9da5bd;
font:12px/18px 'Lucida Grande', 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
}


/* Headers
---------------------------------------------------------------------------- */
#header h1 {
background:url(images/title-header.png) no-repeat;
height:95px;
margin:60px 0 12px;
width:510px
}

#header h1 span, #content-terms h2 span, .section.saucelist h2 span, .section.contact h2 span {
left:-999em;
position:absolute
}

#content-terms h2 {
height:30px;
background:url(images/title-terms.png) no-repeat;
width:330px
}

.section.saucelist h2 {
height:30px;
background:url(images/title-saucelist.png) no-repeat;
width:430px
}

.section.contact h2 {
height:30px;
background:url(images/title-contact.png) no-repeat;
width:330px
}

h3 {
font-family:'Lucida Grande', Helvetica, Arial, Geneva, Verdana, sans-serif;
padding:7px 0 10px
}


/* ============================================================================
= LAYOUT
============================================================================ */

/* Wrappers
---------------------------------------------------------------------------- */
#wrapper {
margin:0 auto;
width:940px
}


/* Sections
---------------------------------------------------------------------------- */
#header, #content-slideshow, #content-terms, #content-lower, #footer {
overflow:hidden
}

#header {
height:500px;
background:url(images/bg-image-header.png) 470px 50px no-repeat;
font-size:14px;
line-height:22px
}

#content-slideshow {
}

#content-terms {
background:url(images/bg-image-terms-border-bottom.png) 0 100% no-repeat;
padding:32px 0
}

#content-lower {
background:url(images/bg-image-saucelist.png) 40px 110px no-repeat;
height:500px;
padding:40px 40px 50px
}


/* Footer
---------------------------------------------------------------------------- */
#footer {
background:url(images/bg-image-footer-border-top.png) 0 0 no-repeat;
padding:40px 0
}

.section.footer {
float:left;
width:320px
}

.section.footer .validation {
font-size:14px;
line-height:28px
}

.section.footer img {
height:15px;
padding:0 5px 0 2px;
width:12px
}

.section.site-credit {
background:url(images/logo-footer.png) 0 0 no-repeat;
border:none;
display:block;
float:right;
height:180px;
width:280px
}


/* Subsections
---------------------------------------------------------------------------- */
.section.intro {
width:470px
}

.section.terms-left, .section.terms-right {
float:left;
width:460px
}

.section.terms-left {
margin:0 20px 0 0
}

.section.saucelist {
float:left;
width:480px
}

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


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

a:hover {
border-bottom:1px dotted #f2f2f2;
color:#f2f2f2
}

a:focus {
outline:none
}


/* Hot Sauce Slideshow - Anything Slider
---------------------------------------------------------------------------- */
.slideshow {
background:url(images/slideshow-frame.png) no-repeat;
float:left;
height:400px;
position:relative;
width:940px
}

.slideshow ul li {
display:block;
float:left;
height:340px;
margin:0;
padding:0;
width:920px
}

.slideshow .slide-wrapper {
background:#0a0a0a;
height:340px;
left:10px;
overflow:auto;
position:absolute;
top:10px;
width:920px
}

.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:84px;
position:absolute;
text-indent:-9999px;
top:140px;
width:32px
}

.slideshow .forward {
background-position:-87px 0;
right:10px
}

.slideshow .forward:hover {
background-position:-87px -84px
}

.slideshow .back {
background-position:0 0;
left:10px
}

.slideshow .back:hover {
background-position:0 -84px
}

#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:#9da5bd;
display:inline-block;
height:22px;
margin:0 5px 0 0;
padding:5px 0;
text-align:center;
width:31px
}

#thumbNav a:hover, #start-stop:hover {
color:#f2f2f2
}

#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:#9da5bd;
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;
}


/* ============================================================================
= FORMS
============================================================================ */
form {
overflow:hidden
}

form fieldset {
border:none;
}

form p {
margin:0 0 12px
}

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

input, input[type=text], textarea {
background:transparent;
border:none;
color:#9da5bd;
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:27px;
padding:8px 10px 2px
}

textarea {
height:110px;
padding:5px 10px 7px;
overflow:auto;
/* resize:none; */
}

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

#name, #email, #offer {
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:42px;
margin:5px 0 0;
text-align:center;
width:100px
}


/* Form Validation
---------------------------------------------------------------------------- */
#name.error-input, #email.error-input, #offer.error-input {
background:url(images/bg-image-form-input-error.png) no-repeat;
color:#966f45
}

#message.error-input {
background:url(images/bg-image-form-textarea-error.png) no-repeat;
color:#966f45
}

form .error-div {
color:#966f45;
float:left;
margin:14px 0 0
}


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

/* Sauce Listings
---------------------------------------------------------------------------- */
.saucelistings {
float:left;
height:400px;
overflow:auto;
margin:10px 0 0;
padding:0 0 0 20px;
width:450px
}

ol.omni-list li {
margin:0 0 3px
}

ol.omni-list {
margin:0 0 18px 24px;
padding:0
}

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