/** color scheme:
#9c974b
#85773f
#595951
#0d0d0d
#590e0e
**/

/********** typography *******/

/* common */

BODY {
    text-align: center;
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    color: #111;
}

A {
    color: #6c5c1d;
    /*color: #dd6c07;*/
    text-decoration: none;
    font-weight: bold;
}

A:hover {
    color: #f0a731;
}

A IMG {
    border: 0;
}

P {
    text-align: left;
    line-height: 1.35em;
}

H1 {
    text-align: center;
    font-size: 24px;
}

H2, H3 {
    text-align: left;
}

H1 A, H2 A {
    color: #111;
}

H1 A:hover, H2 A:hover {
    color: #f0a731;
}

PRE {
    text-align: left;
}

.large-type {
    font-size: 16px;
}

.white {
    color: #FFF;
}

A.dlButton {
    background:transparent url(../img/download-button.png) no-repeat scroll 0 0;
    padding:0 0 0 18px;
}

/* main nav */

#main-nav {    
    color: #FFF;
}

#main-nav A {
    color: #FFF;
    font-weight: normal;
}

#main-nav A#small-logo {
    text-align: left;
    font-size: 22px;
}

#main-nav A#small-logo:hover {
    color: #f0a731;
}

#main-nav LI A {
    font-size: 18px;
    text-decoration: none;
    line-height: 21px;
}


/* large promo */

#large-promo H1 {
    color:#FFF;
    font-size:52px;
    word-spacing:0px;
    font-weight:normal;
    text-align:left;
}

#large-promo H1 STRONG {
    font-weight:bold;
}

#large-promo P A {
    color:#F9BF31;
    font-size:18px;
    font-weight: normal;
    text-decoration:none;
}

#large-promo P A:hover {
    color:#FFF;
}

/* post content area */

.post {
    text-align:left;
}

.post H1 A {
    cursor: default;
}

.post H1 A:hover {
    color: #111;
}

.post H2 {
    font-size: 18px;
}

.entry H2 {
    font-size:14px;
}

.sociable {
    text-align:left;
}

TEXTAREA#comment {
    width:100%;
    margin:7px 0 7px 0;
}

H3#comments {
    text-align:left;
}

.commentlist {
    text-align:left;
    list-style:none;
    margin-bottom:20px;
}

.commentlist li {
    font-weight: bold;
}

.commentlist li p {
    font-weight: normal;
}

/* right col */

#sidebar {
    text-align:left;
}

#sidebar h2, #sidebar h3 {
    font-size: 18px;
}

#sidebar li li {
    line-height: 18px;
}

#tag_cloud a:hover {
    text-decoration: underline;
}



/* footer */

#footer {
    color:#9a434a;
    font-size:11px;
    text-align:center;
}

#footer A {
    color: #9a434a;
}

#footer A:hover {
    color: #FFF;
}


/** hidden text **/

#tutorial-buttons a {
    overflow: hidden;
    text-indent: -2000px;
    font-size: 1px;
}

/********** end typorgaphy **********/



* {
    margin: 0;
    padding: 0;
}


html {
    overflow-y: scroll;
}

html, body {
    min-height: 100%;
}

BODY {
    background-image: url('../img/bg.png');
    background-repeat: repeat-x;
    background-position: bottom left;
    background-color: #710d15;
}



H1 {
    clear:both;
    padding-top:10px;
}


UL {
    list-style:none;
}

CODE {
}

IMG.right-img {
    margin:0 0 5px 10px;
}

.white-bg {
    background:#FFF;
}

.gaptop-sml {
    margin-top:15px;
}

.clear {
    clear:both;
    margin:0;
    padding:0;
}

.alignright {
    text-align: right;
    float: right;
}

.alignleft {
    text-align: left;
    float: left;
}


/********top bar **********/

#top-bar {
    /*background-color:#85773F;*/
    background-color:#0D0D0D;
}

#main-nav {
    width:920px;
    margin:0 auto 0 auto;    
}

#main-nav A#small-logo {
    display:block;
    float:left;
    margin-top:3px;
    padding:2px 0 7px 36px;
    background:url('../img/interactive-volcano-small.png') no-repeat 0 0;
    outline: none;
}

#main-nav A#small-logo STRONG {
    margin-left: -6px;
}

#main-nav UL {
    list-style:none;
}

#main-nav LI {
    float:right;
}

#main-nav LI A {
    display:block;
    padding:8px 8px 9px 8px;
}

#main-nav LI A:hover {
    background-color: #f0a731;
}

#searchForm {
    display:none;
    margin: 6px 0 0 10px;
    background: url('../img/search-form.png') no-repeat 0 0;
    /*padding:0 0 0 48px;*/
    position:relative;
    height: 25px;
    padding: 0 26px 0 0;
    min-width: 37px;
}

#searchForm INPUT {
    border:0;
    background-color:transparent;
}

#searchForm #searchField {
    padding: 2px;
    margin: 3px 0 0 0;
    width: 1px;
}

#searchForm #searchSubmit {
    background:url('../img/search-submit.png') no-repeat 0 0;
    width:26px;
    height:25px;
    text-indent:-2000px;
    cursor:pointer;
    position: absolute;
    top: 0;
    right: 0;
}


/******content *********/

#content {
    width:910px;
    margin:0 auto 5px auto;
    padding:0 20px 10px 20px;
    /*background:url('../img/content-bg.png') repeat-y 0 0 #FFF;*/
    background-image: url('../img/gradient-top.png');
    background-repeat: repeat-x;
    background-position: 0 -10px;
    background-color: #FFF;
}

/******* large-promo *********/

#large-promo {
    background:url('../img/interactive-volcano.png') no-repeat 0 0;
    padding:10px 50px 0 200px;
    margin-top:20px;
    min-height:200px;
    width:450px;
    float:left;
}

#large-promo H1 {
    padding-top:0;
}

#large-promo P {
    margin-top:15px;
}


/********** left-col-wide ***************/

#left-col-wide {
    float:left;
    width:680px;
    padding-top:15px;
}

/********** .post ************/

.post H2 {
    margin-top: 20px;
    clear: both;
}

.post H2.first {
    margin-top: 0;
}

.post SMALL.post-date {
    margin: 5px 0 10px 0;
}

/** .entry **/

.entry P {
    margin:7px 0 7px 0;
}

.entry PRE {
    padding:5px 15px;
    background-color: #E8E7D6;
}

.entry PRE.narrow {
}

.entry H2 {
    margin:25px 0 5px 0;
}

.entry .mainImg {
    width: 250px;
    float: right;
    border-left: 15px solid #FFF;
    text-align: center;
}

.entry .mainImg.smallMainImg {
    width: 200px;
}

.entry .mainImg .mainCaption {
    font-size: 10px;
    padding: 0 5px;
    margin: 3px 0 ;
}

.entry img.alignCenter {
    display: block;
    margin: 0 auto;
}

.entry .sociable {
    padding-top: 25px;
}


/** comments + comment form **/

h3#respond {
    margin-top: 15px;
}

#commentform P {
    margin: 7px 0;
}

#commentform INPUT {
    margin-right: 5px;
}

TEXTAREA#comment {
    width:100%;
    margin:7px 0 7px 0;
}

.commentlist {
    list-style:none;
    margin-bottom:20px;
}

.commentlist li {
    margin-top: 10px;
    margin-bottom: 5px;
}

/********* excerpts ********/

.excerptImg {
    float: right;
    margin: 0 0 15px 15px;
}

/************* right-col + sidebar ****************/

#right-col {
    width:170px;
    float:right;
    padding:10px 15px 10px 15px;
    margin-top:0;
}

#sidebar {
    padding-top:10px;
}

#sidebar UL {

}

#sidebar LI {
    margin-bottom:20px;
}

#sidebar LI LI {
    margin-bottom:auto;
}

#sidebar UL UL {
    margin-top: 5px;
    margin-left:10px;
}

/* tutorial buttons */

#tutorial-buttons {
    position: relative;
    width: 179px;
    height: 179px;
    margin-top: 2px;
}

#tutorial-buttons a {
    position: absolute;
    width: 86px;
    height: 86px;
    display: block;
    background: url('/img/tutorial-buttons.png') no-repeat 0 0;
}

#tutorial-buttons a#tutorial-button-jquery {
    top: 0;
    left: 0;
}
#tutorial-buttons a#tutorial-button-jquery:hover {
    background-position: 0 -200px;
}

#tutorial-buttons a#tutorial-button-javascript {
    top: 0;
    right: 0;
    background-position: right 0;
}
#tutorial-buttons a#tutorial-button-javascript:hover {
    background-position: right -200px;
}

#tutorial-buttons a#tutorial-button-flash {
    bottom: 0;
    left: 0;
    background-position: 0 -93px;
}
#tutorial-buttons a#tutorial-button-flash:hover {
    background-position: 0 -293px;
}

#tutorial-buttons a#tutorial-button-css {
    bottom: 0;
    right: 0;
    background-position: right -93px;
}
#tutorial-buttons a#tutorial-button-css:hover {
    background-position: right -293px;
}

/* subscribe */

.rss-link {
    display: block;
    background: url('../img/rss-feed-icon.png') no-repeat 5px 0;
    padding-left: 43px;
    line-height: 28px;
    font-size: 18px;
}

/* tag cloud */

#tag_cloud {
    text-align: center;
}


/*************** footer ****************/

#footer {
    clear:both;
    width:950px;
    margin:10px auto 5px auto;
}

/************* responsive *************/

@media screen and (max-width: 950px) {
  #content {
    width: auto;
  }
  
  #main-nav, #footer {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  #left-col-wide, #right-col {
    width: auto;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    float: none;
  }
  
  #sidebar, #right-col, #right-col h2, #right-col h3 {
    text-align: center;
  }
  
  #sidebar ul ul {
    margin-left: 0;
  }
  
  #tutorial-buttons {
    display: inline-block;
  }
}

@media screen and (max-width: 800px) {
  
}