body {
	background: #000000 url(images/main-bg2013.gif) repeat-x;
	margin: 0px;
	padding: 0px;
	font-family: arial;
	color: white;
}







/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 52px - you can set this to anything
so total container width = 640 + 55*4 = 860px;
default width = 860/5 = 172px;
*/

.accordian {
	z-index:0;
	margin: 0; 
	padding: 0;
	width: 900px; height: 320px;
	overflow: hidden;
	position:relative;
	
	
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	margin-left: 0em;
	padding-left: 0em;
	margin-top: 0em;
	padding-top: 0em;
	width: 2000px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 180px;
	float: left;
	
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 65px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

/*Image title styles*/
.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
	font-family: eurostile;
}





img {
	border: 0px;
}

@font-face {
	font-family: eurostile;
	src: url(eurostile.ttf);
}



/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:0em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
	margin:0;
	padding: 3px 0;
	font-family: eurostile;
	color: #ff6600;
	font-size: 20px;
	text-transform: uppercase;
	border-bottom: 1px solid #ff6600;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #ff6600;
 border-bottom: none;
 background: #151515;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #ffffff; }
ul.tabbernav li a:visited { color: #ffffff; }

ul.tabbernav li a:hover
{
 color: #ffffff;
 background: #080808;
 border-color: #ff6600;
}

ul.tabbernav li.tabberactive a
{
 background-color: #ff6600;
 border-bottom: 1px solid #ff6600;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #ffffff;
 background: #ff6600;
 border-bottom: #ff6600;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px 0px 0px 0px;

 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}



ul {
margin-left: 1em;
padding-left: 1em;
}


.text-input, .input_box {
padding:5px 5px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333333;
border-right:1px double #333333;
color: #ffffff;
width: 200px;
}


.input_box{
width: 500px;
height: 200px;
}




fieldset {
	border: 0px;
	padding:0
}


::selection {

background:#FF6600;
color: #000000;

}
::-moz-selection {

background:#FF6600;
color: #000000;

}

::-webkit-selection {

background:#FF6600;
color: #000000;

}




dl, dd {
	margin: 0;
	border: 0;
}

.flip {
	font-size: 10px;
	float: right;
}


div.panel {
	display:none;
}


hr {
border-style: dashed;
color: #333333;
width: 100%;
text-align: left;
}

a:link{
	color: #ff6600;
	text-decoration: none;
}

a:visited{
	color: #ff6600;
	text-decoration: none;
}

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


 
.pagetitle {
	font-family: eurostile;
	color: #ffffff;
	font-size: 36px;
}

.subtitle {
	font-family: eurostile;
	color: #ffffff;
	font-size: 16px;
}

.bodytitle {
	font-family: eurostile;
	color: #ff6600;
	font-size: 20px;
	text-transform: uppercase;
}



.eurostile {
	font-family: eurostile;
}


.bodytext {
	font-size: 14px;
	line-height: 150%;
	margin-left:0px;
}

.quote {
	font-size: 14px;
	line-height: 150%;
	font-style: italic;
}



.newstext {
	font-size: 11px;
	line-height: 150%;
	vertical-align: top;
}

.date{
	color: #333333;
	font-size: 10px;
	float:left;
}

.smalllink{
	font-size: 10px;
	float: right;
}

.checkmark {
	vertical-align: middle;

}


.align-left {
	float:left;
	margin: 0 10px 10px 0;
	vertical-align: top;
}

.align-left-video {
	float:left;
	margin: 0px 28px 0px 0px;
	vertical-align: top;
}

.video {
	padding: 18px 0px 18px 0px;
}

img.top {
	vertical-align: text-top;
}

.align-right {
	float:right;
	margin: 0px 0px 18px 18px;
	vertical-align: top;
}
.clearboth {
	clear:both;
}

.right{
	clear:right;
}


.thirds {
	width: 248px;
	float:left;
	margin: 0px 30px 0px 0px;
	vertical-align: top;
}

.finalthird {
	width: 248px;
	float:left;
	margin: 0px 0px 0px 0px;
	vertical-align: top;
}

.halfleft {
	float: left;
	padding: 0px 35px 0px 0px;
	width: 384px;
	font-size: 12px;
	text-align:center
}

.halfright {
	float: left;
	width: 384px;
	font-size: 12px;
	text-align:center
}


#social {
	margin: 0px auto;
	width: 900px;
	position: absolute;
	top: 35px;
	left: 135px;	
	z-index: 8;
	vertical-align: top;
}





#flashheader {
	position:relative;
	margin: 0px auto;
	width: 900px;
	height: 125px;
	overflow: hidden;
	padding: 0;
}

.error{
	color: #ff0000;
	font-size: 10px;
}

.contact {
	width: 268px;
}


#navbar {
	background: url(images/navbar.gif);
	margin: 0px auto;
	width: 900px;
	height: 30px;
	padding: 0;
	font-family:"Verdana", sans-serif;
	z-index:10;
	position:relative;
}


#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav {
	line-height: 1.75em;
	margin: 0px auto;
}


#nav a {
	display: block;
	width: 150px;
	height:30px;
	color: #ffffff;
	text-decoration: none;

}

#nav li {
	float: left;

}

.left {
	float: left;
}

.right {
	float: right;
}


.middle {
	margin: auto;


}

.menutitle{
	font-weight: bold;
	text-align: center;
	font-size: 12px;
}

.menuitem{
	text-indent: 9px;
	font-size: 10px;
}


#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#nav li:hover .menutitle {
	background: url(images/navrollover.gif);
}

.menuitem{
	background-color: #333333;

}

#nav li .menuitem:hover {
     background: url("images/navbutton.gif") repeat scroll 0% 0% transparent;
}

#wide900{
	width:900px;
	margin: 0px auto;
	height: 100%; 
}

.distribute5{
	float:left;
	margin-left:17px;
}

.distribute3{
	float:left;
	margin-left:13px;
}

.distribute3large{
	float:left;
	margin-left:27px;
}

.distributefirst{
	float:left;
	margin-left:0px;
}


#swap {
	clear: left;
	height:5em;
	overflow:hidden;
}

#one, #two, #three, #four, #five{
height:7em;
}

#leftside {
	float: left;
	width: 536px;
}

#rightside {
	float: right;
	width: 362px;
}

#top5buttons {
	padding-top: 15px;
	padding-bottom: 30px;
}

.column, .columnleft, .columnright  {
	border-style:solid;
	border-top-width:20px;
	border-left-width:20px;
	border-right-width:20px;
	border-bottom-width:0px;
	border-color: #151515;
	background-color: #080808;
	text-align: left;
	padding: 28px;
	overflow: hidden;

}



.columnheader {
	border-style:solid;
	border-top-width:20px;
	border-left-width:20px;
	border-right-width:20px;
	border-bottom-width:0px;
	border-color: #151515;
	background-color: #080808;
	text-align: left;
	overflow: hidden;

}


.columnleft, .columnright {
	background-image: url(images/light_trail.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	padding-bottom: 75px;
}

.lightbg {
	background-image: url(images/column-light-bg.jpg);
	background-position: top;
	background-repeat: no-repeat;
}



.column {
	margin: 0px auto;
}

.finalcolumn{
	border-bottom-width: 20px;
	height: 100%;

}


#columnbreak {
	background-color: #000000;
	margin: 0px auto;
	width: 900px;
	height: 2px;
	clear: both;
	display: block;
}


#footer {
	border-top-style:solid;
	border-top-width:2px;
	border-top-color: #000000;
	margin: 0px auto;
	background: url(images/footer-bg1.gif) no-repeat;
	color: #FFFFFF;
	font-size: 11px;
	padding-top: 50px;
	width: 900px;
	height: 77px;
	text-align: center;
	clear: both;
	display: block;
}


#footer a:link { 
	color: #9D9D9B;
	font-size: 22px;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
	text-decoration: none;
}
	
#footer a:visited { 
	color: #9D9D9B;
	font-size: 22px;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
	text-decoration: none;	
}
	
#footer a:hover, #footer a:active { 
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
	text-decoration: none;
}