/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/

#content {
    height: 100%;
    min-height: 100%;

    text-align: left;
}

#content,
    #width {
    /*max-width: 1000px;*/
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 94%;
    height: auto;
}

/**************************************************************
  #header: Holds the site title and header images
**************************************************************/

#header {
    position: relative;
    height: 7em;
    background-color: #a3b8cc;
}

/* Holds the site title and subtitle */
#header #title {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 70px;

    padding: 5px;
    text-align: right;
}

#header h1 {
    margin: 0;
    padding: 0;

    font: 700 4em "trebuchet ms", serif;
    letter-spacing: -3px;
    text-transform: lowercase;
    color: #FFFFFF;

    border: none;
}

#header h2 {
    position: absolute;
    top: 10px;
    right: 5px;

    margin: 0;
    padding: 0;

    font: 700 1em "trebuchet ms", serif;
    text-transform: lowercase;
    color: #666666;

    border: none;
}

/* Sets where the header images will go */
#header img.left {
    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;
}

#header img.right {
    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;
}

#header img.balloons {
    position: absolute;
    z-index: 2;

    top: 70px;
    right: 400px;
}

/**************************************************************
  #mainMenu: The top level site menu
**************************************************************/

#mainMenu {
    float: left;
    width: 100%;
    clear: both;
}

#mainMenu ul {
    margin: 0;
    padding: 0;
    background-color: #000066;
    width: 100%;
}

#mainMenu li {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mainMenu li a {
    float: left;
    margin: 0 2px;
    padding: 5px 0.5em;

    font: 400 1.4em "trebuchet ms", serif;
    text-decoration: none;
    text-transform: lowercase;
    color: #FFF;
}

#mainMenu li a:hover,
    #mainMenu li a.here {
    color: #65EBFF;
}

#mainMenu li a.last {
    margin-right: 0;
}

#home li a.home,
    #blog li a.blog,
    #articles li a.articles,
    #bio li a.bio,
    #resources li a.resources,
    #contact li a.contact {
    color: #65EBFF;
}

/**************************************************************
  .sideMenu: The side bar menu
**************************************************************/

ul.sideMenu {
    margin: 0;
    padding: 0;
}

.sideMenu li {
    display: inline; /* Needed since IE fails when you give it list-style: none; */
    list-style-image: url( foo.gif );
    font: 400 1.3em "trebuchet ms", serif;
}

.sideMenu li a {
    display: block;
    margin: 0.2em 0;
    padding: 3px 5px;

    text-decoration: none;
    color: #FFF;
}

.sideMenu li a:hover {
    color: #65EBFF;
    background: #5F5F5F;
}

/* Active menu item */
.sideMenu li.here {
    display: block;
    padding: 5px;
    color: #65EBFF;
    background: #555;
}

/* Submenu of active menu item */
.sideMenu li.here ul {
    margin: 0;
    padding: 0;
}

.sideMenu li.here ul li a {
    padding-left: 35px;
    font: 400 0.55em verdana, arial, sans-serif;
    color: #FFF;
    background: url( ../images/bg/bullet.gif ) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
    color: #9FF3FF;
    background: #5F5F5F url( ../images/bg/bullet.gif ) no-repeat 10px 0px;
}

/**************************************************************
  #page: Holds the main page content.
**************************************************************/

#page {
    float: left;
    width: 100%;
    clear: both;

    padding-bottom: 4em;
    background-color: #FFFFFF;
}

/**************************************************************
  #footer: The page footer - will stick to the bottom if not
           enough content.
**************************************************************/

#footer {
    float: left;
    width: 100%;
    clear: both;

    background-color: #a3b8cc;
    text-align: center;

    font-size: 0.85em;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
}


.entry-footer, .comment-footer {
    margin: 10px 15px;
    padding: 0;
    border-bottom: black dotted 1px;
    text-align: right;
}

/**************************************************************
  Width classes used by the site columns
**************************************************************/

.width100 {
    width: 100%;
}

.width75 {
    width: 74%;
}

.width50 {
    width: 49.7%;
}

.width33 {
    width: 32.7%;
}

.width25 {
    width: 24.7%;
}

/**************************************************************
  Alignment classes
**************************************************************/

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.alignLeft {
    text-align: left;
}

.alignRight {
    text-align: right;
}

.alignCenter {
    text-align: center;
}

/**************************************************************
  Generic display classes
**************************************************************/

.clear {
    clear: both;
}

.block {
    display: block;
}

.small {
    font-size: 0.8em;
}

.green {
    color: #A1FF45;
}

.red {
    color: #EA1B00;
}

.grey {
    color: #666;
}

.grey a {
    color: #999;
}

.grey a:hover {
    color: #EEE;
}

.odd {
    background-color: #DDDDDD;
}

.even {
    background-color: #FFFFFF;
}