/*--------------------------------------------------------------------
styles.css

http://www.catherinecasalino.com
----------------------------------------------------------------------
All content Copyright 2007 - Catherine Casalino and Matt Thomas
--------------------------------------------------------------------*/

/*-----UNIVERSALS---------------------------------------------------*/

html, body {
 margin: 0;
 padding: 0;
 height: 100%;
 background: #818286;
}

a {
 outline: 0;
 text-decoration: none;
 font-size: xx-small;
 font-family: sans-serif;
 color: #333;
}

img {
 border: none;
 vertical-align: middle;
 margin: -1px 0 0 0;
 padding: 0;
}


/*-----GENERAL-------------------------------------------------------*/

img.text {
 margin: 0;
 padding: 0;
}

.inside {
 border-left: 1px solid #87898b;
 border-right: 1px solid #939597;
 border-top: 1px solid #939597;
 border-bottom: 1px solid #86888a;
}

.outside {
 border-right: 1px solid #87898b;
 border-left: 1px solid #939597;
 border-bottom: 1px solid #939597;
 border-top: 1px solid #86888a;
}


/*-----PAGE LAYOUT---------------------------------------------------*/

#spreader {
 position: relative;
 min-height: 50%;
 height: 275px;
 width: 100%;
}

#container {
 position: relative;
 height: 514px;
 width: 691px;
 margin: -257px auto 0 auto;
}


/*-----CONTENT DISPLAY-----------------------------------------------*/

/*No border.  Used for Home and About*/
#open {
 position: absolute;
 top: 0;
 left: 0;
 padding: 191px 0 0 38px;
 height: 320px;
}

/*Content border.  Used for gallery pages*/
#content {
 position: absolute;
 top:0;
 left: 0;
 width: 521px;
 height: 512px;
}

/*Full page display; no caption*/
#full {
 position: absolute;
 top:0;
 width: 519px;
 height: 510px;
 line-height: 510px;
 vertical-align: middle;
 text-align: center;
}

/*Display plus caption*/
#display {
 position: absolute;
 top: 0;
 width: 519px;
 height: 446px;
 line-height: 446px;
 vertical-align: middle;
 text-align: center;
}

#caption {
 position: absolute;
 bottom: 0px;
 width: 519px;
 height: 62px;
 line-height: 62px;
 vertical-align: middle;
 text-align: center;
}

/*Gallery name (displayed vertically in top right corner)*/
#name {
 position: absolute;
 margin: 0;
 top: 0;
 right: 0;
}

/*-----GALLERY NAVIGATION-------------------------------------------*/

#gallery {
 position: absolute;
 top: 0px;
 right: 0px;
 height: 512px;
 width: 138px;
 margin: 0;
 padding: 0;
 list-style: none;
}

#current {
 border: 1px solid #fff;
 background: #fff;
 line-height: 62px;
 vertical-align: middle;
 text-align: center;
}

#current img {
 margin-top: -1px;
}

.item_3, .item_2 {
 position: relative;
 float: left;
 height: 62px;
 width: 44px;
 margin: 0;
 padding: 0;
 border-left: 1px solid #87898b;
 border-right: 1px solid #939597;
 border-top: 1px solid #939597;
 border-bottom: 1px solid #86888a;
 overflow: hidden;
}

.item_2 {
 width: 67px;
}

.item_3 a, .item_2 a {
 display: block;
 width: 100%;
 height: 62px;
 line-height: 62px;
 vertical-align: middle;
 text-align: center;
}

#gallery_nav {
 position: absolute;
 top: 512px;
 right: -2px;
 display: block;
 list-style: none;
 height: 24px;
 margin: 0;
 padding: 0;
}

#gallery_nav li {
 float: left;
}

#gallery_nav span {
 display: block;
 width: 4px;
 height: 0;
 padding-top: 6px;
 overflow: hidden;
 background: #949599;
 border-right: 1px solid #8e8f93;
 border-left: 1px solid #838488;
 border-bottom: 1px solid #8c8d91;
 border-top: 1px solid #8f9094;
 margin: 13px 9px 3px 9px;
}

#gallery_nav a:hover span {
 background: #f3f4fe;
 border-right: 1px solid #e9e9f4;
 border-left: 1px solid #d0d2db;
 border-bottom: 1px solid #e3e3ee;
 border-top: 1px solid #e9e9f4; 
}

#gallery_nav a.active span {
 background: #cdced7;
 border-right: 1px solid #c4c6ce;
 border-left: 1px solid #b1b1ba;
 border-bottom: 1px solid #c0c0c9;
 border-top: 1px solid #c4c6ce; 
}



/*-----HOME & ABOUT-------------------------------------------------*/

/*Home - Main Navigation*/
#navigation {
 list-style: none;
 margin: 0;
 padding: 0;
 background: transparent url("images/menu.jpg") no-repeat left 22px;
}

#navigation img {
 display: block;
 margin: 0 0 22px 0;
}

#navigation a {
 display: block;
 height: 0px;
 width: 128px;
 padding-top: 26px;
 overflow: hidden;
}

/*Home - Contact info*/
#contact img {
 margin: 0;
}

#contact {
 position: absolute;
 top: 441px;
 left: 38px;
}

/*About - Text display*/
#about {
 display: block;
 margin-top: 1px;
}


/*-----ALTERNATES---------------------------------------------------*/

#alternates {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 margin: 0;
 padding: 0;
 list-style: none;
}

#alternates li {
 display: block;
 position: relative;
 width: 24px;
 height: 36px;
 margin: 8px;
 overflow: hidden;
}

#alternates img {
 display: block;
 position: absolute;
}