@import "reset.css";
@import "typography.css";

/* Site */
html, body { height: 100% !important; }
body { min-width:860px;}
#wrap { height: 100%; position: relative; }
#logo { position: absolute; top: 20px; left: 26px; z-index: 100; margin: 0;}
#nav {
    position: absolute; z-index: 10;
    top: 0px; left: 0px;
    background: #fff;
    width: 128px;
    height: 100%;
    font-family: Verdana, Helvetica, sans-serif;
}
#nav a { cursor: pointer; }
#nav .menu {position: absolute; bottom: 80px; }
#nav ul { margin: 16px 0 0 26px; list-style: none;}
#nav ul.nav-list { }
#nav ul li { text-transform: uppercase; width: 160px; margin-top: -4px;}
#nav ul li a {font-size: 120%;}
#nav ul li a:hover, #nav ul li a.hover { text-decoration: none; }
#nav li a.about { margin-left: 20px; }
#content {
    position: relative;
    margin-left: 180px;
    min-height: 100%;
}
#content-main {
    padding-top: 66px;
    padding-right: 40px;
    padding-bottom: 40px;
}
#footer { 
    position: absolute;  bottom: 0;
    width: 100%; height: 30px;
    padding-top: 6px;
}
#copyright { 
    color: #6F6C6C; font-size: 85%; 
    font-family: Arial, Helvetica, Clean, sans-serif; text-transform: uppercase; 
    margin: 0 auto; text-align: center;
    padding-right: 20px;
}

.page {
    width: 66%;
    margin: 0 auto;
    text-align: justify;
}
.page h2 { text-align: center; }
.page p { text-indent: 3em; }

ul.collection-list { 
    margin: 0; list-style: none; 
    margin: 0 auto; width: 680px; 
}
.collection-list li {
    position: relative;
    width: 320px; height: 254px;
    float: left;
    margin: 10px 10px 0 10px;
}
.collection-list h2 { margin: 0 0 2px 0; text-transform: uppercase;}
.collection-list h2.hover { color: #ED1344;  }
.collection-list li a {
    display: block;
    border: solid 3px; border-color: #4F4C4C;
    width: 314px; height: 218px;
}
.collection-list li a:hover, .collection-list li a.hover { border-color: #ED1344 !important;  }
.collection-list a img { display: block; }

.images { position: relative; margin-bottom: 20px;}
.image-frame { position: relative; width: 600px; height: 406px; margin: 0px auto; text-align: center; }
.image-frame a { text-align: center; display: block; }
.image-frame a img { border: solid 2px; border-color: #4F4C4C; display: block;}
.image-info { position: relative; margin: 20px auto 0 auto; width: 250px; }
.image-caption, .image-numbers { color: #6F6C6C; font-size: 90%;     text-align: center; overflow: hidden; }
.image-caption { 
    width: 90%; max-width: 400px; 
    margin: 0 auto;
    min-height: 2em;
}
.image-next, .image-prev {
    position: absolute;
    cursor: pointer;
    display: block;
    width: 22px; height: 17px;
    text-indent: -1000px;
    outline: none;
}
.image-next { top: 0px; right: -30px; background: url(../img/right.png);}
.image-prev { top: 0px; left: -30px; background: url(../img/left.png); }
.image-next:hover { background: url(../img/right_over.png); }
.image-prev:hover { background: url(../img/left_over.png); }

.page .images { margin-bottom: 50px; }
.page .image-frame { width: 260px; height: 180px;}
.page .image-info { width: 180px; }

.contact { font-size: 130%; }
.contact p { text-indent: 0 !important; }