* { padding: 0; margin: 0; }

body {
 font-family: "Lucida Sans", Verdana, Helvetica, sans-serif;
 font-size: 12px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #DAC8BF url(../img/header.jpg) center center no-repeat;
}
#navigation {
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
 background: #C6D29C;
 font-size: 11px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}

#navigation a {
color: black;
text-decoration: none;
}
#navigation a:hover {
color: green;
text-decoration: none;
}

#address {
 width: 900px;
 color: #fff;
 padding: 10px;
 border: 1px solid #000;
 margin: 0px 0px 5px 0px;
 background: #000;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}

.subnav {
color: #333;
border: 1px solid #ccc;
background: #C6D29C;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}

.subnav a {
color: black;
text-decoration: none;
}
.subnav a:hover {
color: green;
text-decoration: none;
}
#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
overflow: auto;
}
#content p {
padding: 5px;
} 

#content ul {
margin-left: 20px;
padding: 5px;
}
#content li {
list-style-type: disc;
}

.postDetail {
font-size: 70%;
font-style: italic;
border-bottom: 1px solid #ddd;
margin-bottom: 3px;
}
#footer { 
 width: 900px;
 color: white;
text-align: center;
 border: 1px solid #ccc;
 background: #000;
 margin: 0px 0px 10px 0px;
 padding: 10px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 10px;
}
#designTag {
text-align: center;
font-size: 9px;
 margin: 0px 0px 10px 0px;
}
fieldset { border:0;margin:0;padding:0; }
	label { display:block; }
	input.text,textarea { width:300px;font:12px/12px 'courier new',courier,monospace;color:#333;padding:3px;margin:1px 0;border:1px solid #ccc; }
	input.submit { padding:2px 5px;font:bold 12px/12px verdana,arial,sans-serif; }

.lColumn {
background: #F2F2E6;
margin: 5px;
padding: 5px;
width: 60%;
float:left;
}
.rColumn {
background: #F2F2E6;
margin: 5px;
padding: 5px;
width: 32%;
float:left;
}

div.comment {
background-color:#C6D29C;
border:solid 1px #bbb;
color:#000;
line-height:150%;
margin-bottom:0.2em;
margin-top:0.8em;
margin-left:auto;
margin-right:auto;
padding:.6em 1em;
font-size: 110%;
text-align:center;
width:95%;
-moz-border-radius:0.6em;
-webkit-border-radius:0.6em;
}

div.commentBl {
background-color:#000;
border:solid 1px #000;
color:#fff;
line-height:150%;
margin-bottom:0.2em;
margin-top:0.8em;
margin-left:auto;
margin-right:auto;
padding:.6em 1em;
font-size: 110%;
text-align:center;
width:95%;
-moz-border-radius:0.6em;
-webkit-border-radius:0.6em;
}

div.grey {
background-color:#eee;
border:solid 1px #bbb;
color:#000;
line-height:150%;
margin-bottom:0.2em;
margin-top:0.8em;
margin-left:auto;
margin-right:auto;
padding:.6em 1em;
font-size: 110%;
min-height: 250px;
width:95%;
-moz-border-radius:0.6em;
-webkit-border-radius:0.6em;
}

div.grey img {
border-top:solid 8px #fff;
border-left:solid 8px #fff;
border-right:solid 8px #fff;
border-bottom:solid 20px #fff;
margin: 8px;
}

div.grey h3 {
font-family: Georgia, serif;
font-size: 110%;
}

div.gallery {
width: 100px;
float: left;
clear: both;
}

div.gallery img {
border-top:solid 3px #fff;
border-left:solid 3px #fff;
border-right:solid 3px #fff;
border-bottom:solid 8px #fff;
margin: 4px;
}

div.commentBox {
background-color:#A3B5CF;
border:solid 1px #bbb;
color:#000;
line-height:150%;
margin-bottom:0.2em;
margin-top:0.8em;
margin-left:auto;
margin-right:auto;
padding:.6em 1em;
font-size: 110%;
text-align:center;
width:95%;
-moz-border-radius:0.6em;
-webkit-border-radius:0.6em;
}

.polaroid-container{
    position:relative; /* for being able to use absolute positioning for the 'tape' images, explained below */
    float:right; /* with a float we can a)embed the polaroid photo within text and have it wrap around and b) we don't need to specify a width/height */
    margin: 15px; /* we want to put some space between the polaroid photo and the surrounding content */
}
.polaroid-shadow{
    background-color: #CCCCCC; /* a light gray color, for the pretend shadow */
    text-align: center; /* aligns the text and image to the center */
}

.polaroid{
    background-color: #FDFDFD; /* a light gray background */
    border: 1px solid #999999; /* a thin border in darker gray */
    position: relative; /* this allows us to move the the polaroid div without removing it from the flow of the page i.e. we can offset it and show the 'shadow' from below */
    left: -3px; /* we move the polaroid to the left... */
    top: -3px; /* ...and up */
}

.polaroid-content-container{
    margin: 15px 15px 20px 15px; / * a little extra margin at the bottom */
}

.polaroid-pic{
    display: block; /* this prevents the caption from sliding in next to the image,
                     since both are inline elements by default */
    border: 1px solid #CCCCCC; /* give the image a thin, slightly gray border */
    border-top: 1px solid #999999; /* then we override the border for the top and right... */
    border-right: 1px solid #999999; /* ...for a very subtle film-embedded-in-the-paper effect */
    margin-bottom: 5px; /* we need some gap betwen the image and caption, which also serves to increase the bottom portion of the polaroid, adding to the effect */
}

.polaroid-caption{
    color: #777777; /* dark gray for the caption text... */
    font-size: 0.75em; /* ...which will be 75% of the enclosing container's font... */
    font-style: italic; /* ...and will be italicised */
}

div.announce {
background-color:#eee;
border:solid 1px #bbb;
color:#000;
/* line-height:130%; */
margin-bottom:0.2em;
margin-top:0.8em;
margin-left:auto;
margin-right:auto;
padding:.6em .5em;
font-size: 150%;
min-height: 250px;
width:95%;
-moz-border-radius:0.6em;
-webkit-border-radius:0.6em;
}

.grey table {
width: 98%;
margin-top: 8px;
border-collapse: collapse;
border: 1px solid #212121;

}
.grey th {
background-color: #212121;
color: white;
padding: 3px;
}

.grey td {
padding: 3px;
border: 1px solid #212121;
}

#gallery {
width: auto;
}
#gallery a {
display: inline;
}