/*
*
*	Forest Symphony Main CSS
*	2013 Coded by Takehisa Mashimo
*
*/

@charset 'UTF-8';
@import url("fonts.css");	/* Loading Fonts by Facetype */


/*----------------------------------------*/
/*	 Base styles	*/
/*----------------------------------------*/
/* Base styles */
* {
	margin: 0px;
	padding: 0px;
	vertical-align: top;
	list-style: none;
	font-weight: normal;
	border: 0px dotted #eeeeee;
	border-collapse: collapse;
}

#stream_darwin {
	width: 1px;
	height: 1px;
}


/*----------------------------------------*/
/*	 Font specific styles	*/
/*----------------------------------------*/
/* Font size specifics */
.f28 { display:inline-block; font-size: 28px; line-height: 1.75em; }
.f24 { display:inline-block; font-size: 24px; line-height: 1.75em; }
.f20 { display:inline-block; font-size: 20px; line-height: 1.75em; }
.f19 { display:inline-block; font-size: 19px; line-height: 1.75em; }
.f15 { display:inline-block; font-size: 15px; line-height: 1.75em; }
.f14 { display:inline-block; font-size: 14px; line-height: 1.75em; }
.f13 { display:inline-block; font-size: 13px; line-height: 1.75em; }
.f12 { display:inline-block; font-size: 12px; line-height: 1.75em; }
.f11 { display:inline-block; font-size: 11px; line-height: 1.75em; }
.f10 { display:inline-block; font-size: 10px; line-height: 1.75em; }
.f9 { display:inline-block; font-size: 9px; line-height: 1.75em; }
.f6 { display:inline-block; font-size: 6px; line-height: 1.75em; }

/* Tracking, the unit of tracking is 1/1000em, so, if we hope to set tracking 100, it is equal to 0.1em */
.t100 { letter-spacing: 0.1em; }
.t80 { letter-spacing: 0.08em; }
.t20 { letter-spacing: 0.02em; }
.t0 { letter-spacing: 0px; }
.t-120 { letter-spacing: -0.14em; }
.t-140 { letter-spacing: -0.14em; }
.t-160 { letter-spacing: -0.16em; }
.t-300 { letter-spacing: -0.3em; }
.t-500 { letter-spacing: -0.5em; }
.t-600 { letter-spacing: -0.6em; }

/* Alignment */
.alignR { width: 100%; text-align: right; }

/* Direct margin */
.padding20 { padding: 20px; }
.padding-t5 { padding-top: 5px; }

/* Font family specifics */
/* MonoType Grotesque, the name of font-family of webfonts is 'GrotesqueMTW01-Condense', and direct loading font name 'GrotesqueMT-Condensed' as defined in fonts.css */
.GrotesqueMTCondensed { font-family: 'GrotesqueMTW01-Condense', 'GrotesqueMT-Condensed';  line-height: 1.75em; }
.GrotesqueMTLightCondensed { font-family: 'GrotesqueMTW01-LightCn', 'GrotesqueMT-LightCondensed';  line-height: 1.75em; }

/* TsukuGoPro, the name of font-family of webfonts is 'TsukuGoPro-D', and direct loading font name as 'FOT-TsukuGoPro-D' defined in fonts.css */
.TsukuGoProD { font-family: 'TsukuGoPro-D', 'FOT-TsukuGoPro-D';  line-height: 1.75em; }
.TsukuGoProE { font-family: 'TsukuGoPro-E', 'FOT-TsukuGoPro-E';  line-height: 1.75em; }

/* AtlasGrotesk is loading font name as 'GrotesqueMT-Condensed' defined in fonts.css */
.AtlasGroteskRegular { font-family: 'AtlasGrotesk-Regular';  line-height: 1.75em; }
.AtlasGroteskMedium { font-family: 'AtlasGrotesk-Medium'; line-height: 1.75em; }

.fOrange {
	color: #FFBB00;
}


/*----------------------------------------*/
/*	 Tag based specific styles	*/
/*----------------------------------------*/
html {
	margin: 0px;
	padding: 0px;
	color: white;
	background-color: black;
}

body {
	width: 1000px;
	height: 1000px;
	border: 0px solid white;
}

h1, h2 {
	display: inline-block;
}

/*----------------------------------------*/
/*	 Title Section	*/
/*----------------------------------------*/
/* Subsections in the navi section */
#section_header {
	margin-left: 20px;
	margin-top: 20px;
}

/*----------------------------------------*/
/*	 Navigation Section	*/
/*----------------------------------------*/
li {
	display: inline-block;
	line-height: 16px;
}

.box_button {
	width: 58px;
	height: 14px;
	text-align: center;
	vertical-align: top;
	border: 1px solid white;
}

.box_button:hover, .box_button_selected {
	color: rgb(0,0,0);
	background-color: white;
	cursor: pointer;
}

#section_navi {
	display: inline-block;
	width: 1000px;
	margin-top: 50px;
}

#header_main {
	width: 250px;
	height: 50px;
	line-height: 50px;
	vertical-align: top;
}

#navi_main {
	display: inline-block;
	width: 700px;
	height: 30px;
	line-height: 30px;
	margin-top: 15px;
	border: 0px solid white;
}

#menu_selection {
	height: 15px;
	line-height: 15px;
}

#li_treeID {
	margin-left: 11px;
}

#menu_tree_ID {
	color: rgb(255, 200, 0);
}


#menu_item_graph {
	color: black;
	border: 1px solid white;
	background: #ffffff;
}


#spacer {
	margin-left: 5px;
	margin-right: 5px;
	width: 1px;
	height: 30px;	
	
}

.menu_item_select {
	width: 59px;
	height: 15px;
	vertical-align: bottom;
}

.menu_item {
	display: inline-block;
	width: 40px;
	text-align: center;
	border: 0px solid white;
}

.menu_item_control_sound {
	width: 74px;
	text-align: center;
	margin-right: 4px;
	border: 1px solid white;
}

.menu_item_control:hover, .menu_item_control_sound:hover, menu_item_selected {
	color: black;
	border: 1px solid white;
	background: #ffffff;
	cursor: pointer;
}

span[selected] {
	color: black;
	border: 1px solid white;
	background: #ffffff;
}

#li_place {
	width: 230px;
}

#li_sound {
	width: 78px;
	margin-left: 30px;
}

#li_info {
	margin-left: 30px;
}


/*----------------------------------------*/
/*	 Graph Section	*/
/*----------------------------------------*/
/* Main Graph */
#section_graph {
	width: 1000px;
	margin-top: 135px;
}

#graph_timecodes
{
	width: 979px;
	margin-left: 21px;
	border: 0px dotted white;
}

.graph_timecode
{
	display: inline-block;
	width: 100px;
	font-size: 8px;
	font-family: FSpx, Monaco, sans-serif;
	line-height: 2em;
}

#graph_canvas
{
	width: 1000px;
	height: 200px;
	color: white;
	border: 0px dotted white;
}

/*----------------------------------------*/
/*	 Controller Section	*/
/*----------------------------------------*/
.timecode_mark {
	margin-right: 5px;	
	vertical-align: middle;
}

#section_controller {
	margin-top: 95px;
	width: 1000px;
}

#controllers {
	display: inline-block;
}

#controller_timecodes
{
	width: 750px;
	margin-left: 21px;
	font-size: 8px;
	font-family: FSpx, Monaco, sans-serif;
}

.controller_timecode {
	display: inline-block;
	width: 120px;
	height: 15px;
	line-height: 2em;
}

#controller_canvas
{
	position: relative;
	display: inline-block;
	width: 740px;
	height: 40px;
	margin-top: 8px;
	border: 0px dotted white;
}

#table_graph_info {
	display: inline-block;
	vertical-align: top;
	margin-left: 40px;
	padding: 0px;
	
	font-size: 8px;
	font-family: FSpx, Monaco, sans-serif;
	line-height: 2em;
	text-align: left;
	border-collapse: collapse;
}

#tr_treeID {
	border-bottom: 1px solid white;
}

#info_treeID {
	width: 70px;
	margin: 0px;
	padding: 0px;
}

#info_sensors {
	text-align: left;
}

/* Range Controller */
#controller_canvas {
	cursor: pointer;
}

#controller_range {
	display: block;
	position: absolute;
	width: 10px;
	height: 40px;
	cursor: pointer;
	background-color: rgba(200,0,20,0.5);
}


#section_selection {
	display: none;
	position: absolute;
	top: 240px;
	width: 100%;
	height: 100%;
	background-color: rgba(80, 80, 80, 0.8);
}

#table_selection {
	margin-top: 50px;
	margin-left: 50px;
}

#table_selection_col1, #table_selection_col2 {
	width: 500px;
}

#closebox {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 21px;
	height: 21px;
	background-image: url("../images/closebox.png");
}

.tbutton {
	color: #ffffff;
}

.tbutton:hover {
	color: rgb(255, 200, 0);
	cursor: pointer;
}