@charset "UTF-8";
/* CSS Document */

/* **********  RESET browser settings  *********** */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
}
a img, :link img, :visited img {border: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
q:before, q:after, blockquote:before, blockquote:after {content: "";}
/* **********  END RESET browser settings  *********** */

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  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:1em;*/margin-top: 5px;}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav { margin: 0 20px 0 0; padding: 0 0 0 0; font-family: 'Arial', sans-serif; font-size: 12px; font-weight: normal; }

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

ul.tabbernav li a
{
 padding: 5px 6px 5px 6px;
 margin: 0 0 0 0px; /* margin between tabs*/
 /*(border: 1px solid #778;
 border-bottom: none;*/
 background: #c4c4c3;
 text-decoration: none;
}

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

ul.tabbernav li a:hover
{
 color: #000;
 background: #FFFFFF;
 /*border-color: #227;*/
 text-decoration: none;
}

ul.tabbernav li.tabberactive a
{
 color: #da4803;
 background-color: #fff;
 /*border-bottom: 1px solid #fff;*/
}

ul.tabbernav li.tabberactive a:hover
{
 color: #da4803;
 background: white;
 /*border-bottom: 1px solid white;*/
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
/* padding:5px;*/
 /*border:1px solid #aaa;*/
 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;
}

/* //////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////// */

html, img, form {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
}

body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: #e8e8e8; 
	background-image:none;
}

h1 {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 14px;
}

h2 {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 12px;
}

/* font styles */
.basic_font {
	font-family: 'Arial', sans-serif;
	line-height: 20px;
}

.mainnav { 
	font-size: 18px; 
	color: #f26522; 
	font-weight: bold; 
}

.date { 
	font-size: 14px; 
	color: #898989; 
}

.title { 
	font-size: 20px; 
	color: #fff8a7; 
}

.title a {
	color: #FFFFFF;
	text-decoration: none;
}

.title a:hover {
	color: #a89884;
	text-decoration: none;
}

.subhead { 
	font-size: 14px; 
	font-weight: bold;
	color: #5f5f5f; 
}

.content { 
	font-size: 11px; 
	color: #5f5f5f; 
	font-weight: normal;
}

.content a { 
	color: #d64803; 
	font-weight: bold;
	text-decoration: none;
}

.content a:hover { 
	color: #d64803;
	font-weight: bold;
	text-decoration: underline;
}

.bodyparagraph {
	position: relative;
	margin: 0 20px 0 20px;
	padding: 0 0 0 0;
}

.columnparagraph {
	position: relative;
	margin: 0 0 0 10px;
	padding: 0 0 0 0;
}

.headline {
	font-size: 22px;
	color: #9f9d95;
	line-height: 30px;
	font-weight: lighter;
}

.footer { 
	font-size: 9px; 
	color: #d64803; 
	font-weight: normal;
	line-height: 16px;
}

.footer a { 
	font-size: 9px;
	color: #736357; 
	font-weight: normal;
}

.footer a:hover { 
	font-size: 9px;
	color: #736357; 
	text-decoration: underline;
}

.thumb_text {
	font-size: 9px;
	line-height: 10px;
}

/* **************************************** */
.visualizer_container {
	margin: 0 auto 0 auto;
	width: 920px; 
	height: 100%;
	min-height: 100%;
	background-color: #e8e8e8; 
}
.visualizer_header {
	margin: 10px 0 0 0;
	padding-left: 20px;
	width: 900px;
	/*float: left;*/
	font-size: 16px;
	font-weight: lighter;
}
.layout {padding: 20px 20px 20px 20px; margin: 0 0 0 0; width: 880px; height: 480px; background-color: #FFFFFF; background: url('viz_bg.gif') no-repeat; float: left;}
.layout_dnf {margin: 20px 0 0 0; width: 710px; height: 400px; background: url('viz_dnf_bg.gif') no-repeat;}
.float_container {float: left; margin: 0 0 0 0; padding: 0 0 0 0;}
.column {width: 260px; height: 415px; padding: 20px 20px 20px 20px; background: #f5f4f4 url('viz_column_bg.gif') no-repeat; float: left;}
.columndiv {float: left; margin: 0 0 30px 0; font-size: 14px;}
.circle {background: url('circle.gif'); width: 29px; height: 25px; text-align: center; padding: 4px 0 0 0; margin: 0 20px 0 0;}

.thumb {float:left; width:120px; font-size:9px; color:#5e524a; font-weight:bold; line-height:15px; margin-bottom:20px; margin-right: 10px;}
	.thumb a{font-size:10px; color:#e55b19; font-weight:bold; text-decoration:none;}
	.thumb a:hover{font-size:10px; color:#64a7a3; font-weight:bold; text-decoration:none;}

.smallthumb_pad {margin: 0 0 0 0; padding: 10px 8px 8px 10px; width: 185px; height: 111px; background-color: #FFFFFF; overflow: auto;}
.smallthumb_container {float:left; width:35px; height: 35px; margin: 0 2px 2px 0; background-color: #CCCCCC;}
	.smallthumb_container a{background-color: #5e524a;}
	.smallthumb_container a:hover{background-color: #FF3300;}

.smallthumb {margin: 2px 2px 2px 2px; width:30px; height: 30px; background-color: #CCCCCC;}

selection_unit {
	position: relative;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	height: 120px;
	clear: right;
}
.selection_thumb {
	position: relative;
	margin: 20px 10px 0 0;
	padding: 0 0 0 0;
	width: 48px;
	height: 48px;
	float: left;
}
.selection_txt {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	float: left;
	vertical-align: top;
}
.selection_title {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 20px;
}
.selection_line {
	postion: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border-top: 1px solid #dad5d1;
}

.selection_navcontainer {
	position: relative;
	margin: 5px 8px 0 0;
	padding: 0 0 0 0;
	float: left;
}

.left {float: left;} .right {float: right;}

.dnf_pad_1 {
	margin: 20px 20px 0 0;
	padding: 10px 10px 0 10px;
	width: 240px;
	height: 350px;
	background: url('dnf_bg_1.gif') no-repeat;
}

.dnf_pad_2 {
	margin: 20px 0 0 0;
	padding: 20px 0 0 10px;
	width: 380px;
	height: 40px;
	background: url('dnf_bg_2.gif') no-repeat;
}

.dnf_pad_3 {
	margin: 10px 0 0 0;
	padding: 10px 10px 0 10px;
	width: 370px;
	height: 170px;
	background: url('dnf_bg_3.gif') no-repeat;
}

.dnf_pad_4 {
	margin: 0 0 0 0; padding: 40px 0 0 0; width: 370px; height: 50px; background: #FFFFFF; float: right;
}

.dnf_pad_5 {
	border-top: 1px solid #bdbbac; border-bottom: 1px solid #bdbbac; margin: 0 10px 0 10px; height: 35px;
}

.dnf_pad_6 {
	margin: 10px 0 0 0; padding: 10px 20px 0 20px; width: 350px; height: 30px; background: url('dnf_bg_4.gif'); text-align: right;
}

.dnf_select {
	margin: 0 10px 0 0; padding: 0 0 0 0; float: left;
}

.viz_room {
	width: 500px;
	height: 470px;
	padding: 10px 10px 0 10px;
	background: url('viz_room_bg.gif') no-repeat;
}

.viz_controller {
	width: 440px;
	height: 65px;
	padding: 10px 0 0 60px;
	background: url('viz_controller_bg.gif') no-repeat;
}

.viz_colors {
	width: 340px;
	height: 480px;
	margin: 0 0 0 20px;
	background: url('viz_colors_bg.gif') no-repeat;
}

.viz_color_pad {
	width: 340px; 
	height: 430px;
	margin: 10px 0 10px 0; 
	overflow: auto;
}

.viz_color_thumb_pad {
	width: 90px;
	height: 120px;
	margin: 0 0 10px 10px;
}

.viz_color_thumb {
	width: 90px;
	height: 90px;
	background: #333333;
}