/*

This is the main CSS file, it is used for the interface elements/widgets on the
 page. I have divided my style sheets in half, one half is the main CSS file,
  the other half is for the blog portion, it helps me keep track of what 
  exactly is being used for the blog and what is being used for the eye-candy
   and interface stuff.

By James Magahern
Nice 'n' clean CSS!

*/
html {
    background: url(images/bbg.jpg) repeat;
}

body {
    background: url(images/topbbg.jpg) repeat-x;
	padding: 0px;
	margin: 0px;
	color: #FFFFFF;
	font: 10px Arial, Helvetica, sans-serif;
}
hr {
	display:none;
}

h9 {
	font-size: 16px;
	font-family: "Lucida Grande", Arial, sans;
	text-shadow: #0054E4 3px 3px 4px;
	font-weight: bold;
}

#toppage{
	background: url(images/topbbg.jpg) repeat-x;
	height: 421px;
}
#header {
	background: url(images/buzzhead.jpg) no-repeat;
	height: 189px;
	width: 540px;
}
#header ul {
	font: 12px Arial, Helvetica, sans-serif;
	text-transform: lowercase;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#header li {
	display: inline;
	padding-right: 5px;
	padding-left: 5px;
}
#header a {
	color: #FFFFFF;
	text-decoration: none;
	position:relative;
	top:110px;
	left:157px;
	padding:3px;
}
#header a:hover {
	background:#fff;
	color:#000;

}

#checkout {
	position:absolute;
	top:0;
	left:775px;
}

#checkout a {
	display:block;
	background:url(images/v30.jpg) no-repeat;
	width:116px;
	height:96px;
}

#features {
	background: url(images/header.gif) no-repeat;
	margin-left:45px;
	width:910px;
	margin-bottom: 0px;
	height: 88px;
}

#features img {
	padding-left:2px;
	padding-right:2px;
}

#features h2 {
	display: none;
}
#features a {
	float: center;
}


#container-content {
  margin-left: 35px;
  padding-left: 45px;
  margin-bottom: 0px;
  width: 810px;
  background: url(images/right.png) top left repeat-y;
  position: relative;
  z-index: 50;
}

#content-main {
  margin-top: -30px;
  width: 500px;
  float: left;
  position: relative;
}

#content-right {
  width: 200px;
  float: right;
  padding-top: 0px;
  padding-right: 50px;
}

#content-right div {
  float: left;
}

#righttop {
  height: 30px;
  margin-left: 35px;
  width: 840px;
  background: url(images/righttop.png) top left repeat-y;
}

#bottom {
  height: 30px;
  margin-left: 35px;
  width: 840px;
  background: url(images/rightbottom.png) top left repeat-y;
}

#bottom ul {
	font-size: 10px;
	font-family: "Lucida Grande", Arial, sans;
	padding-top: 0px;
	margin: 0;
	text-align: left;
	color: #7A7A7A;
}

#bobottom {
	width: 800px;
	margin-left: 45px;
	padding-top: 40px;
	padding-left: 30px;
	margin-right: 30px;
	clear: both;
	height: 100px;
	padding-bottom:0px !important;
}

#footer {
	background: url(images/foot.png) no-repeat;
	width: 800px;
	margin-left: 55px;
	padding-top: 40px;
	padding-left: 30px;
	height: 100px;
	padding-bottom:0px !important; padding-bottom:50px;
}

#new {
    border: 1px solid #555555;
    width: 320px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 25px;
    text-align: left;
}

/* The '#' signs are to mess up Safari so it won't understand it. In order
   achieve the text shadow on both Macs and PCs, I had to make a CSS for
   Mac (Safari) and one for Windows (Firefox/CrappyIE). Firefox ignores
   text-shadow (in h9 way above), and reads the code below to make a 
   pseudo-shadow. Safari renders this as well, and it looks aweful.
   Luckily, a bug in Safari will tell it to ignore things with a '#' in it.
   
   Safari, forgive me!
*/

h1 {
	font-size: 16px;#
	font-family: "Lucida Grande", Arial, sans;
}

.shadow  { position:relative; display:block; color:#fff; margin-left: 200px;#}
.shadow span { position:absolute; display:block; top:0px;#}
.shadow:before { 
    display:block; 
    padding-left:1px; 
    padding-top:1px; 
    content: attr(title); 
    font-size: 16px;
	font-family: "Lucida Grande", Arial, sans;
    color:#003694; 
    font-weight: bold;#
}