/*****************************/
/* old demo.css styles begin */
/*****************************/

/* Segoe UI */
/* define here for used weights & styles so that
font-weight & style declarations work for this + the fallback
web font */

@font-face {
   font-family: 'Segoe UI';
   src: local('Segoe UI');
   font-weight: normal;
}

@font-face {
   font-family: 'Segoe UI';
   src: local('Segoe UI Italic');
   font-weight: normal;
   font-style: italic;
}

@font-face {
   font-family: 'Segoe UI';
   src: local('Segoe UI Bold');
   font-weight: bold;
}


@font-face {
   font-family: 'Segoe UI';
   src: local('Segoe UI Light');
   font-weight: 300;
}


html {
   min-height: 100%;
   width: 100%;
}


body {

   height: 100%;
   margin: 0;
   background-repeat: no-repeat;
   background-attachment: fixed;


   font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 1.428571429;
   background-color: #fcfcfc;
   color: #333;

   background-color: #fafafa;

}

pre,
.syntaxhighlighter * {
   font-family: Consolas, Menlo, 'DejaVu Sans Mono', 'Courier New', monospace !important;
   font-size: 13px;
}

a
{
   color: #555;
}
a:hover
{
   color: #f60;
   color: #D0B800;
}

a > img
{
   border-style: none;
}

.githubwrapper {
padding: 20px;
}

.github {
   color: rgb(226, 181, 0);
   height: 60px;
}
.github:hover {
   color: #fff;
}
.github:visited {
   color: rgb(226, 181, 0);
}

section
{
   margin: 3em 5em 0 3em;

}


header {
   position: relative;
   width: 100%;
   height: 103px;
   background-color: #1b1b1b;
}

#header_inner
{
   position: relative;
   min-width: 960px;
   max-width: 64%;
   height: 100%;
   margin:auto;
   padding: 0;
   color: #666;
   text-align: right;
}

#demo_title
{
   font-size: 27px;
   font-weight: bold;
   color: rgb(95, 95, 95);
   display: inline-block;
   text-align: right;
   line-height: 11px;
   padding-top: 32px;
}
#demo_title > span
{
   display: block;
}
#demo_title > span:first-child
{
   font-size: 45px;
   line-height: 38px;
}

.navbar-brand {
    position: absolute;

    top: 21px;
    left: 0px;
    text-decoration: none;
}

/*.navbar-brand > span {
   font-size: 52px;
   position: relative;
   top: -13px;
   text-decoration: none;
   border: none;
}*/

.navbar-brand > span.fontFace {
   font-size: 52px;
   position: relative;
   top: -19px;
   text-decoration: none;
   border: none;
}

.navbar-brand > span.fontFaceDemo {
   font-size: 35px;
   font-family: "Play", sans-serif;
   position: absolute;
   top: 33px;
   left: 199px;
   color: #D2C501;
}

.navbar-brand > span > span:first-of-type {
  font-family: 'Play', sans-serif;
  font-weight: bold;
  color: rgb(162, 162, 162);
  padding: 0 0 0 6px;
}
.navbar-brand > span > span:last-of-type {
  font-family: 'Play', sans-serif;
  color: rgb(240, 240, 240);
}

.demo_links
{
   text-align: center;
}
.demo_links > div > a
{
   padding: 0 2em 0 0;
   font-size: 19px;
   text-decoration: none;
   color: #f60;
   color: #d0b800;
}


#demo_body,
.demo_links
{
   width: 850px;
   height: 100%;
   margin: 4em auto;
   position: relative;
}

.notextselect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;

   cursor: default;
}




/**** dual-color boxes ***/

.box
{
   width: 366px;
   margin: 0 19px;
   border-radius: 3px; /* same as the heading and the content boxes have*/
   box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
   position: relative;
   word-break: break-all;
}


.box_left
{
   float: left;
}

.box_right
{
   float: right;
}

.box_centered
{
   margin: 0 auto;
}


.box_heading
{
   /**** grey *****/
   background-color: #CCC;
   /*background-image: -webkit-linear-gradient(top, #DDD, #ADADAD);
   background-image:    -moz-linear-gradient(top, #DDD, #ADADAD);
   background-image:     -ms-linear-gradient(top, #DDD, #ADADAD);
   background-image:      -o-linear-gradient(top, #DDD, #ADADAD);
   background-image:         linear-gradient(to bottom, #DDD, #ADADAD);*/
   /*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dddddd', endColorstr='#adadad');*/


   color: #FFF;
   color: #777;
   font-size: 16px;
   font-weight: normal;

   /*border: 1px solid #7C95A4;*/
   border-style: solid;
   border-width: 1px;
   border-bottom: solid 2px #ffde00;
   /*border-bottom: 1px solid #839CAB;*/
   border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;

   padding: 8px 18px 8px 12px;
}

.box_content
{
   position: relative;

   color: #333;
   font-size: 13px;
   line-height: 18px;

   background-color: #e9f1f4;
   background-color: #FFE9DA;
   background-color: #f4f4f4;
   /*
   border-style: solid;
   border-width: 1px 1px 2px;
   border-color: #E9f1f4 #d8dee2 #d8dee2;
   */
   border-style: solid;
   border-width: 1px;
   border-color: #E9f1f4 #A0A0A0 #A0A0A0;

   /*border-top: 1px solid #E9f1f4;*/
   border-radius: 0 0 3px 3px;
   -webkit-border-radius: 0 0 3px 3px;

   padding: 1.2em;
}


.box_caption
{
   margin: 0;
   margin-bottom: 4px;
}
.box_second
{
   margin: 0.5em 0 0 0;
   margin-bottom: 4px;
}

.button
{

   background-color: #D9D9D9;
   background: -webkit-linear-gradient(top, #fff, #e1e1e1);
   background:    -moz-linear-gradient(top, #fff, #e1e1e1);
   background:     -ms-linear-gradient(top, #fff, #e1e1e1);
   background:      -o-linear-gradient(top, #fff, #e1e1e1);
   background:         linear-gradient(to bottom, #fff, #e1e1e1);
   /*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#e1e1e1');*/

   color: #111;

   font-weight: 600;
   text-align: center;
   padding:0 13px;
   margin-left: 1px;


   border: none;
   -webkit-border-radius: 4px;
   border-radius: 4px;


   border: 1px solid rgb(121, 121, 121);

   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;

   padding: 3px 6px;
   margin: 2px;
}


.button:hover
{
   background-color: #777;
   background: -webkit-linear-gradient(top, #e8e8e8, #8d8d8d);
   background:    -moz-linear-gradient(top, #e8e8e8, #8d8d8d);
   background:     -ms-linear-gradient(top, #e8e8e8, #8d8d8d);
   background:      -o-linear-gradient(top, #e8e8e8, #8d8d8d);
   background:         linear-gradient(to bottom, #e8e8e8, #8d8d8d);
   /*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e8e8e8', endColorstr='#8d8d8d');*/

   color: #fff;

   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
}


.button:disabled
{
   background-color: #ddd;

   color: #aaa;
}

.box_content_alt_1
{
   height: 210px;
}

.status_line
{
   clear: both;
   left: 0;

   font-size: 90%;
   color: #777;
   margin: 1em 0 0 0;
}

.statusline_outside
{
}

/** info box for the demo ***/

.info_bar
{
   clear: both;
    /*float: right;*/
   width: 80%;

   background-color: #DFF7FB;
   background-color: #f4f4f4;
   color: #888;

   border-radius: 3px;

   font-size: 13px;

   padding: 1em 2em;
   margin: 2em auto 4em auto;

   line-height: 16px;
   box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
}

.info_bar ul

{
   line-height: 16px;
   padding-left: 3em;
}

.info_bar li
{
   /*list-style-type: decimal;*/
   list-style-type: initial;
   background-image: none;
   padding-left: 0;
   margin-bottom: 10px;
   width: 90%;
}

.info_bar_heading
{
   margin-bottom: 25px;
}

/*** for position on all demos with a central demo box ****************/

#helpButton
{
   position: absolute;
   left: 103%;
   margin: 0em 0 0 0;
}


.flatButton
{
   background-color: #694545;


   font-weight: 600;
   text-align: center;

   padding: 5px 9px;
   margin: 2px;


   border: none;
   -webkit-border-radius: 4px;
   border-radius: 4px;

   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;


   background-image: -webkit-linear-gradient(top right, #F0F0F0, #CACACA);
   background-image:    -moz-linear-gradient(top right, #F0F0F0, #CACACA);
   background-image:     -ms-linear-gradient(top right, #F0F0F0, #CACACA);
   background-image:      -o-linear-gradient(top right, #F0F0F0, #CACACA);
   background-image:         linear-gradient(top right, #F0F0F0, #CACACA);
   /*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#f0f0f0', endColorstr='#cacaca');*/
}


flatButton:hover
{
   background-color: #777;
   color: #fff;
}


/** oracle demos error overlay formatting */

.oracle_demo .error_overlay
{
   width: 100%;

   position: absolute;
   top: 10%;

   background-color: rgba(0, 0, 0, 0.8);
   color: #fff;

   padding: 2em 0;
}

.oracle_demo .error_overlay_content_block
{
   padding: 0 2em;
}

.oracle_demo #working_version
{
   margin: 2em 1em 1em;
   padding: 1em;
   border: 1px solid white;
}
.oracle_demo #working_version a
{
   color: #f60;
}
.oracle_demo #working_version a:hover
{
   color: #C04D00;
}
/*** generally used layout hacks ***/

.clearboth
{
   clear: both;
}
.spacer_20
{
   height: 20px;
}

/***************************/
/* old demo.css styles end */
/***************************/



*
{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}


html
{
   margin: 0;
   padding: 0;
   height: 100%;
}

body
{
   background-color: #000;
   color: #fff;
   font-family: 'Quattrocento Sans', sans-serif;
/*   background-image: -moz-linear-gradient(to bottom left, #000, #bb4b00);
   background-image: -webkit-linear-gradient(top right, #000, #bb4b00);
   background-image: -o-linear-gradient(top right, #000, #bb4b00);*/
   width: 100%;
   min-height: 100%;
   /*min-height: 900px;*/
   position: relative;
   margin: 0;
}

a > img
{
   border-style: none;
}


#container
{
   /*min-height: 1200px;*/
   position: relative;
   /*width: 100%;*/
   min-width: 1200px;
}

.background_gradient
{
   /*background-image: -moz-linear-gradient(top right, #7F2F09, #F54D00);
   background-image: -webkit-linear-gradient(top right, #7F2F09, #F54D00);
   background-image: -o-linear-gradient(top right, #7F2F09, #F54D00);
   background-image: linear-gradient(top right, #7F2F09, #F54D00);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54d00', endColorstr='#7f2f09',GradientType=1 );*/


   background-image: -moz-linear-gradient(top right, #CACACA, #5E5E5E);
   background-image: -webkit-linear-gradient(top right, #CACACA, #5E5E5E);
   background-image: -o-linear-gradient(top right, #CACACA, #5E5E5E);
   background-image: linear-gradient(to top right, #CACACA, #5E5E5E);
}



header {
   position: relative;
   width: 100%;
   height: 87px;
}

#header_inner
{
   position: relative;
   width: 960px;
   height: 87px;
   margin:auto;
   padding: 0;
   color: #666;

}

/*
#demo_title
{
   font-size: 24px;
   position: absolute;
   left: 330px;
   bottom: 12px;
   font-family: 'open_sansregular', sans-serif;
   color: #F1f1f1;
}
*/

#dashboard_01_table
{
   width: 920px;
   margin: 3em auto;
   border-collapse: separate;
   border-spacing: 10px;
}

#dashboard_01_table td
{
   /*min-width: 400px;*/
   height: 230px;
}
#dashboard_02_table td
{
   width: 400px;
   height: 230px;
}
#dashboard_02_table
{
   /*width: 1200px;*/
   -webkit-transform: translateY(-20px) scale(0.9);
   transform: translateY(-20px) scale(0.9);
   margin: 3em auto;
   border-collapse: separate;
   border-spacing: 10px;

}

.widget
{
   width: 100%;
   height: 100%;
   position: relative;
   overflow: auto; /* div adjusts to height of float content */

}

.widget_content_container
{
   width: 100%;
   height: 100%;
   padding: 20px;
   position: relative;
   overflow: hidden;
   /*box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);*/
}

.widget_label
{
   font-size: 22px;
   font-weight: bold;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
   width: 100%;
   color: rgba(248, 248, 248, 0.88);
   border-bottom: 1px solid #d0b800;
   margin: 0 0 1em 0;
   padding: 0 0 0.2em 0.1em;
}


.highlighted
{
   box-shadow: 0px 0px 8px 2px rgba(255, 255, 255, 0.4);
}

/**** simple numeric indicator ****/

.simple_indicator
{
   overflow: hidden;
}
.simple_indicator .widget_content_container
{
   overflow: hidden;
}

.label
{
   font-size: 20px;
}

.big_number
{
   font-size: 80px;
   /*font-weight: bold;*/
   /*color: #F8E15A;*/
   margin: 0.1em 0em 0.1em 0.3em;
   float: left;
}

.number_container
{
   display: inline-block;
   width: 2.8em;
   text-align: right;
}

.sublabel
{
   font-size: 20px;
}

.small_number
{
   font-size: 32px;
   margin: 0.5em 0em 0;
   float: right;
}

.change_percent
{
   display: inline-block;
   width: 2.2em;
   text-align: right;
   padding-right: 0.2em;
}

.simple_indicator>div>div>div
{
   width: 50%;
   float: left;
}

.small_indicator
{
   margin: 0 0.5em 1em 0.5em;
}


.clearboth
{
   height: 1px;
   clear: both;
}


.valueGreen
{
   color: #fff;
}

.valueRed
{
   color: #f60;
}

.highlight
{
   font-size: 20px;
   color: green;
}
.normal
{
   font-size: 16px;
   color: #eee;
}


/***** bar chart ****/

.bar_chart
{
   overflow: hidden;
}
.bar_chart .widget_label
{
   margin-bottom: 0.5em;
}

.bar_chart_wrapper
{
   overflow: hidden;
   padding: 0 0 0.5em 1em;
}

.bar_chart_scale_container
{
   float: left;
   width: 50px;
   margin-bottom: 1em;
}
/*.bar_chart_scale_container>div
{
   width: 80%;
   height: 25%;
}*/

.bar_chart_scale_max_value_container
{
   float: right;
   width: 70%;
   border-top: 1px solid #fff;
   position: relative;
}
.bar_chart_scale_max_value_container>div
{
   position: absolute;
   right: 0px;
}

/*.bar_chart_scale_container
{
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}*/

.bar_chart_container
{
   float:left;
   overflow: visible;
   width: 240px;
   border-bottom: 1px solid white;
}

.bar_chart_element
{
   position: relative;
   float: left;
   width: 50px;
   /*background-color: #888;*/
   margin: 0 1.4em 0 0;
}

.bar_chart_element:first-of-type
{
   margin-left: 1em;
}

.bar_chart_element_label
{
   position: absolute;
   bottom: -20px;
}

.bar_chart_element_bar
{
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 80%;
   /*background-color: #888;*/

   transition: all 0.5s ease;
   -ms-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
}


/** hundred bar ****/

.hundred_bar_bar
{
   width: 300px;
   height: 50px;
   margin: 2em 0 0 0.5em;

}

.hundred_bar_section
{
   float: left;
   height: 100%;
   position: relative;
   text-align: center;

   transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;

}

.hundred_bar_section_value
{
   position: relative;
   top: 50px;
}

.hundred_bar_legend
{
   margin: 1.8em 0 0 6em;
}
.hundred_bar_legend_entry
{
   float: left;
   width: 3em;
   margin-right: 1em;
   position: relative;
   text-align: center;
}
.hundred_bar_legend_label
{
   position: relative;
   top: 1.3em;
}

/**** pie chart ***/

#dashboard_01_table #pie_td
{
   height: 470px;
}
#dashboard_02_table #pie_td_02
{
   height: 470px;
   overflow: hidden;
}

.centered
{
   display: block;
   margin: 0 auto;
}

.pie_chart_content_container
{
   margin: 1em 0 0 1em;
}
.widget.piechart
{
   overflow: hidden;
}

/**** bullet graph ****/

.bullet_graph .widget_label
{
   margin-bottom: 0.8em;
}
.container
{
   position: relative;
   margin: -0.5em 0 0 7em;
   padding: 0;
   text-align: left;
   width: 250px;
}

/*	BULLET GRAPH */
.abox-wrap
{
   position: relative;
   width: 200px; /* move this to the bindings & JS - FIXME */
   height: 21px;
   margin: 0 0 0.5em 0;
}

.abox
{
   height: 20px;
   float: left;
   transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
}

.target
{
   position: absolute;
   height: 20px;
   width: 2px;
   top: 0;
   background-color: #f60;

   transition: all 0.5s ease;
   -ms-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
}

/* ONE SEGMENT ONLY */
.actual
{
   position: absolute;
   height: 8px;
   left: 0px;
   top: 6px;
   background-color: #444;

   transition: all 0.5s ease;
   -ms-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
}

.mylabel
{
   position: absolute;
   height: 20px;
   width: 70px;
   left: -75px;
   top: 0px;
   font-size: 14pt;
}

.scale-tb1 {
   width: 200px;
   height: 10px;
   position: absolute;
   bottom: -20px;
   left: 0px;
   border-top: 1px solid #8f8f8f;
}

/*	SCALE MARKS */
.sc
{
  position: absolute;
  height: 7px;
  width: 1px;
  top: 0px;
  background-color: #eee;
}
.sc21 {  left: 0px;  }
.sc22 {  left: 25%;  }
.sc23 {  left: 50%;  }
.sc24 {  left: 75%;  }
.sc25 {  left: 100%;  }

/*	SCALE TEXT */

.cap
{
   position: absolute;
   top: 10px;
   right: -1em;
   width: 3em;
   font: 8pt Arial, sans-serif;
   text-align: center;
   color: #eee;
}



/****** activity stream ****/

#activity_stream
{
   height: 950px; /* 4 * cell height + 3 * cell spacing */
}
#activity_stream_02
{
   height: 710px; /* 3 * cell height + 2 * cell spacing */
}

.activity_stream_content_container
{
   overflow: hidden;
}
#activity_stream .activity_stream_window
{
   height: 860px;
}
#activity_stream_02 .activity_stream_window
{
   height: 610px;
}
.activity_stream_window
{
   overflow-y: scroll;
   overflow-x: hidden;
   /*border-top: 1px solid #fff;*/
   /*box-shadow: inset 0px 0px 8px 2px rgba(0, 0, 0, 0.15);*/
   margin-bottom: 1em;
}

.activity_event
{
   width: 100%;
   min-height: 80px;
   overflow: hidden;
   /*border-bottom: 1px solid #ddd;*/
}
.activity_event_bottom_border
{
   clear: both;
   width: 80%;
   height: 1px;
   margin: 5px 0 5px 2em;
   border-bottom: 1px solid #ddd;
}
.activity_timestamp
{
   margin: 4px 1em 0 0;
   text-align: right;
   font-size: 14px;
}
.activity_text
{
   margin: 10px 0 0 1em;
   float: left;
   width: 210px;
}

.activity_space
{
   clear: both;
   height: 1em;
}

.activity_threshold_slider_wrapper
{

}
.activity_threshold_slider_wrapper>span
{
   display: inline-block;
}
.revenue_threshold_value,
.unit_threshold_value
{
   float: right;
}

.activity_threshold_slider
{
   margin: 0.2em 0 0.7em;
}

.activity_content
{
   position: relative;
   width: 95%;
}
.activity_line
{
   height: 1.3em;
}

.event_product,
.event_region
{
   float: left;
}
.event_units,
.event_revenue
{
   float: right;
}

.activity_image
{
   position: absolute;
   right: -50px;
   top: 0px;
   height: 50px;
   width: 50px;
}

/*** status line ****/
.dashboard_status_line
{
   position: absolute;
   font-size: 14px;
   color: #444;
   bottom: 5px;
   left: 5px;
}


/*** SVG stylings ***/

.color_01
{
   fill: #444;
}
.color_02
{
   fill: #888;
}
.color_03
{
   fill: #CCC;
}


/***************************
 *    Arduino Demo         *
 ***************************/

#dashboard_03
{
   height: 1050px; /* hack so this displays nicely on 1920 x 1200 px fullscreen */
   /*height: 100%;*/
}

#arduino_table_wrapper
{
   display: table;
   width: 100%;
   height: 100%;
}

#arduino_cell_wrapper
{
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   height: 100%;
   width: 100%;
}

#arduino_elements_wrapper
{
   display: inline-block;
   width: 700px;
   /*border: 1px solid white;*/
}
.arduino_element
{
   width: 250px;
   /*border: 1px solid blue;*/
}
#arduino_left_element
{
   float: left;
}
#arduino_right_element
{
   float: right;
}
.arduino_number
{
   font-size: 130px;
   font-weight: 600;
   text-align: right;
}
.arduino_led
{
   width: 200px;
   height: 70px;
   margin: 2em auto 2em;
   border: 1px solid #612700;
   background-color: #5D2500;
}
.arduino_led_highlighted
{
   border: 1px solid #f60;
   background-color: #FF6F0E;
   box-shadow: 0px 0px 20px 2px rgba(255, 111, 14, 0.7);
}
.arduino_button
{
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 2px solid #B54900;
   background-color: #CA590D;
}
/*.arduino_button:hover
{
   border-color: #C75000;
   background-color: #D85F0E;
}*/
.arduino_button_active
{
   border-color: #f60;
   background-color: #f60;
   box-shadow: 0px 0px 12px 2px rgba(255, 102, 0, 0.5);
}
arduino_button.arduin_button_active:hover
{
   border-color: #f60;
   background-color: #f60;
   box-shadow: 0px 0px 12px 2px rgba(255, 102, 0, 0.5);
}


#helpButton
{
   position: relative;
   left: 90%;
   margin-bottom: 5em;
}

.openController {
   font-size: 24px;
   color: rgb(226, 181, 0);
}
