/* TABLE OF CONTENTS
Prefix your search term with "* " to jump to that section.
Eg: to jump to the footer styles, search for "* footer"

* resets
* global layout
* colors
* fonts
* anchors
* header
* logo
* title
* nav
* content
* section
* aside
* footer

/* resets */
*
{
    padding:0;
    margin:0;
    border:0;
}
ul
{
    list-style:none;
}
img
{
    display:block;
}

/* colors */
/* Red
    color:#ba321c;
*/

/* global layout */
.wrapper
{
    border-left:1px dashed #666;
    border-right:1px dashed #666;
}
#mockup1 #page,
#mockup2 #page,
#mockup3 .wrapper,
#mockup4 .wrapper
{
    max-width:1100px;
    _width:1100px;
    margin:0 auto;
}

/* template variations */
/* flip2col */
.flip2col #column1
{
    position:relative;
    left:25%;
}
.flip2col #column2
{
    position:relative;
    left:-75%;
}
/* flip3col */
.flip3col #column1
{
    position:relative;
    left:20%;
}
.flip3col #column2
{
    position:relative;
    left:-60%;
}
/* flop3col */
.flop3col #column1
{
    position:relative;
    left:20%;
}
.flop3col #column2
{
    position:relative;
    left:20%;
}
.flop3col #column3
{
    position:relative;
    left:-80%;
}

#content .stackContent,
#footer .stackContent
{
    padding:10px;
    margin:10px;
}
#content .stackAuto,
#footer .stackAuto
{
    padding:10px 0
}
#content .stackAuto .stackContent,
#footer .stackAuto .stackContent
{
    margin:0 10px;
}

/* fonts */
.stackContent,
#nav li,
body,
input,
select,
textarea
{
    font-family:sans-serif;
}
h1, h2, h3, h4, h5, h6
{
    font-family:sans-serif;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6
{
    margin-top:0.5em;
    margin-bottom:0.5em;
    clear:both;
    line-height:1.2em;
}
#content p
{
    margin-bottom:1em;
}
code
{
    font-size:1.5em;
    color:#ba321c;
}
strong
{
    color:#ba321c;
}


/* anchors */
a,
a:visited
{
    text-decoration:none;
    cursor:pointer;
    color:#666;
}
a:hover,
a:focus
{
    color:#fff;
}



/* header */
/* all mockups */
#header
{
    background:#333;
}

/* mockup2,3,4 & 5 */
#header
{
    text-align:left;
}

#title
{
    color:#fff;
    padding:20px;
    font-size:3em;
}

/* mockup2, 3 & 4 */
#header .wrapper
{
    position:relative;
}


/* banner  */
#banner
{
    overflow:hidden;
    background:#000;
}
#banner img
{
    *float:left;
}

/* navigation */
/* all mockups */
#nav
{
    padding:20px;
}
#nav li a
{
    padding:15px;
    border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
}
#nav li.active a
{
    border-color:transparent;
    background-color:#444;
    color:#fff;
    -pox-shadow:inset 0 0 5px #000;
    -moz-box-shadow:inset 0 0 5px #000;
    -khtml-box-shadow:inset 0 0 5px #000;
    -webkit-box-shadow:inset 0 0 5px #000;
}

/* mockup1&2 */
#mockup1 #nav li,
#mockup2 #nav li
{
    float:left;
}
#mockup1 #nav li a,
#mockup2 #nav li a
{
    display:block;
    float:left;
}

/* content */
/* all mockups */
#content .stackContent
{
    background-color:#eee;
}
#column2 .stackContent
{
    background:#fff;
    border:1px solid #ccc;
    border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    -box-shadow:0 0 5px #999;
    -moz-box-shadow:0 0 5px #999;
    -khtml-box-shadow:0 0 5px #999;
    -webkit-box-shadow:0 0 5px #999;
}

/* mockup2 */
#mockup2 h2.stackContent
{
    background-color:transparent;
}

/* mockup3 */
#column3 .stackContent
{
    background:#dcf5f2;
    border:1px solid #ccc;
    border-radius:5px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    -box-shadow:0 0 5px #999;
    -moz-box-shadow:0 0 5px #999;
    -khtml-box-shadow:0 0 5px #999;
    -webkit-box-shadow:0 0 5px #999;
}

/* mockup3 & 4 */
#content .stackAuto,
#mockup3 #content .stack1of5,
#mockup4 #content .awesomeClass,
#mockup4 #content .galleryImage
{
    vertical-align:middle;
}
#content .stack1of5 .stackContent
{
    text-align:center;
}
#content .stack1of5 strong
{
    display:block;
    padding-top:10px;
}

/* section */


/* aside */

/* footer */
/* all mockups */
#footer
{
    font-size:0.8em;
    color:#ccc;
    background:#333;
}
#footer .stackAuto
{
    vertical-align:middle;
}

/* mockup2,3,4 & 5 */
