/* General Classes */

table { border-collapse: collapse; }
form { padding: 0; margin: 0; }
.generalHeader { font-size: 18px; font-weight: bold; color: #181818; margin-bottom: 5px; }
.smHeader { font-size: 12px; font-weight: bold; color: #CCCCCC; margin-bottom: 2px; }
.red { color: #FF3300; }

a {
	color: #cb2d27;
	text-decoration: none;
}

a:hover {
	color: #FF3300;
	text-decoration: underline;
}

input, textarea { border: 1px solid #CCCCCC; font-size:11px; margin:4px 0; background: #FAFAFA; padding:4px; font-weight:bold; color: #000; vertical-align: middle; }
input:focus, textarea:focus { border: 1px solid #FF3300; background: #FFFFFF; }
select { color: #000; padding: 2px; font-size:11px; font-weight:bold; border: 1px solid #CCCCCC; background: #FAFAFA; vertical-align: middle; }
select:focus { background:#FFF; color: #000; }
.lightButton { padding: 3px 20px; background-color: #999999; border: 1px solid #656565; color: #FFF; vertical-align: middle; }
.lightButton:focus { padding: 3px 20px; background-color: #656565; border: 1px solid #999999; color: #FFF; }
input.radio {margin:0 2px 0 0;padding:0;background:transparent;margin:2px 0 0 -4px; border: 0; vertical-align: middle;}
input.check {background:transparent; border: 0px; vertical-align: middle; }

input.dark, textarea.dark { border: 1px solid #414141; font-size:18px; margin:4px 0; background: #282828; padding:4px; color: #FFF; }
select.dark { color: #FFF; padding: 2px; font-size:11px; font-weight:bold; border: 1px solid #414141; background: #282828; }
select:focus { background:#FFF; color: #000; }
.darkButton { padding: 3px 20px; background-color: #333333; border: 1px solid #414141; color: #FFF; }
.darkButton:focus { padding: 3px 20px; background-color: #414141; border: 1px solid #333333; color: #FFF; }
input.butt {padding:0;}

.badBlock { padding: 5px; background-color: #FF3300; font-size: 14px; font-weight: bold; margin: 5px 0; color: #FFF; }
.goodBlock { padding: 5px; background-color: #00FF00; font-size: 14px; font-weight: bold; margin: 5px 0; color: #FFF; }
.instructions { font-size: 10px; border: 1px solid #CCCCCC; background-color: #EFEFEF; padding: 5px; margin: 5px 0; }

.redButton { background-color: #FF3300; padding: 2px 20px; margin: 0; border: 0; color: #FFF; font-size: 11px; font-weight: bold; }
.blueButton { background-color: #26a8ff; padding: 2px 20px; margin: 0; border: 0; color: #FFF; font-size: 11px; font-weight: bold; }
.greyButton { background-color: #181818; padding: 2px 20px; margin: 0; border: 0; color: #FFF; font-size: 11px; font-weight: bold; }

a.hotLink { color: #FF3300; font-weight: bold; text-decoration: none; }
.insidePadding { padding: 10px; }

/* Fade In Area */
#blackBlock { background-color: #FFFFFF; position: absolute; z-index: 1; top: 0; left: 0; height: 200px; width: 200px; overflow: hidden; }
#picBoxer { position: absolute; z-index: 2; top: 0; left: 0; overflow: hidden; border: 1px solid #CCC; background-color: #FFF; }
#picBoxer .close { text-align: right; font-size: 10px; font-weight: bold; padding: 0px; }
#picBoxer #picText { padding: 10px; overflow: auto; }
#picBoxer #picText .pick { font-size: 22px; font-weight: bold; color: #333; }
#picBoxer #picText .game { font-size: 14px; font-weight: bold; color: #CCC; margin: 10px 0; }
#picBoxer #picText .desc { font-size: 12px; color: #000; }

/* Main Site CSS */

body {
	margin: 0;
	padding: 0;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #000000;
	background-image: url('../img/background.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top left;
}

#container {
	margin-top: 20px;
	width: 348px;
	margin-left: auto;
	margin-right: auto;
}

.header {
	width: 308px;
	height: 48px;
	margin-left: 21px;
	background: url('../img/blogerceBeta.jpg') no-repeat;
	margin-bottom: 12px;
}

.mainBody {
	background: url('../img/container.png') no-repeat top left;
	padding-top: 10px;
}

.btm {
	background: url('../img/container.png') no-repeat bottom left;
	height: 10px;
}

/* Navigation */

#navi {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	text-align: center;
	padding: 5px 0;
	font-size: 11px;
	font-weight: bold;
}

#navi a {
	color: #181818;
	text-decoration: none;
	padding-right: 10px;
}

#navi a:hover {
	color: #333333;
}

/* Sliding Window Pane */

#slidingHolder {
	width: 348px;
    height: 600px;
    overflow: hidden;
}

#slidingWindow {
    width: 2088px;
    height: 600px;
    color: #000;
}

#homePagePane {
    width: 696px;
    height: 600px;
}

.windowPane {
    width: 348px;
    height: 600px;
    float: left;
    display: block;
    overflow: hidden;
}

/* Sidebar Area */

#sideBar {
	position: absolute;
	margin: 50px 0 0 348px;
	width: 160px;
	height: 438px;
}

.sideBarStyle {
	background: url('../img/sideBar.png') no-repeat;
}

.lArrow {
	width: 160px;
	height: 29px;
	background: url('../img/lArrow.png') no-repeat;
	cursor: pointer;
}

.rArrow {
	width: 160px;
	height: 29px;
	background: url('../img/rArrow.png') no-repeat;
	cursor: pointer;
}

/* Contact Form */
.miniHeader { font-size: 11px; font-weight: bold; color: #000; margin-bottom: 3px; }

input.start { font-size: 22px; color: #e1e1e1; padding: 5px; background-color: #FFF; border: 1px solid #333; }
input.start:focus { border: 1px solid #FF3300; color: #000; }
input.entered { color: #181818; }
textarea.start { font-size: 14px; color: #e1e1e1; padding: 5px; background-color: #FFF; border: 1px solid #333; }
textarea.start:focus { border: 1px solid #FF3300; color: #000; }
textarea.entered { color: #181818; }
select { color: #000; padding: 2px; font-size:11px; font-weight:bold; border: 1px solid #333; background: #FAFAFA; }
select:focus { background:#FFF; color: #000; }

/* Home Page Spots */

.hpSpot {
	height: 96px;
	background: url('../img/homeSectionBg.gif') repeat-x;
	border-bottom: 1px solid #CCC;
}

.hpSpot .icon {
	float: left;
	display: block;
	width: 70px;
}

.hpSpot .info {
	float: right;
	display: block;
	width: 245px;
	margin-right: 5px;
}

.hpSpot .info .title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 3px;
}

.hpSpot .goto {
	float: right;
	display: block;
	width: 23px;
}

.hpSpot .goto a .arrow {
	width: 23px;
	height: 17px;
	background: url('../img/gotoArrow.png') no-repeat;
	float: right;
	display: block;
	margin-top: 42px;
}

.hpSpot .goto a:hover .arrow {
	background: url('../img/gotoArrowO.png') no-repeat;
}

#backArea {
	background: url('../img/backBg.gif') repeat-x;
	height: 25px;
	border-bottom: 1px solid #000;
}

#backArea a .arrow {
	width: 17px;
	height: 25px;
	background: url('../img/arrowBack.gif') no-repeat;
	float: left;
	display: block;
	margin-left: 5px;
}

#backArea a:hover .arrow {
	background: url('../img/arrowBackO.gif') no-repeat;
}

/* Specific Spots */
.blog {
	background: url('../img/blogIcon.png') no-repeat;
	width: 70px;
	height: 96px;
}

.shop {
	background: url('../img/shopIcon.png') no-repeat;
	width: 70px;
	height: 96px;
}

.infor {
	background: url('../img/infoIcon.png') no-repeat;
	width: 70px;
	height: 96px;
}

.intuitive {
	background: url('../img/intuitiveIcon.png') no-repeat;
	width: 70px;
	height: 96px;
}

.complete {
	background: url('../img/completeIcon.png') no-repeat;
	width: 70px;
	height: 96px;
}

.affordable {
	background: url('../img/affordableIcon.png') no-repeat;
	width: 70px;
	height: 96px;
}