/***** 
shadowshapes.com - Roderick Constance
CSS by Roderick Constance, 2009
*****/

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

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

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

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

html {
    min-height: 100%; /* hacks for permanent v-scrollbar */
    margin-bottom: 1px; 
    overflow-y: scroll;
}

body {
    color: #f0ebe3;
    font-size: 10pt;
    font-family: 'Lucida Sans', 'Optima', 'Georgia', 'Arial', sans-serif;
    /* font-family: 'Lucida Bright', 'Georgia', serif; */
    /* font-family: 'Lucida Grande', 'Geneva', 'Arial', sans-serif; */
}

a:link {
    color:#f0ebe3;
    text-decoration: none;
}

a:visited {
    color:#f0ebe3;
    text-decoration: none;
}

a:hover {
    color:#de9260;
    text-decoration: none;
}

a:active {
    color:#dd0000;
    text-decoration: none;
}

/* "invisible" link */

a.invis:link {
    color:#cccccc;
    text-decoration: none;
}

a.invis:visited {
    color:#cccccc;
    text-decoration: none;
}

a.invis:hover {
    color:#cccccc;
    text-decoration: none;
}

a.invis:active {
    color:#dd0000;
    text-decoration: none;
}

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

#window { /* full browser window */
    background-color: #111111;
    background-image: url(images/main/roderickconstance-crosshatch.gif);
    background-repeat: repeat;
    background-position: top left;
    min-height: 100%;
    overflow: auto;
    width: 100%;
}

#border { /* multiple background hack*/
    background-image: url(images/main/roderickconstance-border.jpg);
    background-repeat: repeat;
    background-position: center center;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 800px;
}

#canvas {
    background-image: url(images/main/roderickconstance-texture.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 800px;
}

#container {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 750px;
}

#header {
    display: table;
    height: 50px;
    padding: 0px 0px 5px 0px;
    width: 100%;
}

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

#splash {
    border: 1px solid #777777; 
    background-image: url(images/main/roderickconstance-splash.jpg);
    background-repeat: no-repeat;
    display: table;
    height: 140px;
    width:100%;
}

#splash_cell { /* table-cell for bottom align */
    display: table-cell;
    height: 1em;
    padding: 0px 5px 5px 0px;
    vertical-align: bottom;
}

#content {
    height: 100%;
    width: 100%;
}

#copyright {
    text-align: center;
    padding: 20px 0px 10px 0px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

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

span.pipe {
    color: #555555;
}

span.deadlink {
    color: #999999;
}

p.myname {
    color: #dddddd;
    text-align: left;
}

p.nav {
    font-size: 10px;
    letter-spacing: 2px;
    text-align: right;
}

img.myname {
    border: none;
}

/***** Splash *****/

p.email {
    font-size: 10px;
    text-align: right;
}

p.copyright {
    font-size: 9px;
    line-height:150%;
}

/***** Content *****/

/* teaser -----> */

div.teaser {
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 100%;
}
div.spacer {
    height: 30px;
    width: 100%;
}

div.teaser_img {
    height: 50px;
    width: 100%;
}

/* <---- teaser */

div.concept {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0px 0px 10px;
    text-align: left;
    width: 100%;
}

div.illo {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0px 0px 10px;
    text-align: left;
    width: 100%;
}

div.sketches {
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0px 0px 10px;
    text-align: left;
    width: 100%;
}

/* bio -----> */

div.bio {
    display: table;
    font-size: 10pt;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0px 0px 0px;
    text-align: left;
    width: 70%;
}

div.bio_text {
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px 10px 10px;
    vertical-align: top;
}

div.bio_img {
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 10px 10px 10px;
    vertical-align: top;
}

p.eight-point {
    font-size: 8pt;
}

/* <----- bio */

hr.dash {
    border: 1px dashed;
    width: 90%;
}

hr.dot {
    border: 1px dotted;
    width: 90%;
}

p.section {
    color: #de9260;
    font-size: 16px;
    padding: 10px 0px 5px 0px;
}

p.project {
    padding: 0px 0px 0px 8px;
}

p.date {
    font-size: 9px;
    line-height:200%;
    padding: 0px 0px 0px 8px;
}

p.imagerows{
    padding: 15px 0px 0px 20px;
}

/***** Misc *****/

/* change border colour onmousover */

.xborder img {
    border: 1px solid #111111;
}

.xborder:hover img {
    border: 1px solid #de9260;
}