/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.03.19
   PURPOSE: Controls the layout of the site and styles
            the menus
 **************************************************************/



/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/

#content {  
  height: 100%;
  min-height: 100%;
  text-align: left;
}

#content,
#width {  
  max-width: 1000px;
  margin: 0 auto;
}

#content[id],
#width[id] {
  width: 94%;
  height: auto;
}


/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/

#header {
  position: relative;
  height: 193px;
}

/* Holds the site title and subtitle */
#header #title {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 130px;
  padding: 5px;
  text-align: right;
}

#header h1 {
  margin: 0;
  padding: 0;
  font: 700 4em "trebuchet ms", serif;
  letter-spacing: -3px;
  text-transform: lowercase;
  color: #FFF;
}

#header h2 {
  position: absolute;
  top: 10px;
  right: 5px;
  margin: 0;
  padding: 0;
  font: 700 1em "trebuchet ms", serif;
  text-transform: lowercase;
  color: #00F0EC;
}


/* Sets where the header images will go */
#header img.left {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

#header img.right {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
}

#header img.balloons {
  position: absolute;
  z-index: 2;
  top: 70px;
  right: 400px;
}


/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/

#mainMenu { 
  float: left;
  width: 100%;
  clear: both;  
}

#mainMenu ul {
  margin: 0;
  padding: 0;
}

#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;
  font: 400 1.6em "trebuchet ms", serif;
  text-decoration: none;
  text-transform: lowercase;
  color: #FFF;
}

#mainMenu li a:hover,
#mainMenu li a.here {
  color: #65EBFF;
  border-top: 5px solid #000;
}

#mainMenu li a.last {
  margin-right: 0;
}


/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(/css/foo.html);
  font: 400 1.3em "trebuchet ms", serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  text-decoration: none;
  color: #FFF;
} 

.sideMenu li a:hover {
  color: #65EBFF;
  background: #5F5F5F;
}

/* Active menu item */
.sideMenu li.here {
  display: block;  
  padding: 5px;
  color: #65EBFF;
  background: #555;
}

/* Submenu of active menu item */
.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 35px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #FFF;  
  background: url(/img/bullet.gif) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
  color: #9FF3FF;
  background: #5F5F5F url(/img/bullet.gif) no-repeat 10px 0px;
}


/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

#page {
  float: left;
  width: 100%;
  clear: both;
  padding-bottom: 4em;
}


/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/

#footer {
  float: left;
  width: 100%;
  clear: both;
  margin-top: -3.8em;
  background: #000 url(/img/footer.jpg) repeat-x top left;
}

/* Sets the width of the footer content */
#footer #width {
  position: relative;
  z-index: 3;
  font-size: 0.85em;
  padding-top: 27px;
}
#footer .floatLeft {
  margin-left: 5px;
}
#footer .floatRight {
  margin-right: 5px;
}


/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width67 {
  width: 60%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}



/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}



/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.small {
  font-size: 0.8em;
}

.green {
  color: #A1FF45;
}
.green a, .green a:visited {
  color: #A1FF45;
  text-decoration: underline;
}
.green a:hover {
  color: #FFF;
}

.red {
  color: #EA1B00;
}

.grey {
  color: #666;
}

.grey a {
  color: #999;
}

.grey a:hover {
  color: #EEE;
}

.gradient {
  clear: both;
  margin-bottom: 2em;
  background: #555 url(/img/gradient.jpg) repeat-x bottom left;
}

.center {
  display: block;
  margin: 0 auto;
}

.centerText {
  text-align: center;
}

.comic img {
  border: 2px solid #000;
}

.comments {
  margin-bottom: 40px;
}
.comment {
  clear: both;
  width: 95%;
  min-height: 70px;
  margin: 10px 15px;
  padding: 0;
}
.commentAvatar {
  width: 50px;
  height: 100%;
  margin: 7px 15px;
  vertical-align: middle;
  float: left;
}
.commentAvatar img {
  vertical-align: middle;
  padding: 0;
  border: none;
}
.commentBox {
  width: 85%;
  margin-bottom: 15px;
  float: left;
  background-color: #444;
}
.commentContent {
  padding: 5px 13px 0 13px;
}
.commentContent p {
  margin: 0 0 5px 0;
  padding: 0;
}
.commentContent p:last-child {
  margin: 0;
}
.commentAuthor {
  color: #666;
  font-size: 0.8em;
  margin-left: 13px;
}

.commentBubble {
  position: relative;
  bottom: 0.3em;
}
a.commentBubble {
  color: #777;
  text-decoration: none;
  font-size: 0.6em;
}
.commentBubble em {
  font-style: normal;
}
.commentBubble em {
  background: #777;
  color: #FFF;
  padding: 0 0.4em;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
  position: relative;
}
.commentBubble .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 1.1em;
  left: 0.4em;
  display: block;
  border-left: 0.45em solid #777; 
  border-bottom: 0.45em solid #FFF; /* IE fix */
  border-bottom: 0.45em solid rgba(0,0,0,0); 
  overflow: hidden; /* IE fix */
}
a.commentBubble:hover {
  color: #777;
  text-decoration: none;
}
a.commentBubble:hover em {
  cursor: pointer;
  background: #FFF;
  color: #777;
}
a.commentBubble:hover .point {
  border-left: 0.5em solid #FFF; 
}

#security_code {
  width:75px;
  height:25px;
  margin:4px 10px 0 10px;
  padding:2px;
  font-size:150%;
}


/* Ajax Search Popup */
#livesearch a, #livesearch a:visited {
/*	color: #59770e;*/
	text-decoration: underline;
}
#livesearch a:hover {
/*	color: #cc6600;*/
	text-decoration: underline;
}
#livesearch {
	display: none;
	position: absolute;
	left: 350px;
	top: 125px;
	border: solid #a5acb2 1px;
	padding: 7px;
	background: #777;
	text-align: justify;
	font-size: 11px;
	line-height: 13px;
	width: 275px;
	z-index: 2;
}
#livesearch div div {
	font-size: .95em;
	font-style: italic;
/*	color: grey;*/
	margin-left: 20px;
	padding-bottom: 10px;
}
#livesearch div span{
	color: #F8D766;
}
#search {
	margin: 8px 0 0 50px;
	width:170px;
	text-align: center;
	font-size: 14px;
}
#searchbox {/*
	margin: -20px 0px 0px 705px;
	position: absolute;
*/}
#searchbox input {
/*	background:#f1fedb;
	border:1px solid #bdd77f;*/
}


/* Search Results */
.search-results {
	margin: 0;
	padding: 5px;
}
.search-results div {
	margin: 10px;
}
.search-results a, .search-results a:visited, .search-results a:hover {
/*	color: #cc6600;*/
	font-size: 16px;
}
.search-results div div {
	margin: 0;
	margin-left: 20px;
	padding: 5px;
}
.search-results div div img {
	max-width: 400px;
}
.search-results div div span {
/*	background: #e6eed0;*/
}
.search-prev a, .search-next a {
	color: #5c8d0c;
}
.search-prev {
	float:left;
}
.search-next {
	float:right;
}
.search-zero {
	text-align: center;
	font-size: 18px;
}

#loginForm {
	height:75px;
	clear:both;
}
#loginForm input[type=text]{
	width:120px;
	text-align:center;
}
#loginForm input[type=password]{
	width:120px;
	text-align:center;
}
#loginUser {
	margin-right: 15px;
}
#loginForm input[type=submit] {

}
#loginCancel {
	margin-right:15px;
	cursor:pointer;
}