efficiencyWidget.css

/*CSS Reset*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	height:100%;
	width:100%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*Enforce more intuitive box-sizing, suppress selection, demand default cursor*/
* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	-webkit-user-select:none;
	-moz-user-select:none;
	cursor:default;
}

input, select, button{
	outline:none;
}

sup {font-size:small; vertical-align:super;}

sub {font-size:small; vertical-align:sub;}

body{
	font-family: 'Raleway', sans-serif; 
	font-size:14px; 
	background-color:#333333; 
	color:#FFFFFF;
	margin-left:0px;
}

input.widgetInput:invalid{
	color: #FF0000;
	border: 2px solid #FF0000;
}

/*links//////////////////////////////////////////////////*/
a{
	cursor:pointer;
}
/*branding///////////////////////////////////////////////*/

div#branding{ 
	height:6em; 
	border-color:#999999; 
	border-left-style:solid; 
	border-bottom-style:solid; 
	border-left-width:5px; 
	border-bottom-width:5px; 
	border-bottom-left-radius:25px; 
	background-color:#333333; 
	margin-bottom:1em; 
	padding-bottom:5px; 
}

img#logo{
	opacity:0.5625; 
	padding-left:1em; 
	margin-bottom:5px;
	height:5em;
	width:5.8em;
}

h1#title{
	position:relative; 
	display:inline; 
	font: 500% Raleway; 
	top:-10px; 
	margin-left:10px; 
	color:#999999;
}

/*graph///////////////////////////////////////////////////////*/
/*container div*/
#graphDiv{
	margin-bottom: 1em;
	height: 50em;
	width: 70%;
	display:inline-block;
}

/*axes and labels*/
.dygraph-axis-label{
	color: #999999;
	font-size: 120%;
}

.dygraph-legend{
	/*background-color:#333333 !important;*/
	background: transparent !important;
	font-size:200% !important;
	width: 6.5em !important;
	left: auto !important;
	right: 0px !important;
}

.dygraph-xlabel{
	margin-top:5px;
}

/*buttons///////////////////////////////////////////////////*/
.linkWrapper{
	margin-bottom:1em;
}

.standardButton{
	background: #4C4C4C; 
	color: #FFFFFF;
	border-color: #333333; 
	border-radius: 5px;
    display: inline;
    font-family: 'Raleway', sans-serif;
    font-size:100%;
    padding:1em;
    cursor: pointer;
}

.standardButton:hover{
	background: #777777;
}

/*widgets////////////////////////////////////////////////////*/
div.widgetWrapper{
	overflow:scroll;
	white-space: nowrap;
}

div.widget{
	text-align:center;
	padding: 1em;
	display: inline-block;
	vertical-align: top;
	min-width:-webkit-max-content;
	min-width:-moz-max-content;
	margin: 1em;
	background-color: #222222;
	border-radius: 1em;
}

h2.widgetTitle{
	color: #999999;
	font-size: 200%;
	padding-bottom: 0.25em;
	margin-bottom: 0.25em;
	border-bottom: 1px solid #999999;
	text-align: center;
}

input.widgetInput, input#filename{
	background-color: #444444;
	border-radius: 5px;
	color: #CCCCCC;
	border:none;
	font-size:200%;
	padding: 0.5em;
	width: 4em;
	text-align: right;
	font-family: 'Raleway', sans-serif;
	cursor: pointer;
}

/* http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box */
input.widgetInput::-webkit-outer-spin-button,
input.widgetInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

label.inputLabel{
	font-size: 200%;
	color: #999999;
}

div.widgetResult, div.splitDetector{
	font-size: 200%;
	color: #FFFFFF;
	border-radius: 5px;
	display:inline-block;
	padding:0.5em;
	-webkit-transition: width 0.3s, padding 0.3s, opacity 0.3s; 
    -moz-transition: width 0.3s, padding 0.3s, opacity 0.3s;
}

div#tripleEffWidgetResult{
	background-color: #9b59b6;
}

div.splitDetector{
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(-45deg, #449944 50%, #2980b9 50%);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(-45deg, #449944 50%, #2980b9 50%);
}

div.leftDiv{
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width:-webkit-max-content;
	width:-moz-max-content;
}

.widgetInput, .widgetResult, .splitDetector{
	margin-bottom:0.25em;
}

/*Control Panel/////////////////////////////////////////////////////*/
div#controlPanel{
	float:right;
	width:28%;
	min-width:-webkit-max-content;
	min-width:-moz-max-content;
	background-color: #222222;
	border-radius: 1em;
	padding: 1em;
}

div.detectorSwitch, a#savePlot{
	display:inline-block;
	padding:1em;
	height:3em;
	border-radius: 5px;
	background-color: #444444;
	cursor: pointer;
	-webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
}

a#savePlot{
	color:#FFFFFF;
	text-decoration: none;
	font-size: 100%;
	padding:1em;
}

input#filename{
	width:15em;
	text-align: left;
	font-size: 100%;
	padding:1em;
	margin:0px;
}

select{
	background-color: #444444;
	border-radius: 5px;
	color: #CCCCCC;
	border:none;
	font-size:200%;
	padding: 0.5em;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	cursor: pointer;
	margin:0px;
    -webkit-appearance:none;
    -moz-appearance:none;
 	text-indent: 0.01px;
    text-overflow: '';
    appearance:none;
}

select#HPGeDistanceSwitch{
	width:3.5em;
}

select#nHPGeSwitch{
	width:3em;
}

div#HPGeControl, div#LaBr3Control{
	overflow:hidden;
	-webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
}

input#yMin, input#yMax{
	width: 3em;
}

/*img holder for savable data///////////////////////////////////////*/
img#pngDump{
	display:none;
}

/*popup window////////////////////////////////////////////////*/
.tempDialog{
	font-family: 'Raleway', sans-serif; 
	z-index:10; 
	position:fixed; 
	text-align:center; 
	opacity:0; 
	transition:opacity 0.5s; 
	-moz-transition:opacity 0.5s; 
	-webkit-transition:opacity 0.5s; 
	background:rgba(0,0,0,0.8); 
	border: 5px solid; 
	border-radius:10px;
	top:100px;
	padding:2em;
	max-height: 800px;
	overflow:scroll;
}

.tempDialog a{
	color: #9999FF;
}

/*Footer and footer-related styles////////////////////////////////////////////////////*/
div#footer{
	background-color: #999999;
	text-align: center;
	padding:2em;
	color:#333333;
	border-top:1px solid #000000;
	height:6em;
	line-height: 1.2;
}

div#push{
	height:6em;
}

div#wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -6em;
	padding-left:1em;
	padding-right: 1em;	
}