@import url("shadowbox/shadowbox.css");

body {
margin: 0;
padding: 0;
text-align: center;
font: 100% helvetica, arial, sans-serif;
background: #2a2a2a;
text-shadow: 0 0 5px #000;
}

img {
border: 0;
}

#flickrbox {
margin: 0 auto;
width: 100%;
overflow: hidden;
background: #1a1a1a;
display: none;
text-align: right;
}

#flickrwrapper {
margin: 0 auto;
padding: 3.125em 0; /* 50/16 */
width: 59.375em; /* 950/16 */
overflow: hidden;
text-align: center;
}

#flickrwrapper a img {
border: 0.3125em solid #2a2a2a; /* 5/16 */
margin: 0.125em; /* 2/16 */
}

#flickrwrapper a:hover img {
border-color: #f000a0;
}

#header {
margin: 0 auto;
width: 62.5em; /* 1000/16 */
height: 7em; /* 112/16 */
clear: both;
}

#chirhologo {
width: 22.8%; /* (228/1000)100 */
background: transparent url(../img/chirhologo.png) no-repeat;
font-size: 0.01em;
height: 100%;
float: left;
}

#twitter {
width: 54.4%; /* (544/1000)100 */
float: left;
line-height: 7em; /* 112/16 */
background: url(../img/twitter.png) center no-repeat;
height: 100%;
font-size: 1em;
text-align: center;
color: #fff;
}

#twitter a {
display: block;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
}

.quotes {
font: 2.5em georgia, sans-serif;
position: relative;
top: 0.25em;
margin: 0 0.2em;
}

#flickrlogo {
width: 22.8%; /* (228/1000)100 */
background: url(../img/flickrlogo.png) no-repeat;
font-size: 0.01em;
height: 100%;
float: right;
}

#chirhologo a {
color: #2a2a2a;
text-decoration: none;
width: 100%;
height: 100%;
display: block;
}

#flickrlogo a {
color: #2a2a2a;
text-decoration: none;
width: 100%;
height: 100%;
display: block;
}

.blackbox {
margin: 0 auto;
width: 100%;
overflow: hidden;
background: #1a1a1a url(../img/bevel2.png) bottom repeat-x;
clear: both;
}

.blackbox2 {
margin: 0 auto;
width: 100%;
overflow: hidden;
background: transparent url(../img/bevel.png) top repeat-x;
clear: both;
}

.title {
margin: 0 auto;
width: 950px; 
padding: 10px 25px;
font-size: 1.5em;
overflow: hidden;
clear: both;
color: #fff;
text-align: left;
}

#inprogress {
position: relative;
left: 50px;
}

.thumbs {
margin: 0 auto;
width: 1000px;
overflow: hidden;
clear: both;
}

.thumb {
width: 250px;
height: 150px;
float: left;
display: block;
}

.thumb a {
width: 250px;
height: 150px;
position: relative;
display: block;
color: #fff;
text-decoration: none;
}

.thumb a span {
display: none;
}

.thumb a:hover span {
display: block;
position: absolute;
bottom: 25px;
left: 25px;
padding: 10px;
width: 180px;
overflow: hidden;
max-height: 80px;
background: #000;
font-size: 1em;
opacity: 0.8;
}

.thumb img {
position: relative;
top: 25px;
-moz-box-shadow: 0 0 30px #000;
-webkit-box-shadow: 0 0 30px #000;
-o-box-shadow: 0 0 30px #000;
box-shadow: 0 0 30px #000;
border: 0;
}

.thumb img:hover {
-moz-box-shadow: 0 0 30px #f000a0;
-webkit-box-shadow: 0 0 30px #f000a0;
-o-box-shadow: 0 0 30px #f000a0;
box-shadow: 0 0 30px #f000a0;
}

#infowrap {
margin: 0 auto;
padding: 0 25px;
width: 950px;
overflow: hidden;
clear: both;
}

#info {
padding: 20px 0;
width: 450px;
float: left;
font-size: 1.5em;
overflow: hidden;
color: #fff;
text-align: left;
clear: both;
}

#info a {
color: #f000a0;
text-decoration: none;
}

#info a:hover {
color: #fff;
}

#response {
display: none;
width: 100%;
overflow: hidden;
margin: 0 0 5px 0;
padding: 10px;
background: #f000a0;
color: #000;
text-align: center;
}

#emailform {
position: relative;
top: 50px;
width: 450px;
float: right;
overflow: hidden;
text-align: center;
}

fieldset {
margin: 0;
padding: 0;
border: 0;
}

.emailinput {
width: 47%;
padding: 5px;
float: left;
border: 0;
background: #2a2a2a;
font: 1.5em helvetica, arial;
color: #fff;
}

#mail {
float: right;
}

textarea {
margin: 5px 0 0 0;
padding: 5px;
width: 100%;
border: 0;
background: #2a2a2a;
font: 1.5em helvetica, arial;
color: #fff;
overflow: auto;
}

#sendmail {
width: 100%;
margin: 5px 0 0 0;
padding: 5px;
border: 0;
background: #f000a0;
font: 1.5em helvetica, arial;
color: #000;
}

#footer {
margin: 0 auto;
padding: 10px 0;
width: 950px;
font-size: 1.5em;
overflow: hidden;
color: #fff;
clear: both;
}

#footer a {
color: #fff;
text-decoration: none;
}

#footer a:hover {
color: #f000a0;
}

#footerl {
width: 49%;
overflow: hidden;
float: left;
text-align: left;
}

#footerr {
width: 49%;
overflow: hidden;
float: right;
text-align: right;
}