/* jutraswoodworking.com */
/* copyright Robert E Walker */
/* base.css */

/*
  This is the base style for all body text.
  Special thanks to Owen Briggs for relative font sizing tips.
*/

body {
 font-family: "Trebuchet", "Arial", sans-serif;
 font-size: 76%; /* 12.1333px */
 color: black;
 text-align: left;
 vertical-align: bottom;
 background-color: white;
 width: 100%;
}

/*
  Remove all margins & padding.
  They will be replaced only as needed.
*/

a,
body,
div,
fieldset,
img,
h1, 
h2, 
h3, 
h4, 
h5, 
h6,
p,
ul,
ol,
li,
form {
 margin: 0;
 padding: 0;
 border: none;
 display: block;
}

ul {
 list-style-type: square;
}

p, 
td,
ul,
ol,
fieldset {
 font-size: .8242em;  /* 10px */
 line-height: 1.8em; /* 18px */
 vertical-align: baseline;
}

ul p,
ol p,
fieldset p,
fieldset ul,
fieldset ol {
 font-size: 1em;  /* 10px */
}

p,
ul,
ol {
 margin-bottom: 1.8em;
}

/*
  This is the base style for all headers.
*/
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
 font-family: "Trebuchet MS", "Tahoma", sans-serif; 
 font-weight: bold;
 line-height: 1.4em;
 text-align: left;
 vertical-align: middle;
}

h1 {
 font-size: .9890em;  /* 12px */
 line-height: 1.5em; /* 18px */
 margin-bottom: 1.5em;
}

h2 {
 font-size: .8242em;  /* 10px */
 line-height: 1.8em; /* 18px */
 margin-bottom: 1.8em;
}

h3 {
 font-size: .8242em;  /* 10px */
 line-height: 1.8em; /* 18px */
 margin-bottom: 1.8em;
}

h4 {
 font-size: .8242em;  /* 10px */
 line-height: 1.8em; /* 18px */
 margin-bottom: 1.8em;
}

h5 {
 font-size: .9890em;  /* 12px */
 line-height: 1.5em; /* 18px */
 margin-bottom: 1.5em;
}

h6 {
 font-size: .8242em;  /* 10px */
 line-height: 1.8em; /* 18px */
 margin-bottom: 1.8em;
}

/*
  Default link settings
*/
a {
 display: inline;
 font-weight: bold;
 outline-width: 0;
}

a:link {
 color: #000;
 background-color: inherit;
}

a:visited {
 color: #555;
 background-color: inherit;
}

a:hover {
 color: #888;
 background-color: inherit;
}

a:active {
 color: #aaa;
 background-color: inherit;
}

/*
  Layout settings.
*/

.clear_floats {
 clear: both;
}

#content_container {
 position: relative;
 min-width: 885px;
 width: 90%;
 min-height: 400px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 9.148em;
 background-image: url("../images/ruler_lines_primary.gif");
 background-repeat: repeat-y;
 background-position: top left;
}

#display_image {
 width: 500px;
 background-image: url("../images/ruler_lines_left.gif");
 background-repeat: repeat;
 background-position: top left;
}

#section_description {
 width: 350px;
 position: relative;
 top: -150px;
 left: 64px;
 color: white;
}

#section_description h1 {
 margin-bottom: .5em;
 text-transform: lowercase;
}

.title_bullet { /* decorative element */ 
 background-color: #ef4b23;
 display: block;
 width: 1em;
 height: 1em;
 position: absolute;
 top: .25em;
 left: -1.4em;
}

#project_title {
 margin-top: 8px;
 margin-right: 8px;
 float: left;
}

#description {
 width: 350px;
 margin-right: 32px;
 float: left;
}

#project_credits div {
 color: #676738;
 margin-bottom: .8em;
 margin-left: 382px;
}

#project_credits p {
 line-height: 1.2em;
 margin-bottom: 0;
}

#project_credits .info_label {
 text-transform: uppercase;
}

#project_menu {
 position: absolute;
 top: 96px;
 left: 596px;
 width: 202px;
}

#project_menu li {
 margin-bottom: 18px;
}

#project_menu li.alt_position {
 margin-top: -18px;
}

#image_menu {
 margin-top: -10px;
}

#content_container > #image_menu {
 position: relative;
 z-index: 100;
 margin-top: 0;
 top: -10px;
}

#image_menu li,
#project_menu li {
 float: left;
}

#image_menu a,
#project_menu a,
.image_index a {
 display: block;
 margin: 0;
 margin-top: -2px;
 margin-right: -2px;
 width: 64px;
 height: 64px;
 border: 2px solid black;
 text-decoration: none;
 background-repeat: repeat-y;
 position: relative;
}

#image_menu a:link,
#project_menu a:link,
.image_index a:link {
 background-position: 0 0;
 border-color: black;
 z-index: 1;
}

#image_menu a:visited,
#project_menu a:visited,
.image_index a:visited {
 background-position: 0 -64px;
 border-color: black;
 z-index: 1;
}

#image_menu a:hover,
#project_menu a:hover,
.image_index a:hover {
 background-position: 0 -128px;
 border-color: #bac5b8;
 z-index: 3;
}

#image_menu a:active,
#project_menu a:active,
.image_index a:active {
 background-position: 0 -192px;
 border-color: black;
 z-index: 3;
}

#image_menu a {
 width: 32px;
 height: 32px;
 margin-right: 8px;
}

#image_menu a:link {
 background-position: -16px -16px;
 border-color: white;
}

#image_menu a:visited {
 background-position: -16px  -80px;
 border-color: white;
}

#image_menu a:hover {
 background-position: -16px  -144px;
 border-color: #bac5b8;
}

#image_menu a:active {
 background-position: -16px  -208px;
 border-color: black;
}

#sub_menu {
 position: absolute;
 top: 0;
 left: 500px;
 padding-top: 4px;
 padding-left: 8px;
}

#sub_menu a {
 text-decoration: none;
}

.current_btn a:link,
.current_btn a:visited,
.current_btn a:hover,
.current_btn a:active { /* overkill, but better safe */
 border-color: #ef4b23;
 z-index: 2;
}

#project_menu .current_btn a:link {
 background-position: 0 -64px;
}

#image_menu .current_btn a:link {
 background-position: -16px  -80px;
}

#image_menu .current_btn a:link,
#image_menu .current_btn a:visited,
#image_menu .current_btn a:hover,
#image_menu .current_btn a:active { /* overkill, but better safe */
 border-color: #ef4b23;
 z-index: 2;
}

#main_menu {
 position: absolute;
 right: 0;
 bottom: 12px;
 margin: 0;
 margin-right: 8px;
 font-size: .989em;
 line-height: 1em;
 z-index: 2;
}

#main_menu li {
 display: inline; 
}

#main_menu a {
 display: block;
 float: left;
 padding: 4px;
 text-decoration: none;
}

#main_menu a:link {
 color: #676738;
 background-color: transparent;
}

#main_menu a:visited {
 color: #676738;
 background-color: transparent;
}

#main_menu a:hover {
 color: #fefeef;
 background-color: transparent;
}

#main_menu a:active {
 color: #fefeef;
 background-color: #d4dfd2;
}

#masthead_container {
 /* centers masthead hor */
 min-width: 885px;
 width: 90%;
 height: 10px;
 margin-left: auto;
 margin-right: auto;
}

#masthead {
 color: white;
 background-color: #a4bca1;
 position: absolute;
 top: 0;
 width: 100%;
 min-width: 885px;
 height: 9.148em;
 min-height: 111px;
}

#masthead_container > #masthead {
 width: 90%;
}

#masthead_logo a {
 position: absolute;
 top: 16px;
 left: 16px;
 width: 219px;
 height: 80px;
 text-decoration: none;
 background-image: url("../images/logo_masthead.gif");
 background-repeat: no-repeat;
}

#masthead_logo span {
 display: none;
}

#masthead_phone {
 font-family: "Times", serif;
 color: #cbd4c9;
 position: absolute;
 top: 50px;
 right: 8px;
 font-size: 6.0em;
 line-height: 1em;
 letter-spacing: .03em;
 z-index: 1;
}

#callout_menu {
 position: absolute;
 top: 94px;
 left: 404px;
}

#callout_menu a {
 display: block;
 text-decoration: none;
 text-align: right;
 line-height: 22px;
 vertical-align: baseline;
 width: 144px;
 padding-right: 4px;
 border-top: 2px solid #bac5b8;
 border-bottom: 2px solid #bac5b8;
 margin-bottom: 22px;
}

#callout_menu a:link {
 color: white;
 background-color: #c78f4a;
}

#callout_menu a:visited {
 color: white;
 background-color: #c78f4a;
}

#callout_menu a:hover {
 color: white;
 background-color: #b17c3d;
}

#callout_menu a:active {
 color: #c78f4a;
 background-color: #9c6830;
}