/* 
   Defines the site layout. Tuned to work in all major browsers.
   
   Based on: "The Man in Blue" - http://www.themaninblue.com/experiment/footerStickAlt/
   Define "#" (id="..."): if only 1 element per page possible!
*/

html { 
	min-width: 800px;
  overflow: -moz-scrollbars-vertical;  /* hide horizontal scrollbar. */
  overflow-x: hidden;                  /* hide horizontal scrollbar. */
  overflow-y: auto;
}

body { 
  min-width: 800px;
  background: #202020 url(bg-scene.jpg) no-repeat top center; 
}

#container {
  width: 100%;
  background-image: url(bg-content.png); background-repeat: repeat-y; background-position: center top;
}

#header {
  text-align: left;
  width: 100%;  /* don't touch. */
  height: 343px;  /* header image height. */
}
#headerArea {
	position: relative;
	margin: 0 auto; 
	width: 800px;
}
#headerAreaBack {
	position: absolute;
	top: 0;
	left: -95px;
	width: 1018px;  /* header image width. */
	height: 343px;  /* header image height. */
  background-image: url(bg-header.png); background-repeat: no-repeat; background-position: left top;
}

#content {
  text-align: left;
  padding-bottom: 112px;  /* footer image height. NOTE: last part of content will not be usable because of this, but works in FF. */
  width: 100%;
}
#contentArea {
	position: relative;
  top: -96px;
  margin: 0 auto; 
  width: 800px;
}
#contentAreaMenu {
  float: left;
  width: 170px;
}
#contentAreaMain {
  float: left;
  margin-left: 10px;
	width: 615px;
}
#contentAreaDown {
	clear: both;
}

#footer {
  text-align: left;
  position: relative;
  width: 100%;
  height: 112px;  /* footer image height. */
  margin: -112px auto 0 auto;  /* footer image height (minus!). */
}
#footerArea {
  position: relative;
	margin: 0 auto; 
	width: 800px;
}
#footerAreaBack {
  position: absolute;
  top: 0;
  left: -64px;
  width: 926px;   /* footer image width. */
  height: 112px;  /* footer image height. */
  background-image: url(bg-footer.png); background-repeat: no-repeat; background-position: left bottom;
}
* html #footer {  /* A CSS hack that only applies to IE -- specifies a different offset for the footer */
  margin-top: -112px;  /* footer image height (minus!). */
}


/* 
   Common CSS parameters for site. Modify as needed.
   
   Define "." (class="..."): if more than 1 element per page possible!
   
   Safe Font Combinations (Win, Mac, Linux):
   
   + Sans-Serif:
     - font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, Helvetica, sans-serif;
	   - font-family: Arial, Helvetica, sans-serif;
	   - font-family: 'Arial Black', Gadget, sans-serif;
	   - font-family: Impact, Charcoal, sans-serif;
     - font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
     - font-family: Verdana, Geneva, sans-serif;
     - font-family: Tahoma, Geneva, sans-serif;
	 + Serif:
     - font-family: 'Times New Roman', Times, serif;
     - font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
     - font-family: 'Bookman Old Style', serif;
		 - font-family: Garamond, serif;
		 - font-family: Georgia, serif;
   + Monospaced:
	   - font-family: Courier, monospace;
	   - font-family: 'Courier New', Courier, monospace;
	   - font-family: 'Lucida Console', Monaco, monospace;
*/

body {
  color: #b0b0b0; 
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, Helvetica, sans-serif;
  font-size: 16px; 
}

#footer {
	font-size: 14px;
	color: #808080; 
}
#footer a, #footer a:visited, #footer a:hover {
  color: #909090; 
  font-weight: bold;
}
	
strong, b { 
	color: #c0c0c0;
	font-weight: bold;
}
i {
	font-style: italic;
}

a { color: #00aeef; }
a:visited { color: #0098f2; }
a:hover { color: #ff5400; }
a.neutralLink, a.neutralLink:visited { color: #c0c0c0; }
a.neutralLink:hover { color: #e0e0e0; }

p { 
  margin-bottom: 9px;
  line-height: 110%;
}
code { 
  border: 1px dotted #999999; 
  background-color: #eeeeee; 
  font-family: 'Lucida Console', Monaco, monospace;
  font-size: 11px; 
  display: block; 
}
small {
	font-size: 13px;
}
small a, small a:visited, small a:hover {
	color: #c0c0c0; 
}
	
h1 { 
	color: #f14f00; 
  margin-top: 20px;
	margin-bottom: 6px; 
	font-weight: 900;
	font-size: 24px; 
  text-shadow: 0px -1px 1px #000000;
  letter-spacing: 1px; 
}
h2 { 
	color: #c0c0c0;
  margin-top: 18px;
	margin-bottom: 5px; 
  font-weight: 900;
  font-size: 17px; 
  text-shadow: 0px -1px 1px #000000;
letter-spacing: 1px; 
}

ol { 
	list-style-type: decimal; 
	padding-left: 30px; 
}
ul { 
	list-style-type: circle; 
	padding-left: 30px;  
	line-height: 18px;
}

hr, .hr {
	margin-bottom: 8px;
	height: 4px;
  background-image: url(element-hr.png); background-repeat: repeat-x; background-position: left top;
}

.sidePanel {
  float: right; 
  width: 200px; 
  padding-left: 5px; 
  margin-left: 5px;
  margin-top: 10px; 
  margin-bottom: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  border-left: 2px solid #c0c0c0;
  border-bottom: 2px solid #c0c0c0;
}

.thumbnail {
  padding: 2px;
  margin-right: 7px;
  margin-bottom: 7px;
  border: 1px solid #404040;
  background-color: #000000;	
}

.panel, .feature, .testimonial {  
  /* Generator: http://border-image.com/ */
  border-style: solid;
  border-width: 14px 17px 17px;
  -moz-border-image: url(panel.png) 14 17 17 repeat;
  -webkit-border-image: url(panel.png) 14 17 17 repeat;
  -o-border-image: url(panel.png) 14 17 17 repeat;
  border-image: url(panel.png) 14 17 17 fill repeat;
}

.feature {
  display: inline-block;  /* Note: content is like "block" but the .testimonial behaves like "inline". */
  margin: 4px;
  width: 255px;
  font-size: 16px; 
}
.feature .head {
  height: 20px;
  text-align: center; 
  margin-bottom: 8px;
  color: #e0e0e0;
  font-weight: bold 
}
.feature .body {
  height: 60px;
}

.testimonial {
	display: inline-block;  /* Note: content is like "block" but the .testimonial behaves like "inline". */
  margin: 4px;
	width: 255px;
  font-size: 16px; 
}
.testimonial .saying {
  height: 85px;
}
.testimonial .author {
  height: 20px;
  text-align: right; 
  color: #e0e0e0;
  font-weight: bold	
}
.testimonial .author .neutralLink {
  color: #e0e0e0;
}
	
.tableListingOrange, tableListingBlue, tableListingGray {
	border-collapse: collapse;
}
.tableListingOrange td, .tableListingOrange th, .tableListingBlue td, .tableListingBlue th, .tableListingGray td, .tableListingGray th {
  border: 1px solid #000000;
  padding: 3px 7px 3px 7px;
  line-height: 18px;
}
.tableListingOrange th, .tableListingBlue th, .tableListingGray th {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  padding: 5px 5px 5px 5px;
  color: #ffffff;
}
.tableListingOrange td, .tableListingOrange th {
	border-color: #f14f00;
}
.tableListingOrange th {
	background-color: #ff8042;
}
.tableListingOrange tr.alt td {
	background-color: #523c31;
}
.tableListingBlue td, .tableListingBlue th {
  border-color: #0179c9;
}
.tableListingBlue th {
  background-color: #2ab2ff;
}
.tableListingBlue tr.alt td {
  background-color: #404548;
}
.tableListingGray td, .tableListingGray th {
  border-color: #707070;
}
.tableListingGray th {
  background-color: #606060;
}
.tableListingGray tr.alt td {
  background-color: #404040;
}

/*
   Form input elements.
*/

form { 
	display: inline;
}
input { 
	margin: 3px; 
	padding: 2px; 
	font-size: 12px; 
	border: 1px solid #a0a0a0; 
	background-color: #f0f0f0; 
}
input[type=image] { 
	border: 0px; 
	background-color: #ffffff; 
}
select { 
	margin: 3px;
  padding: 2px; 
  font-size: 12px; 
  border: 1px solid #a0a0a0; 
  background-color: #e0e0e0; 
}
button { 
	margin-left: 2px; 
}
textarea { 
	display: block; 
	margin: 3px; 
	padding: 2px; 
	font-size: 12px; 
	border: 1px solid #a0a0a0; 
	background-color: #f0f0f0; 
	font-family: Arial; 
}
.checkbox, .radio { 
	border: 0px; 
	background: transparent; 
	margin-top: 1px; 
}
.required { 
	color: #e00000; 
}


/*
   Button rollover effects.

   Based on: http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
*/

.buttonMenu {
  margin: 0px;
  width: 168px;
  height: 68px;
  background: url("button-menu.png");
  background-repeat: no-repeat;
}
.buttonMenu div {
  padding-left: 22px;
  padding-right: 16px;
  padding-top: 12px;
}
.buttonMenuBarTop {
  margin: 0px;
  width: 168px;
  height: 16px;
  background: url("button-menu-bar-top.png");
  background-repeat: no-repeat;
}
.buttonMenuBarEnd {
  margin: 0px;
  width: 168px;
  height: 14px;
  background: url("button-menu-bar-end.png");
  background-repeat: no-repeat;
}

.buttonBack {
	margin: 0px;
	width: 168px;
	height: 67px;
	background: url("button-back.png");
	background-repeat: no-repeat;
}
.buttonBack div {
  padding-left: 18px;
  padding-right: 25px;
  padding-top: 12px;
}

a.buttonColBlue, a.buttonColGreen, a.buttonColYellow, a.buttonColOrange, a.buttonColGray {
  display: block;
  width: 125px;
  height: 36px;
  color: #282828;
  text-align: center;
  text-decoration: none;
  font-family: "Arial Black", "Arial Bold", Arial, Gadget, sans-serif; 
  font-weight: 900;
  text-shadow: 0px 1px 0px #f0f0f0;
  font-size: 16px;
}
a.buttonColBlue:hover, a.buttonColGreen:hover, a.buttonColYellow:hover, a.buttonColOrange:hover, a.buttonColGray:hover {
	color: #505050;
  text-shadow: 0px 0px 6px #ffffff;
	background-position: 0 -36px;
}
a.buttonColBlue div, a.buttonColGreen div, a.buttonColYellow div, a.buttonColOrange div, a.buttonColGray div {
  font-family: "Arial Black", "Arial Bold", Gadget, sans-serif; 
  padding: 0px;
	padding-top: 10px;	
}
.buttonColBlue {
  background: url("button-col-blue.png");
}
.buttonColGreen {
  background: url("button-col-green.png");
}
.buttonColYellow {
  background: url("button-col-yellow.png");
}
.buttonColOrange {
  background: url("button-col-orange.png");
}
.buttonColGray {
  background: url("button-col-gray.png");
}

a.buttonInfFeed, a.buttonInfTwitter, a.buttonInfFacebook, a.buttonInfGoogle, a.buttonInfReddit, a.buttonInfEmail {
  display: block;
  width: 48px;
  height: 48px;
}
a.buttonInfFeed:hover, a.buttonInfTwitter:hover, a.buttonInfFacebook:hover, a.buttonInfGoogle:hover, a.buttonInfReddit:hover, a.buttonInfEmail:hover {
  background-position: 0 -48px;
}
.buttonInfFeed {
  background: url("socialize/feed.png");
}
.buttonInfTwitter {
  background: url("socialize/twitter.png");
}
.buttonInfFacebook {
  background: url("socialize/facebook.png");
}
.buttonInfGoogle {
  background: url("socialize/google.png");
}
.buttonInfReddit {
  background: url("socialize/reddit.png");
}
.buttonInfEmail {
  background: url("socialize/email.png");
}