/* CSS for foster-johnson.com. Copyright 2007 Eric Foster-Johnson. */

/*
Using a grid-based layout. Gutter size is 8px.
ideal page width is 760 pixels to fit onto a small device (Nokia 770
for example).

Grid size is 56px wide.

a two-unit column is 120px.
a three-unit column 0s 184px.
a six-unit column is 376px

*/
/* Just sets colors for a given theme. 
Hightlight color (light): #aabbdd  #aabbdd
Highlight color (dark): #7788aa #7788aa */

body {
  margin: 10px;
}

.logo {
    margin: 0;   
    padding: 0;
}



.twounit {
    width: 120px;
}


.threeunit {
    width: 184px;
}

.sixunit {
    width: 376px;
}

.sevenunit {
    width: 440px;
}


.gutter{
    width:8px;
}
.widegutter{
    width:24px;
}

.logo_area {
    border-bottom: 1px #000000 solid;
    border-top: 1px #000000 solid;  
    border-left: 1px #000000 solid; 
    border-right: 1px #000000 solid; 
    padding: 4px 4px 4px 4px;
    margin: 2px 2px 2px 2px;
    
    font-family: helvetica,arial,sans-serif;
    font-size: 28px;
    font-weight: normal;
    color: white;
    background-color: #7788aa;
}

.eric_icon {
    padding-top: 8px;
}

.pad_left {
    padding-left: 8px;
}

.nav_area {
    margin:10px;
}

.nav_item {
    padding: 6px 6px 11px 6px;
    text-decoration: none;
}

.nav_item_top {
    border-top: 1px #7788aa solid;      
}

.nav_item_bottom {
    border-bottom: 1px #7788aa solid;
}


.nav_text {
    font-family: helvetica,arial,sans-serif;
    font-size: 10pt;
    font-weight: normal;
}

.nav_bullet {
    padding: 2px 2px 6px 8px;
}

.index_banner_icon {
    background-color: #888888;
    padding: 14px 4px 14px 4px;
}

.index_banner {
    background-color: #535F77;
    padding: 14px 4px 14px 4px;
}

.footer_area {
    border-top: 2px #7788aa solid;  
    font-family: helvetica,arial,sans-serif;
    font-size: 9pt;
    font-weight: normal; 
    padding: 6px 6px 11px 6px;
  

}

.sm_content_text {
    font-family: helvetica,arial,sans-serif;
    font-size: 8pt;
    font-weight: normal;
}


.content_text {
    font-family: helvetica,arial,sans-serif;
    font-size: 9pt;
    font-weight: normal;
}

.content_area {
    margin: 5px;
    
    font-family: helvetica,arial,sans-serif;
    font-size: 9pt;
    font-weight: normal;    
}


.background_shaded {
    background-color: #dddddd;
}


.content_gray {
    font-family: helvetica,arialsans-serif;
    font-size: 9pt;
    font-weight: normal;
    color: #888888;
}

/*

10px margin on the left.

*/
/* ----------------------------------------------------- */

.old_header_area {
    margin: 0;
    
    font-family: helvetica,arial,sans-serif;
    font-size: 10pt;
    font-weight: normal;
    
    background-color : #7788aa;
    color: #ffffff;        
}

/*     float: left;     */
.old_nav_area {
    position: absolute;
    top: 38px;
    left: 0px;
    width: 128px;

    margin: 10px;
    padding: 1px 10px 1px 2px;
    border-right: 1px #7788aa dotted;  
    font-family: helvetica,arial,sans-serif;
    font-size: 9pt;
    font-weight: normal;    
}


/* float: right; */
.old_content_area {
    position: absolute;  
    top: 38px;
    width: 75%;
    right: 0px;    
    margin: 5px;
    
    font-family: helvetica,arial,sans-serif;
    font-size: 9pt;
    font-weight: normal;    
}

.old_content-area {
    background-color : #ffffff;
    color: #000000;
    width: 300px;
    font-family: arial,helvetica,sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;    
     
    
}


.content-area-hidden {
    display: none;
}


.subcategory-area-hidden {
    display: none;
}

.subcategory-area {
    background-color : #ffffff;
    color: #000000;
    width: 300px;
    font-family: arial,helvetica,sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;    
    
    
}

.nav-area {
    background-color : #ffffff;
    color: #000000;
    
    font-family: arial,helvetica,sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;    
    
    padding: 2px 2px 2px 2px;
}

.nav-area-hidden {
    display: none;
}



.full_content_area {
    top: 38px;
    width: 100%;
    float: left;    
    margin: 12px;
    
    font-family: helvetica,arial,sans-serif;
    font-size: 9pt;
    font-weight: normal;    
}


.editbox {
    font-family: helvetica,arial,sans-serif;
    font-size: 10pt;
    border: 1px solid #7788aa;
}

.ok_button {
  font-family: helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;  
  padding: 1px 2px 1px 2px;
  background-color : #77dd77;
  color: #000000;
  border: 1px solid #339933;
}

.ok_button_active {
  font-family: helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;  
  padding: 1px 2px 1px 2px;
  background-color : #339933;
  color: #ffffff;
  border: 1px solid #000000;  
}

.cancel_button {
  font-family: helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;  
  padding: 1px 2px 1px 2px;
  background-color : #ee8888;
  color: #000000;
  border: 1px solid #993333;
}

.current_nav {
    background-color : #D2D7E3;
}

.cancel_button_active {
  font-family: helvetica,arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;  
  padding: 1px 2px 1px 2px;
  background-color : #993333;
  color: #ffffff;
  border: 1px solid #000000;
}

.nav_link, .nav_link:link, .nav_link:visited {
    text-decoration: none;  
    color: black;
    padding: 1px 1px 1px 1px;
    font-weight: normal;
}

.nav_link:active, .nav_link:hover {
    color: #993333;
    text-decoration: none;
    padding: 1px 1px 1px 1px; 
    font-weight: normal;
}


.link, .link:link, .link:visited {
    color: #993333;   
    text-decoration: none;  
    padding: 1px 1px 1px 1px;
    font-weight: bold;
}

.link:active, .link:hover {
    color: #7788aa;
    text-decoration: none;
    padding: 1px 1px 1px 1px; 
    font-weight: bold;
}

.categorylink, .categorylink:link, .categorylink:visited {
    color: #993333;   
    text-decoration: none;  
    padding: 1px 1px 1px 1px;
    font-weight: bold;   
}



.categorylink:hover, .categorylink:active {
    color: #7788aa;
    text-decoration: none;
    padding: 1px 1px 1px 1px; 
    font-weight: bold;   
}


.current_h_link, .current_h_link:link, .current_h_link:visited {
    background-color : #ccddff;
    color: #662222;  
    text-decoration: none;  
    padding: 2px 5px 2px 5px; 
}

.current_h_link:active, .current_h_link:hover {
    background-color : #aabbdd;
    color: #000000;    
    text-decoration: none;
    padding: 2px 5px 2px 5px; 
}

.h_link, .h_link:link, .h_link:visited {
    background-color : #7788aa;
    color: #ffffff;  
    text-decoration: none;  
    padding: 2px 5px 2px 5px; 
}

.h_link:active, .h_link:hover {
    background-color : #aabbdd;
    color: #000000;    
    text-decoration: none;
    padding: 2px 5px 2px 5px; 
}

/* h2 with dark color text. */
.h4_text {
    font-family: helvetica,arialsans-serif;
    font-size: 11pt;
    font-weight: bold;
    color: #7788aa;
}

/* h2 with gray text. */
.h3_text {
    font-family: helvetica,arialsans-serif;
    font-size: 11pt;
    font-weight: normal;
    color: #888888;
}
.h2_text {
    font-family: helvetica,arialsans-serif;
    font-size: 11pt;
    font-weight: normal; 
}

.h1_text {
    font-family: helvetica,arial,sans-serif;
    font-size: 16pt;
    font-weight: normal;
}



.blue_heading {
    font-size: 12px;
    color: #FFFFFF;
    background-color : #7788aa;
    font-weight: bold;
    padding: 4px 4px 4px 4px;
}

.blue_border {
    border-bottom: 1px #7788aa solid;
    border-left: 1px #7788aa solid;
    border-top: 1px #7788aa solid;
    border-right: 1px #7788aa solid;     
    
    padding: 4px 4px 4px 4px;
}

.green_heading {
    font-size: 12px;
    color: #FFFFFF;
    background-color : #77aa88;
    font-weight: bold;
    padding: 4px 4px 4px 4px;
}

.green_border {
    border-bottom: 1px #77aa88 solid;
    border-left: 1px #77aa88 solid;
    border-top: 1px #77aa88 solid;
    border-right: 1px #77aa88 solid;     
    
    padding: 4px 4px 4px 4px;
}