/* FTC - Flexible Two Column Layout */
/* Use another css to make changes of colors, background, etc. Such as coffee, mono, etc */

/* CSS defaults */
html { 
	margin:0; 
	padding:0; 
	border:0; 
}
a,acronym,addressaside,abbr,article,blockquote,body,caption,code,dialog,dl,dt,dd,del,dfn,div,em,fieldset,figure,footer,form,
h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,li,label,legend,nav,ol,object,p,pre,q,section,span,table,tbody,tfoot,thead,tr,th,td,ul {
  margin:0;
  padding:0;
  border:0;
  font-weight:inherit;
  font-style:inherit;
  font-family:inherit;
  font-size:100%;
  vertical-align:baseline;
}
em {
	font-style:italic;
}
strong {
	font-weight:bold;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	/* Make newer HTML5 elements behave like DIVs in older browers */ 
	display:block;
}
body { 
	/* Line-height unitless */
	line-height: 1.2;
	background-color:transparent;
}
table { 
	/* Tables need cellspacing="0" */
	border-collapse: separate; 
	border-spacing: 0; 
}
caption, th, td { 
	/* float:none prevents the span-x classes from breaking table-cell display */
	text-align: left; 
	font-weight: normal; 
	float:none !important; 
}
table, th, td { 
	vertical-align: middle; 
}
blockquote:before, blockquote:after, q:before, q:after { 
	/* No quotes from q, blockquote. */
	content: ''; 
}
blockquote, q { 
	quotes: "" ""; 
}
a img { 
	/* No border on linked images. */
	border:none;
}
:focus { 
	/* Remember to define your own focus styles! */
	outline: 0; 
}
/* End CSS defaults */

body,p,td,ul,li,dl,dt,dd,em,strong {
	font-size:100%;
	color:#312201; 
	font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

body {
	background-color:transparent;
/*
	background-image:url("/themes/ftc/mono/background_cables_grey.jpg");
*/
	background-color:white;
	background-repeat:no-repeat;
	background-position:center top;
  background-attachment:fixed;
}

#Page_Box {
	position:relative;
	width:800px;
	margin:10px auto;
	z-index:1;
}

#Logo_Bottom {
	position:fixed;
	right:20px;
	bottom:20px;
	left:50%;
	margin-left:420px;
}

#To_Top {
	cursor:pointer;
	position:fixed;
	bottom:20px;
	left:50%;
	margin-left:-470px;
}

#Image_Popup {
	/* Product Image Popup */
	position:absolute; 
	display:none;
	padding:0 10px 10px 10px;
	cursor:pointer;
	text-align:center;
	z-index:11; 
	color:red;
	background-color:#ffffff;
	box-shadow: 2px 2px 20px 1px #000000;
}
#Image_Popup span { /* The top bar with closeX */
	display:block;
	font-size:130%;
	margin:0 -10px 10px -10px;
	padding:5px;
	color:#e0e0e0;
	text-align:right;
	background-color:maroon;
}

#Top_Box {
	position:relative;
  width:100%;
	height:250px;
	margin:0 0 10px 0;
	overflow:hidden;
	cursor:pointer;
	box-shadow: 2px 2px 20px 1px #a0a0a0; 
}
@media screen and (max-height:830px) {
	#Top_Box {	height:200px;	} /* Adjust top banner for screen height */
	#tribebizarre { display:none !important; }/* turn off bizarre to make tribe shorter for short screens */
}
@media screen and (max-height:690px) {
	#Top_Box {	height:130px;	} /* Adjust top banner for screen height */
	#tribebizarre { display:none !important; }/* turn off bizarre to make tribe shorter for short screens */
}

#Top_Box_Text  {
  position:absolute;
	left:0px;
	bottom:35px;
	width:100%;
	font-size:14px;
	font-style:italic;
	padding:3px 3px 3px 10px;
	color:#ffffff;
	background-color:#404040;
	opacity:.90;
	text-shadow:1px 1px 8px #000000;
	xbox-shadow: 2px 2px 10px 1px #a0a0a0; 
}
#Top_Box_Image  {
  position:relative;
	width:100%;
}

#Social_Box {
	position:absolute;
	left:784px;
	top:330px;
	z-index:-2;
	opacity:.5;
}
#Social_Box:hover {
	position:absolute;
	cursor:pointer;
	left:800px;
	z-index:1;
	opacity:1;
}
#Social_Box img {
	border:1px solid transparent;
}
#Social_Box img:hover {
	border:1px solid black;
}

#Menu_Box { /* Menu bar across top */
	position:absolute;
	width:100%;
	bottom:0;
	height:35px;
	text-align:center;
	font-size:0;  /* space between divs */
	opacity:.95;
	background-color:#404040;	
}
.Menu_Item { /* Item within menu bar */
	display:inline-block; 
	XXXwidth:12%; 
	height:35px;
	text-align:center; 
	line-height:35px;
	cursor:pointer;
	font-size:18px; 
	color:#eeeedd; 
  background-color:transparent;
}


.Menu_Item:hover {
  color:white;
}
.Menu_Item img {
  display:inline-block;
	vertical-align:middle;
}

#Menu_Products_Popup, #Menu_Tribe_Popup, #Menu_Learn_Popup, #Menu_Fun_Popup, #Menu_Company_Popup, #Menu_Settings_Popup {
	position:absolute; 
	display:none; 
	z-index:2;
 	padding:5px;
	box-shadow:2px 2px 20px 1px #101010; 
	background-color:#101010;
}
#Menu_Products_Popup td, #Menu_Tribe_Popup td, #Menu_Learn_Popup td, #Menu_Fun_Popup td, #Menu_Company_Popup td, #Menu_Settings_Popup  td {
	vertical-align:top;
	width:48%;
}
#Menu_Products_Popup h3, #Menu_Tribe_Popup h3, #Menu_Learn_Popup h3, #Menu_Fun_Popup h3, #Menu_Company_Popup h3, #Menu_Settings_Popup h3 {
  display:block;
	color:#6992b4;
	font-size:16px;
}
#Menu_Products_Popup img, #Menu_Tribe_Popup img, #Menu_Learn_Popup img, #Menu_Fun_Popup img, #Menu_Company_Popup img, #Menu_Settings_Popup img {
	float:left; 
	margin-right:10px;
}
#Menu_Products_Popup a, #Menu_Tribe_Popup a, #Menu_Learn_Popup a, #Menu_Fun_Popup a, #Menu_Company_Popup a, #Menu_Settings_Popup a {
	display:inline-block; /* need to extend border around entire <a block */
	padding:5px;
	width:95%; /* fallback */
	width:calc(100% - 10px);
	font-size:14px;	
	color:#e0e0e0;
	vertical-align:top;
	text-decoration:none;
	border:1px solid transparent;
}
#Menu_Products_Popup a:hover, #Menu_Tribe_Popup a:hover, #Menu_Learn_Popup a:hover, #Menu_Fun_Popup a:hover, #Menu_Company_Popup a:hover, #Menu_Settings_Popup a:hover {
		border:1px solid white;
}
#Menu_Products_Popup {
	width:600px;
}
#Menu_Tribe_Popup {
	width:350px;
}
#Menu_Learn_Popup {
	width:200px;
}
#Menu_Fun_Popup {
	width:200px;
}
#Menu_Company_Popup {
	width:140px;
}
#Menu_Settings_Popup {
	width:120px;
}

#Menu_Learn_Popup a, #Menu_Fun_Popup a, #Menu_Company_Popup a, #Menu_Settings_Popup a { /* these have text menus need dif formatting */
	padding:0;
	width:100%;
}

#Nav_Box { /* Navigation column on left */
  display:inline-block;
  position:relative;
	float:left;
  width:190px;
	height:800px;
	overflow-y:scroll;   /* scroll bar 17px wide */
	margin-right:10px;
	padding:0;
	background-color:white;
	text-align:center;
	color:#808080;
	font-weight:bold;
	font-size:16px;
	box-shadow:2px 2px 20px 1px #a0a0a0; 
	overflow-x:hidden;
	/*direction: rtl;    /*scrollbar on left, doesnt work good with chrome */
}
#Nav_Box span.Nav_Box_Title {
	display:inline-block;
	width:100%;
	background-color:#280000;
	margin-bottom:10px;
	color:white;
	font-size:18px;
	font-weight:normal;
}
#Nav_Box a  {  /* for most products */
	display:block;
	text-decoration:none;
	color:#505050;
	text-align:center;
	margin:0 0 10px 0;
	font-size:17px;
	border:1px solid transparent;
}
#Nav_Box a:hover { /* for most products */
	border:1px solid black;
}
#Nav_Box img { /* for most products */
  position:relative;
	display:block;  /* removes horizontal space between images */
	width:150px;
	border:1px solid transparent !important;
	margin:auto;
}
#Nav_Box a.Nav_Modules  { /* for modules */
	display:block;
	width:100%;
	text-align:left;
	text-decoration:none;
	color:#505050;
	margin:0 0 0 5px;
	font-size:15px;
	border:1px solid transparent;
}
#Nav_Box a.Nav_Modules:hover { /* for modules */
	background-color:#e0f0f0;
}

#moduleinfo { /* module popup menu */
	position:absolute;
	visibility:hidden;
	z-index:200;
	top:0px; 
	left:0px; 
	width:auto;
	min-width:250px;
	max-width:350px;
	height:80px; 
	padding:5px; 
	margin:0px;
	background-color:#c0c0c0;
	border:1px solid #000000;
	overflow:hidden;
	font-size:12px;
	vertical-align:top;
}
#moduleinfo td {
	height:100%;
	vertical-align:top;
}	
#moduleinfo img {
	margin-right:5px;
}
#moduleinfo strong {
	font-size:125%;
}

#Arrow_Scroll_Up {
	width:170px;
}
#Arrow_Scroll_Down {
  position:absolute;
	display:block;
	width:170px;
	top:790px;
	z-index:0;
}

#Content_Box {
	display:inline-block;
  position:relative;
	width:580px;
	margin:0 0 5px 0;
	padding:10px 10px 0px 10px;
	min-height:790px;
	overflow:hidden;
	background-color:white;
	box-shadow: 2px 2px 20px 1px #a0a0a0; 
}
#Content_Box a:link {
	color:#1a2327;
}
#Content_Box a:hover {
	background-color:transparent;
}
#Content_Box a:visited {
	color:#2e1e2b;
}

#Content_Box hr { 
	height:3px; 
	background:#808080; 
	border:0; 
}

#Content_Width_Control {
	position:absolute;
	cursor:pointer;
	top:0;
	right:0;
}

#Foot_Box {
  position:relative;
	display:block;
  width:100%;
	height:30px;
	clear:both;
	box-shadow: 2px 2px 20px 1px #a0a0a0; 
	background-color:#808080;
}
#Foot_Box p {
 text-align:right;
 line-height:30px;
 padding-right:10px;
 font-size:10px;
}

#Front_Page_Message, #Product_Message, #Order_Form_Message, #Order_Response_Message {
	display:block;
	margin:0 0 10px 0;
	color:red; 
	font-weight:Bold; 
	font-Size:16px; 
}

#QFind_Form {  
  position:absolute;
	right:20px;
	top:10px;
	box-shadow: 0px 0px 5px 0px #202020; 
	
}
#QFind_Popup {  
	display:none;
	position:absolute; 
	padding:10px; 
	top:65px; 
	left:40%; 
	height:auto; 
	max-height:600px; 
	width:450px; 
	overflow-y:auto; 
	overflow-x:hidden; 
	z-index:10;
/*	background-image:url("/qfind/qfindbackground.jpg"); */
	background-color:#e7effa; 
	box-shadow: 2px 2px 20px 1px #000000; 
	border: 1px solid black;
}
#QFind_Text {
	font-size:18px;
}
#QFind_Popup p.alert {
  color:red;
}
#QFind_Popup p {
  margin:0 0 10px 0;
	clear:both;
}
#QFind_Popup h1 {
	position:relative;
	display:inline-block;
  margin-bottom:10px;
	color:#1c68ce;
	background-color:transparent;
	font-size:140%;	
	font-weight:bold;
}
#QFind_Popup hr {
	clear:both;
}	
#QFind_Popup li {
  margin:0 0 0px 30px;
	clear:both;
}
#QFind_Popup img {
  display:block;
  margin:0 auto 10px auto;
	/*border:3px solid #021a40;	*/
}
#QFind_Submit {
	width:34px; 
	height: 25px;
	border-style:none; 
	background:url('themes/ftc/searchicon.png') no-repeat; 
}
.QFind_Image { /* center qfind images */
	display:block;
	margin:auto;
}	

hr {
	margin-top:10px;
	margin-bottom:20px;
	clear:both;
}
h1 {  /* titles for pages */
	position:relative;
	display:inline-block;
	width:100%;
	left:-10px;
	top:-10px;
	padding:3px 10px 3px 10px;
	color:#ffffff; 
	background-color:#000000; 
	font-size:150%; 
	font-weight:bold;
}
h2 {
	color:#202020; 
	font-size:130%; 
	font-weight:bold; 
	margin-bottom:10px;
}
h3 {
	color:#202020; 
	font-size:120%; 
	font-weight:bold; 
}
h4 {
	color:#202020; 
	font-size:115%; 
	font-weight:bold; 
}
h5 {
	color:#202020; 
	font-size:110%; 
	font-weight:bold; 
}
h6 {
	color:#202020; 
	font-size:100%; 
	font-weight:bold; 
}
p {
	padding:0 10px 1em 0;
}
ul {
	padding:0 10px 1em 0;
	list-style-type:square;
	margin-left:30px;
}

.Indent_1 {
	margin:0 0 10px 30px;
}
.Indent_2 {
	margin:0 0 10px 50px;
}
.Indent_3 {
	margin:0 0 10px 70px;
}

.Features  ul {
	margin:0 10px 20px 40px;
	list-style-type:square;
}
.Features  li {
	margin-bottom:5px;	/* space between bullets */
}

/* Sections */
.AddController, .Comments, .Controls, .Datasheets, .Gallery, .Included, .Other, .Patches, .Price, .Related, .Sounds, .Specs, .Spreadsheet, .Suggested, .SynthInvent, .Usage, .Videos  { /* Common Box for all sections */
	width:98%;
	margin:0 0 10px 0;
	padding:5px;
  background-color:#f0f0f0;
	clear:both;
	overflow:hidden; /* makes box big enough for largest image */
	list-style-type:none;	/* no bullets on UL */
}
.Comments ul, .Gallery ul, .Related ul, .Videos ul, .Datasheets ul, .Patches ul, .Sounds ul, .Specs ul, .Suggested  ul { /* inline images UL */
	list-style-type:none;	/* no bullets on UL */
	padding-bottom:0;
	margin-left:0;
}
.Gallery li, .Related li, .Videos li, .Datasheets li, .Patches li, .Suggested  li { /* inline images LI */
	display:inline-block;
	padding:0;
	margin:0;  /* theres a space char between each item */
	text-align:center;
	vertical-align:top;
	font-size:80%;	/* all text not in p tiny */
	border:1px solid transparent; /* So hovering doesn't change overall size causing jumping */
}
.Gallery li a, .Related li a, .Videos li a, .Datasheets li a, .Patches li a,  .Suggested li a {
	display:inline-block;
	padding:1px;
	border:1px solid transparent; /* So hovering doesn't change overall size causing jumping */
	text-decoration:none;
}
.Gallery li a:hover, .Related li a:hover, .Videos li a:hover, .Datasheets li a:hover, .Patches li a:hover,  .Suggested li a:hover { /* inline images */
	border:1px solid #021a40;
}
.Other ul, .Controls ul, .Product_Description ul, .Usage ul {
	list-style-type:square;
	margin-left:30px;
}
.Spreadsheet img, .SynthInvent img { /* move up icons a bit */
	position:relative;
	top:-25px;
	margin-bottom:-25px;
}

/* Section Titles */
.AddController:before, .Controls:before, .Datasheets:before, .Gallery:before, .Included:before, .Patches:before, .Price:before, .Related:before, .Sounds:before, .Specs:before, .Spreadsheet:before, .Suggested:before, .SynthInvent:before, .Usage:before, .Videos:before { /* common rules for titles of sections. contents are elsewhere */
	display:block;
	color:#000000; 
	font-size:130%; 
	font-weight:bold; 
}
.AddController:before {
	content:"Add A Controller";
}
.Controls:before {
	content:"Controls and Connectors";
	margin-bottom:10px;
}
.Datasheets:before {
	content:"Data Sheets";
}
.Gallery:before {
	content:"Gallery";
}
.Included:before {
	content:"Items Included";
}
.Patches:before {
	content:"Patch Ideas";
}
.Price:before {
	
}
.Related:before {
	content:"Related Products";
}
.Sounds:before {
	content:"Sound Samples";
}
.Specs:before {
	content:"Specifications";
}
.Spreadsheet:before {
	content:"Spreadsheet";
}
.Suggested:before {
	content:"Suggested Options";
}
.SynthInvent:before {
	content:"SynthInvent";
}
.Usage:before {
	content:"Usage";
	margin-bottom:10px;
}
.Videos:before {
	content:"Videos";
}

.Comments {  /* special background color */
	background-color:#e0e0e0;
}
.Comments li:last-child { /* make bottom li have no margin */
	margin-bottom:0px;
}
.Comments li { /* specs vary from a normal box */
	margin-bottom:10px;
}
.Comments h2 { /* turn off title */
	display:none;
}

.Return { /* left arrow to return to previous page, used on systems, etc */
	position:relative;
	display:inline-block;
	background-color:#fff0f0;
	font-size:75%;
	width:100%;
	left:-10px;
	top:-10px;
	padding:3px 10px 3px 10px;	
	text-decoration:none;
	color:red !important;
}
.Return img {  
	margin-right:10px;
	vertical-align:middle;
}

.Price {  /* Turn price off/on */
	/*display:none;*/
}
.Price {
	font-size:130%;
}

.Product_Note1 {
  display:table;  /* helps pos between floated rght img */
	width:300px;
	padding:10px;
  margin:0 auto 10px auto;
	background-color:#c0c0c0; 
}
.Product_Note1 p {
  font-size:85%;
  margin:0;
	padding:0;
}

.Video_Center {
  display:table;  /* helps pos between floated rght img */
	width:200px;
	padding:10px;
  margin:0 auto 10px auto;
	background-color:#afbfb0; 
	text-align:center;
	text-decoration:none;
	border:1px solid transparent;
	cursor:pointer; 
}
.Video_Center a {
	text-decoration:none;
}

.Video_Center:hover {
	border:1px solid black;
}

.Image_Enlargeable_Right { /* Used for module images on module pages */
	text-align:center;
	text-decoration:none;
  float:right;
	margin:0 0 10px 10px; 
	border:1px solid transparent;
	cursor:pointer; 
	clear:both;
}
.Image_Enlargeable_Right:hover {
	border:1px solid black;
}
.Image_Enlargeable_Right:after {
  display:block;
	content:"Click to enlarge";
	font-size:9px;
}

.Image_Enlargeable_Left { /* Used for module images on module pages */
	text-align:center;
	text-decoration:none;
  float:left;
	margin:0px 10px 10px 0; 
	border:1px solid transparent;
	cursor:pointer; 
	clear:both;
}
.Image_Enlargeable_Left:hover {
	border:1px solid black;
}
.Image_Enlargeable_Left:after {
  display:block;
	content:"Click to enlarge";
	font-size:9px;
}

.Image_Enlargeable_Center { /* Used for module images on module pages */
  display:block;
	text-align:center;
	text-decoration:none;
	margin:0 auto 10px auto; 
	border:1px solid transparent;
	cursor:pointer; 
	clear:both;
}
.Image_Enlargeable_Center:hover {
	border: 1px solid black;
}
.Image_Enlargeable_Center:after {
  display:block;
	content:"Click to enlarge";
	font-size:9px;
}

.Image_Linked_Right {
	text-align:center;
	text-decoration:none;
  float:right;
	margin:0 0 10px 10px; 
	border:1px solid transparent;
	cursor:pointer; 
	clear:both;
}
.Image_Linked_Right:hover {
	border:1px solid black;
}
.Image_Linked_Right:after {
  display:block;
	content:"Click for more info";
	font-size:9px;
}

.Video_Linked_Right {
	text-align:center;
	text-decoration:none;
  float:right;
	margin:0 0 10px 10px; 
	border:1px solid transparent;
	cursor:pointer; 
	clear:both;
	font-size:11px;
	color:blue !important;
}
.Video_Linked_Right:hover {
	border:1px solid black;
}


.Image_Linked_Left {
	text-align:center;
	text-decoration:none;
  float:left;
	margin:0px 10px 10px 0; 
	border:1px solid transparent;
	cursor:pointer; 
	clear:both;
}
.Image_Linked_Left:hover {
	border:1px solid black;
}
.Image_Linked_Left:after {
  display:block;
	content:"Click image for more";
	font-size:9px;
}

.Image_Linked_Center {
  display:block;
	text-align:center;
	text-decoration:none;
	margin:0 auto 10px auto; 
	border:1px solid transparent;
	cursor:pointer; 
	clear:both;
}
.Image_Linked_Center:hover {
	border:1px solid black;
}
.Image_Linked_Center:after {
  display:block;
	font-size:9px;
	content:"Click image for more";
}

.Image_Right {
	float:right;
	margin:0 0 10px 10px;
}
.Image_Left {
	float:left;
	margin:0 10px 10px 0;
}
.Image_Center {
	display:block;
	margin:0 auto 10px auto; 
	text-align:center;
}

.Inline_Linked_Center a, a.Inline_Linked_Center { /* Used for modules.html, synthies.html. can be used in <a> or <div> */
	display:inline-block;
	margin:0 0 10px 0;
	padding:5px;
	clear:both;
	font-size:12px;
	text-align:center; 
	vertical-align:top;
	text-decoration:none;
	border:1px solid transparent; 
}
a.Inline_Linked_Center:hover, .Inline_Linked_Center a:hover {
	border:1px solid black; 
}

.Block_Linked_Right {  /* centered fixed width block, right-justified image and text.  Used on cabinets.html, systems.html, cables.html, gifts.html */
	display:block;
	margin:0 auto 10px auto;
	width:400px;
	overflow:auto;
	border:1px solid transparent; 
	text-decoration:none;
	text-align:right; 
}
.Block_Linked_Right:hover {
	border:1px solid black; 
}
.Block_Linked_Right img {
  float:right;
	margin-left:20px;
}
.Block_Linked_Right h2 {
	margin-top:30px;
}
.Block_Linked_Right p {
	font-style:italic;
}

.Block_News {  /* News block, full width, used on index and news */
	display:block;
	margin:0 0 20px 0;
	overflow:hidden;
	border:1px solid transparent; 
	padding-left:10px;
	clear:both;
	background-color:#f0f0f0;
}
.Block_News img {
  float:right;
	margin-left:10px;
	border:1px solid transparent; 
}
.Block_News a > img:hover {
	border:1px solid black; 
}
.Tutorial_Video {
	display:block;
	margin:0 auto 10px auto;
	padding:0;
	overflow:auto;
	border:1px solid transparent; 
	text-decoration:none;
	text-align:left; 
}
.Tutorial_Video:hover {
	border:1px solid black; 
	background-color:#fdfec5;	
}
.Tutorial_Video img {
  float:left;
	margin-right:10px;
}
.Tutorial_Video h2 {
	margin:0px 0px 5px 0px;
	color:#2a508e;
}
.Tutorial_Video p {
	font-style:italic;
	margin:0px;
	padding:0px;
}