/* -------------------------------------------------> GENERAL
*/
/**
* background color for all pages
*/
body {
background-color: #FFFFFF;
}
/**
* top and bottom are empty divs with
* background images to create the
* wrapping corners
*/
#top {
width: 920px;
height: 10px;
margin-right: auto;
margin-left: auto;
background-image:url(../images/corners_top.png);
}
#bottom {
width: 920px;
height: 10px;
margin:0px auto 0px auto;
background-image:url(../images/corners_bottom.png);
}
/**
* header holds hidden H1 heading
* background images are chosen under
* PAGE SPECIFIC below
*/
#headerImage {
width: 900px;
height: 138px;
}
/**
* wraps the layout
*/
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6C3901;
width: 900px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
/**
* left space with light background
* on the 'about' page this will be resized to
* be taller by javascript if necessary
*/
#left {
width: 245px;
height: 452px;
float: left;
background-image: url(../images/left_bg.jpg);
background-repeat: repeat-y;
margin: 10px 0 0 0;
}
/**
* right side for navigation and content
* on the 'about' page this will be resized to
* be taller by javascript if necessary
*/
#right {
width: 645px;
height: 370px;
float: right;
margin: 10px 0 0 0;
}
/**
* navigation box
*/
#nav {
background-color: #FFFFFF;
text-align: center;
/* height: 20px;
*/}
/**
* unordered list for page links
*/
#nav ul {
margin: 0px;
padding: 0px;
}
/**
* list items for page links display horizontally / no bullets
*/
#nav ul li {
float: left;
margin: 0;
padding: 0 12px 0 12px;
display: inline;
line-height: 42px;
}
/**
* links within the list items
*/
#nav ul li a {
float: left;
margin: 0 1px 0 0px;
padding: 0;
text-decoration: none;
color: #D06D2A;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
/**
* the H1 heading tag holds each page title
* but will on be visible; the bold link
* titles let the user know where they are
*/
h1 {
display: none;
}
/**
* H2 headings used for titles in resume on 'about' page
*/
h2 {
font-size: 12px;
font-weight: bold;
color: #D06D2A;
margin-bottom: 0px;
}
/**
* H2 for image descriptions on gallery pages
* used for the image title / centered
*/
#description h2 {
text-align: center;
color: #6C3901;
}
/**
* content box lives under the nav box in the 'right' div
*/
#content_container {
margin-top: 10px;
padding: 15px;
background-color: #FFFFFF;
height: 100%;
}
/**
* for gallery pages
* holds the image
*/
#image {
float: left;
width: 380px;
text-align: center;
padding-top: 20px;
}
/**
* for gallery pages
* holds the description and
* prev/next links
*/
#description {
float: right;
width: 210px;
text-align: justify;
padding: 100px 10px 0px 0px;
}
/* -------------------------------------------------> PAGE SPECIFIC
note: each page tag is given a unique id
so each of these rules only applies to its
related page
*/
/**
* 'home' header image background
*/
body#page_home #headerImage {
background:url(../images/header_home.jpg);
background-repeat: no-repeat;
}
/**
* 'home' nav link
*/
body#page_home #home a {
font-weight: bold;
color: #6C3901;
}
/**
* position the 'home' content to the
* lower right and right-align the text
*/
body#page_home #content {
position: relative;
height: 180px;
top: 240px;
float: right;
text-align: right;
}
/**
* 'about' header image background
*/
body#page_about #headerImage {
background:url(../images/header_about.jpg);
background-repeat: no-repeat;
}
/**
* make the 'about' nav link
*/
body#page_about #about a {
font-weight: bold;
color: #6C3901;
}
/**
* 'identity' header image background
*/
body#page_identity #headerImage {
background:url(../images/header_identityBranding.jpg);
background-repeat: no-repeat;
}
/**
* 'identityBranding' nav link
*/
body#page_identity #identityBranding a {
font-weight: bold;
color: #6C3901;
}
/**
* 'print' header image background
*/
body#page_print #headerImage {
background:url(../images/header_print.jpg);
background-repeat: no-repeat;
}
/**
* 'print' nav link
*/
body#page_print #print a {
font-weight: bold;
color: #6C3901;
}
/**
* 'newMedia' header image background
*/
body#page_newMedia #headerImage {
background:url(../images/header_newMedia.jpg);
background-repeat: no-repeat;
}
/**
* newMedia' nav link
*/
body#page_newMedia #newMedia a {
font-weight: bold;
color: #6C3901;
}
/**
* 'printmaking' header image background
*/
body#page_printmaking #headerImage {
background:url(../images/header_printmaking.jpg);
background-repeat: no-repeat;
}
/**
* make the 'printmaking' nav link bold
*/
body#page_printmaking #printmaking a {
font-weight: bold;
color: #6C3901;
}
/**
* 'contact' header image background
*/
body#page_contact #headerImage {
background:url(../images/header_contact.jpg);
background-repeat: no-repeat;
}
/**
* make the 'contact' nav link bold
*/
body#page_contact #contact a {
font-weight: bold;
color: #6C3901;
}
/**
* position the 'contact' page content to
* the lower right and right-align the text
*/
body#page_contact #content {
position: relative;
height: 180px;
top: 200px;
float: right;
text-align: right;
}
/**
* 'contact' email address
*/
body#page_contact #addy a {
text-decoration: none;
color: #D06D2A;
}
body#page_contact #addy a:hover {
text-decoration: underline;
}
/* -------------------------------------------------> GALLERY IMAGES
*/
/**
* each image and title is contained in a div with
* this class: [img] [title]
* so they all line up nicely
*/
.thumb {
width: 140px;
height: 150px;
float: left;
display: inline;
margin: 20px 5px 10px 8px;
text-align: center;
font-size:12px;
}
/* -------------------------------------------------> UTILITY
*/
/**
* for IE
* eliminate the annoying dotted square on clicked links
* there must be a tag wrapping the inside
* of the text like: link text
*/
#nav ul li a span {
float: left;
display: block;
padding: 0;
cursor: pointer;
}
/**
* for Firefox
* eliminate the annoying dotted square on clicked links
*/
a {
outline: none;
}
/**
* personal preference
* eliminates extra space above
* paragraphs when you use them
*/
p {
margin-top: 0px;
}
/**
* to ensure that #left and #right maintain
* equal heights put a div underneath:
*
*/
.bottom {
height: 0px;
clear:both;
}