/* All site coding and design done by Tim Erickson of Neutyp.com
/
/ Universal Site Styling
*/

html, body {
	height: 100%;
	width: 100%;
}

body {
	background: #111 url(/public/images/bg.gif) repeat;
	font: 10pt Helvetica, Arial, sans-serif;
	min-height: 878px;
	color: #000;
	line-height: 16pt;
}

h1, h2, h3 {
	text-transform: uppercase;
	padding: 15px 0 5px 0;
}
h1 {
	font-size: 130%;
}
h2 {
	font-size: 115%;
}
h3 {
	font-size: 105%;
}

a {
	text-decoration: underline;
	color: #333;
}
a:hover, a:visited {
	color: inherit;
}
a img {
	border: 0px;
}

ul {
	padding-left: 20px;
	list-style: circle;
}

blockquote {
  padding-left: 10px;
  border-left: 3px #eee solid;
}

table {
  border: 0;
}
table td {
	padding: 3px 0;
}

.hidden {
  display: none;
}

/* 
/ Site Structure and Containing Divs 
*/

#hugeglow {
	background: url(/public/images/hugebg.png) no-repeat;
	background-position: top center;
	width: 100%;
	height: 894px;
	margin: 0 auto;
}
/* hugeglow must be the very first wrapped div */

#container {
	width: 946px; /* internal layout is 940px, border is 3px on each side */
	margin: 0 auto;
}

/* 
/ Header 
*/

div#warning {
	position: fixed;
	padding: 10px;
	background-color: #FFEDB7;
	z-index: 199;
	text-align: center;
	top: 0px;
	left: 0px;
	width: 100%;
}
/* Used for IE6 Warning, etc */

#head {
	height: 100px;
	width: 946px;
}
div#logo {
  height: 49px;
  width: 415px;
  background-image: url(/public/images/spicelogo.png);
	margin: 54px 0 0 23px;
	float: left;
}
#menu {
	margin: 75px 5px 0 0;
	float: right;
}
#menu a {
	color: #fff;
	font-size: 100%;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: #000 0px 1px 2px;
	text-decoration: none;
}
#menu a:hover {
	text-decoration: underline;
}
#menu ul {
	list-style: none;
}
#menu ul li {
	background: url(/public/images/arrow.gif) no-repeat;
	background-position: 0 50%;
	padding: 0 20px 0 18px;
	display: inline;
}

/* 
/ Sub Header 
*/

#subhead {
	background: url(/public/images/subhead.png) no-repeat;
	margin: 20px 1px;
	padding: 20px;
	width: 904px; /* -40 from padding */
	height: 31px; /* -40 from padding */
	float: left;
}

img.subheaditem {
	margin-right: 20px;
	float: left;
}


/* 
/ Content Box Structure and Containing Divs 
*/

#smallhead {
  clear: both;
	background-image: url(/public/images/smallhead.png);
	width: 946px;
	height: 2px;
}
#smallfoot {
	clear: both;
	background-image: url(/public/images/smallfoot.png);
	width: 946px;
	height: 5px; /* 3px shadow */
}
/* smallhead and foot are the 2px tall borders for the content box */

#main {
	background: url(/public/images/smallrepeat.png) repeat-y;
	margin: 0;
	width: 940px;
	padding: 0 3px; /* 3px left and right to offset the border */
	float: left;
	min-height: 100px; /* Content box is at least 100px tall */
}
#mainflow, #mainflowclean {
	background: #b9b9b9 url(/public/images/mainbg.png) repeat-x;	
	float: left;
	min-height: 100px;
}
#mainflow {
	width: 900px;
	padding: 5px 20px 20px 20px;
}
#mainflowclean {
	width: 940px;
	padding: 0;
}

/* mainflow flows the internal gradient for 628px and 100% width
/ mainflow is the first parent to all content and thus needs to float: left to let its children behave */

/*
/ Content Column Structure A
*/

div#left {
	width: 510px;
	margin-right: 20px;
	float: left;
}
div#right {
	width: 370px;
	float: right;
}

/* Product Page Containers */

#democontainer {
	width: 504px;
	height: 360px;
	padding: 0;
	margin-top: 15px;
}
#demoshadow {
	margin: -23px 0 0 -4px;
	background-image: url(/public/images/shadow.png);
	width: 512px;
	height: 41px;
} /* Carried away by a moonlight shadow! */

div.feature {
	width: 215px;
	height: 32px;
	padding: 3px 5px 0 35px;
	margin: 8px 0;
	float: left;
	font-size: 80%;
	line-height: normal;
}
div.feature:first-line {
	font-weight: bold;
	text-transform: uppercase !important;
}
div#endless {
	background: url(/public/images/featureicons/endless.png) no-repeat;
}
div#codemerge {
	background: url(/public/images/featureicons/codemerge.png) no-repeat;
}
div#edit {
	background: url(/public/images/featureicons/edit.png) no-repeat;
}
div#flash {
	background: url(/public/images/featureicons/flash.png) no-repeat;
}
div#runtime {
	background: url(/public/images/featureicons/runtime.png) no-repeat;
}
div#css {
	background: url(/public/images/featureicons/css.png) no-repeat;
}
div#toolkits {
	background: url(/public/images/featureicons/toolkits.png) no-repeat;
}
div#noflash {
	background: url(/public/images/featureicons/noflash.png) no-repeat;
}
div#develop {
	background: url(/public/images/featureicons/develop.png) no-repeat;
}
div#speed {
	background: url(/public/images/featureicons/speed.png) no-repeat;
}
div#streaming {
	background: url(/public/images/featureicons/waveform.png) no-repeat;
}
div#audio {
	background: url(/public/images/featureicons/sound.png) no-repeat;
}
div#social {
	background: url(/public/images/featureicons/social.png) no-repeat;
}
div#sort {
	background: url(/public/images/featureicons/search.png) no-repeat;
}
div#universal {
	background: url(/public/images/featureicons/universal.png) no-repeat;
}
div#sync {
	background: url(/public/images/featureicons/sync.png) no-repeat;
}
div#users {
	background: url(/public/images/featureicons/users.png) no-repeat;
}
div#discussion {
	background: url(/public/images/featureicons/discussion.png) no-repeat;
}
div#more {
	background: url(/public/images/featureicons/more.png) no-repeat;
}
div#photos {
	background: url(/public/images/featureicons/photos.png) no-repeat;
}
div#group {
	background: url(/public/images/featureicons/group.png) no-repeat;
}

/* 
/ Content Column Structure B
*/

div#leftb {
	width: 700px;
	margin-right: 20px;  
	float: left;
}
div#rightb {
	width: 180px;
	float: right;
}
div#leftb .serif {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 14px;
	text-align: justify;
}
.tabs {
	width: 160px;
	height: 21px;
	padding: 8px 10px;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-weight: bold;
	background: url(/public/images/tab.png) no-repeat;
}
.tabs a {
	text-decoration: none;
	color: #000;
}

/* 
/ Content Column Structure C    (no padding)
*/

div#leftc {
	float: left;
	width: 740px;
}
div#rightc {
	float: right;
	width: 190px;
	padding: 0 0 10px 10px;  
	/* background-color: #dadada; */
}

/* 
/ Footer Link
*/

div#footer, div#footer a {
  	width: 120px;
	height: 26px;
}
div#footer {
	background-image: url(/public/images/owavo.png);
	margin: 20px auto;
}
#footer a {
	display: block;
}