/*###############################################################
# layout.css                                                    #
#                                                               #
# (c) Copyright 2008 Paul Oliver                                #
#     ccp7@paultastic.com                                       #
# CSS Styles related to layout for my site.                     #
###############################################################*/

body {
	background-position: top;
	margin:0pt;
	padding:0pt;
	text-align: center;
}

/* header images */
#pngHeader { float: left; }
#pngGrape { float: right; }

/* wrapper: so we can center the div in ie */
#w {
	width: 1000px; 
	margin: 0 auto; 
	text-align: left;
}

/* left column */
#lc {
	float: left;
	width: 695px;
}
/* left column internal */
#lci {
	margin: 20px 10px;
}

/* right column */
#rc {
	float: right;
	width: 290px;
}

#rcm a, #rcb a.default {
	width: 276px;
    display:block;
}

#rcb a:link {
}

/* right column internal div */
#rci {
	margin: 5px;
}

/* footer internal div, where the content goes */
#fi {
	margin: 0px 10px;
	text-align: center;
}

/* emphasis box */
.eb {
    padding: 5px;
    border: dotted #fcc;
    margin: 5px;
    text-align: center;
}

/* radar images */
#rdr_small { z-index: 5; }

#rdr_big { z-index: 5; }

/* comment box */
.ctl {
    width: 18px;
    height: 45px;
    background: #fff;
	background-image: url(/images/cb_topleft.gif);
	background-repeat: no-repeat;
	color:#333333;
}

.ctr {
    width: 18px;
    height: 45px;
    background: #fff;
	background-image: url(/images/cb_topright.gif);
	background-repeat: no-repeat;
	color:#333333;
}

.ctm1 {
    width: 510px;
    height: 45px;
    background: #fff;
	background-image: url(/images/cb_middle.gif);
	background-repeat: repeat-x;
    text-align: left;
    vertical-align: middle;
	color:#333333;
}

.ctm2 {
    width: 128px;
    height: 45px;
    background: #fff;
	background-image: url(/images/cb_middle.gif);
	background-repeat: repeat-x;
    text-align: right;
    vertical-align: middle;
	color:#333333;
    font-size: large;
}

.ctm2 span.neg {
    color:#600;
}

.ctm2 span.pos {
    color:#060;
}

.ctb {
    width: 675px;
    background: #fff;
    background-image: url(/images/cb_body.gif);
	background-repeat: repeat-x;
    padding: 10px;
}


/* comment dashboard */
div#commentdash {
    font-size:medium;
    font-weight:bold;
    height:20px;
    margin:0 0 0;
    padding:0 0;
    position:relative;
    width:125px;
}
div#commentdash ul {
    height:20px;
    left:2px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0 0 0 0;
    padding:0;
    position:relative;
    top:1px;
}

div#commentdash ul li {
    border:medium none;
    float: left;
    margin:0;
    padding:0;
}

div#commentdash ul li a {
    display:block;
    height:20px;
    overflow:hidden;
    padding:0;
    text-decoration:none;
    text-indent:99999px;
    width:20px;
    z-index:20;
}

div#commentdash ul li a:hover {
    left:0;
    z-index:1;
}

div#commentdash ul li a.vote_yes {
    background-image: url(/images/vote_yess.png);
    background-position: 0 -20px;
    width:20px;
}

div#commentdash ul li a.vote_yes:hover {
    background-image: url(/images/vote_yess.png);
    background-position: 0 0;
    width:20px;
}

div#commentdash ul li a.vote_delete {
    background-image: url(/images/vote_deletes.png);
    background-position: 0 -20px;
    width:20px;
}

div#commentdash ul li a.vote_delete:hover {
    background-image: url(/images/vote_deletes.png);
    background-position: 0 0;
    width:20px;
}

div#commentdash ul li a.vote_no {
    background-image: url(/images/vote_nos.png);
    background-position: 0 -20px;
    width:20px;
}

div#commentdash ul li a.vote_no:hover {
    background-image: url(/images/vote_nos.png);
    background-position: 0 0;
    width:20px;
}

div#commentdash ul li a.vote_approve {
    background-image: url(/images/vote_approves.png);
    background-position: 0 -20px;
    width:20px;
}

div#commentdash ul li a.vote_approve:hover {
    background-image: url(/images/vote_approves.png);
    background-position: 0 0;
    width:20px;
}

input.comment:active, input.comment:focus {
    background:#ffe none repeat scroll 0 0;
    border:1px solid #ccc;
}

input.comment {
    color:#555555;
    font-family:"lucida grande",tahoma,arial,sans-serif;
    font-size:18px;
    padding:5px;
}

textarea.comment:active, textarea.comment:focus {
    background:#ffe none repeat scroll 0 0;
    border:1px solid #ccc;
}

textarea.comment {
    color:#555555;
    font-family:"lucida grande",tahoma,arial,sans-serif;
    font-size:18px;
    height:100px;
    padding:5px;
}


/* short column.  :KLUDGE: workaround when your main content box (left column) is
   shorter than the menu column (right column).  Just do this in the HTML at the
   top of the page:
   
   <img src="images/clear.gif" class="sc"/>
   <h1>A Header</h1>
   <p>Here is some text in my main content column</p>
   
   NOTE: Make your height equal to the longest the right column
   would ever reasonably be.*/
.sc {
	height: 875px;
	width: 1px;
	border: none;
	float: left;
}

/* trick to get firefox to close the div around the floated divs, ie ignores it because of the stuff below */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */