/***** 
uttwerk.com - Courtney Utt
CSS by Roderick Constance, 2010
*****/

/***** Reset *****/

html, body, div, h1, h2, h3, h4, h5, h6, dl, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
    margin: 0;
    padding: 0;
}

* {
    outline: none;
}

html, body { height: 100%;} /* hack for full background */

/***** Basic Elements *****/

html {}

body {
    background-color: #ffffff;
    color: #000000;  /* default text colour */
    font-family: 'Archer', 'Lucida Sans', 'Optima', 'Georgia', 'Arial', sans-serif;
    font-size: 0.85em;  /* 1em = 16pt. */
    font-weight: 400;  /* see font-face */
}

/***** Custom fonts *****/

/* Designers love their fonts... */

@font-face {
    font-family: "Archer";
    font-weight: 200;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-Light-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 200;
    font-style: italic;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-LightItal-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 300;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-Book-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 300;
    font-style: italic;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-BookItal-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 400;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-Medium-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 400;
    font-style: italic;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-MediumItal-Pro.otf")format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 600;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-Semibold-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 600;
    font-style: italic;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-SembdItal-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 700;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-Bold-Pro.otf") format("opentype");
}

@font-face {
    font-family: "Archer";
    font-weight: 700;
    font-style: italic;
    src: url("http://www.uttwerk.com/fonts/Archer/Archer-BoldItal-Pro.otf") format("opentype");
}

/***** Basic Layout *****/

/* Hierarchy is 3 main DIVs with children.  Looks like:

header  -> header_cell
        -> header_cell
left    -> covers      -> [all projects]
        -> copyright
content -> interiors   -> welcome (dynamic)
        -> caption
*/

#header {
    display:table;
    height: 60px;
    left: 0px;
    margin: 0px 0px 0px 0px;
    padding: 15px 0px 0px 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}

div.header_cell { /* table-cell for bottom align */
    display: table-cell;
    margin: 0px 0px 0px 0px;
    padding: 0px 20px 0px 0px;
    vertical-align: bottom;
}

#left {
    left: 0px;
    margin: 0 0 0 15px;
    padding: 0px 0px 0px 0px;
    position: absolute;
    text-align: center;
    top: 85px;
    width: 360px;
}

#covers {
    display: table;
    height: 1150px;
    margin: 0;
    padding: 4px 0px 10px 0px;
    width: 360px;
}

#copyright {
    margin: 0;
    padding: 0px 0px 0px 0px;
    width: 350px;
}

#content {
    margin: 85px 0 0 375px; 
    padding: 0 20px 0 70px;
    position: relative;
}

#interiors {
    left: 0px;
    margin: 0px;
    overflow: auto;
    padding: 12px 0 30px 0;
    position: relative;
}    

#welcome {
    padding: 0px 0 30px 0;
}    

#caption {
    height: auto;
    overflow: hidden;
    padding: 10px 0 0 0px;
    white-space: nowrap;
    width: 100%;
}

/***** Link Decoration *****/

/* default */

a:link { text-decoration: none; border-bottom: 1px dotted; color: #000000; }
a:active { text-decoration: none; border-bottom: 1px dotted; color: #000000; }
a:visited { text-decoration: none; border-bottom: 1px dotted; color: #000000; }
a:hover { text-decoration: none; border-bottom: 1px dotted; color: #993399; }

/* navigation */

a.nav { text-decoration: none; border-bottom: none; color: #000000; }

/* about */

a.about { text-decoration: none; border-bottom: 1px dotted; color: #000000; }

/* logo */

a.logo { text-decoration: none; border-bottom: none; color: #000000; }

/* contact */

a.contact:link { text-decoration: none; border-bottom: none; color: #000000; }
a.contact:active { text-decoration: none; border-bottom: none; color: #000000; }
a.contact:visited { text-decoration: none; border-bottom: none; color: #000000; }
a.contact:hover { text-decoration: none; border-bottom: none; color: #993399; }

/* caption */

a.cap:link { text-decoration: none; border-bottom: 1px dotted; color: #000000; }
a.cap:active { text-decoration: none; border-bottom: 1px dotted; color: #000000; }
a.cap:visited { text-decoration: none; border-bottom: 1px dotted; color: #000000; }
a.cap:hover { text-decoration: none; border-bottom: 1px dotted; color: #993399; }

/***** Header *****/

p.logo {
    border: none;
    text-align: left;
}

p.nav {
    font-family: "Archer";
    font-size: 10px;
    font-weight: normal;
    text-align: right;
    word-spacing: 10px;
}

img.logo {
    border: none;
    margin-left: 20px;
}

img.nav {
    border: none;
    margin-left: 15px;
}

/***** Covers *****/

img.star {
    display: block;
    height: 18px;
    position: absolute;
    width: 18px;
    z-index: 2000;
}    

img.star-hidden {
    filter: alpha(opacity=0); /* for IE */
    opacity: 0;
}    

img.star-visible {
    filter: alpha(opacity=100);
    opacity: 1;
}    

div.thumb {}  /* For group selection */

img.thumb {
    border: none;
    vertical-align: middle;
}

img.thumbwithborder {
    border: 1px solid #aaaaaa;
    vertical-align: middle;
}

/*
Ugh, this is painful. But it seems to be the only way to have
full control over the cell including a variety of image 
dimensions, floated divs for pure-CSS tables, and absolutely 
positioned z-index images.

Thumbnail images are encapsulated and centered in its
respective DIV.

This means you will need to look at each thumbnail image
to figure out the best dimensions for DIV.

For each DIV: 
- width is defined by the widest member in its column.
- height is defined by the tallest member in its row.
- slight breathing room for aesthetics is added.

column 1 width: 124px
column 2 width: 104px
column 3 width: 104px 

The total width of the columns should be < the width of 
the encapusulating '#covers' DIV (360px).

*/

/* row 1 - 140px high */

#_banksy {
    display: table-cell;
    float: left;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    width: 124px;
}

#_bravestory {
    display: table-cell;
    float: left;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    width: 104px;
}

#_gogomonster {
    display: table-cell;
    float: left;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    width: 104px;
}

/* row 2 - 160px high */

#_othermagazine {
    display: table-cell;
    float: left;
    height: 160px;
    line-height: 160px;
    vertical-align: middle;
    width: 124px;
}

#_thejook {
    display: table-cell;
    float: left;
    height: 160px;
    line-height: 160px;
    vertical-align: middle;
    width: 104px;
}

#_pokemon {
    display: table-cell;
    float: left;
    height:160px;
    line-height:160px;
    vertical-align: middle;
    width: 104px;
}

/* row 3 - 132px high */

#_wobblies {
    display: table-cell;
    float: left;
    height: 132px;
    line-height: 132px;
    vertical-align: middle;
    width: 124px;
}

#_israelvsutopia {
    display: table-cell;
    float: left;
    height: 132px;
    line-height: 132px;
    vertical-align: middle;
    width: 104px;
}

#_houseoffiveleaves {
    display: table-cell;
    float: left;
    height: 132px;
    line-height: 132px;
    vertical-align: middle;
    width: 104px;
}

/* row 4 - 154px high */

#_robertking {
    display: table-cell;
    float: left;
    height: 154px;
    line-height: 154px;
    vertical-align: middle;
    width: 124px;
}

#_bleach {
    display: table-cell;
    float: left;
    height: 154px;
    line-height: 154px;
    vertical-align: middle;
    width: 208px;
}

/* row 5 - 144px high */

#_nameoftherose {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 124px;
}

#_dmc {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 104px;
}

#_pluto {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 104px;
}

/* row 6 - 140px high */

#_i5 {
    display: table-cell;
    float: left;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    width: 124px;
}

#_blackbird {
    display: table-cell;
    float: left;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    width: 104px;
}

#_kamikazegirls {
    display: table-cell;
    float: left;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    width: 104px;
}

/* row 7 - 144px high */

#_zeek {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 124px;
}

#_laborlaw {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 104px;
}

#_writerscorps {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 104px;
}

/* row 8 - 144px high */

#_bewithyou {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 124px;
}

#_bookofheroes {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 104px;
}

#_kriskristofferson {
    display: table-cell;
    float: left;
    height: 144px;
    line-height: 144px;
    vertical-align: middle;
    width: 104px;
}

/***** Copyright *****/

p.copyright {
    font-size: 10px;
    font-weight: 400;
    text-align: center;
}

span.copyrightdate {
    font-size: 14px;
    font-weight: 200;
}

/***** Interiors *****/

.interiors-500px {
    height: 520px;
    white-space: nowrap;
    width: 100%;
}
    
.interiors-600px {
    height: 620px;
    white-space: nowrap;
    width: 100%;
}

.interiors-about {
    height: 100%;
    white-space: normal;
    width: 645px;
}

.interiors-contact {
    height: 100%;
    white-space: normal;
    width: 645px;
}

/***** Welcome *****/

img.welcome {
    left: 0;
    top: 0;
}

/***** Caption *****/

p.caption {
    font-family: "Archer";
    font-weight: normal;
    text-align: left;
}

/***** About *****/

p.about {
    font-family: "Archer";
    font-weight: normal;
    text-align: left;
}

img.about {
    border: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li.fourpx-bullet {
    background: url("images/main/Uttwerk4pxBullet.png") no-repeat 0 6px;
    padding-left: 7px;
}

/***** Contact *****/

p.contact {
    font-family: "Archer";
    font-weight: normal;
    text-align: left;
}

img.contact {
    border: none;
}

/***** Hidden *****/

.hidden-div {
    display: none;
}