/* $Id $ */

.color0 { background-color: @color0; color: @color0-text; }
.color1 { background-color: @color1; color: @color1-text; }
.color2 { background-color: @color2; color: @color2-text; }
.color3 { background-color: @color3; color: @color3-text; }
.color4 { background-color: @color4; color: @color4-text; }

html { font-size: 14px; }
body { background-color: @pagebackground; font-size: 1rem; }
body,p,div { font-family: @fonts; }
input,button,select { font-family: @fonts; }
body,div,p,h1,h2,h3,ul,li,canvas { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

h1 { font-size: 2rem; font-weight: bold; }
h2 { font-size: 1.5rem; }

.gridster { margin: 0 auto; }
.gridster .gs-w { cursor: pointer; overflow: hidden; background-color: @color4; color: @color4-text; }
.gridster ul { list-style-type: none; }

.widget { 
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-flex-direction: column;
	   -moz-flex-direction: column;
            flex-direction: column;
	-webkit-align-items: center;
	   -moz-align-items: center;
	        align-items: center;
	-webkit-justify-content: center;
	   -moz-justify-content: center;
            justify-content: center;
	text-align: center;
	min-height: 100%; height: 100%; width: 100%;
}

.widget.nodata { background-color: #101010 !important; }

.widget-clock { }
.widget-clock h1 { font-size: 4rem; font-weight: bold; line-height: 1em; }
.widget-clock div#date { display: block; font-size: 2rem; }

.widget-image { }
.widget-image h1 { font-size: 2rem; font-weight: bold; }

.widget-currentweather { }
.widget-currentweather h1 { flex: 2 0 0; font-size: 2rem; line-height: 1.2em; margin: 0 0 6 0; overflow: hidden; }
.widget-currentweather div#temperature-ico { flex: 4 0 0; font-size: 4rem; font-weight: bold; line-height: 1.2em; }
.widget-currentweather div#temperature-val { flex: 4 0 0; font-size: 4rem; font-weight: bold; line-height: 1.2em; }
.widget-currentweather div#temperature-val:after { content: "\00b0"; }
.widget-currentweather ul { flex: 2 0 0; font-size: 1rem; line-height: 1.5em; list-style: none; list-style-type: none; width: 100%; }
.widget-currentweather li { width: 33%; float: left; }
.widget-currentweather li:last-child { float: left; }

.widget-camera { }
.widget-camera .controls { color: #ffffff; font-size: 2rem; position: absolute; top: 10px; left: 10px; }
.widget-camera .controls .control { float:left; margin-left: 16px; }
.widget-camera .overlay { clear: both; font-size: 0.8rem; color: #ffff00; position: absolute; left: 10px; bottom: 10px; }

.widget-slideshow { }
.widget-slideshow .controls { color: #ffffff; font-size: 2rem; position: absolute; top: 10px; left: 10px; }
.widget-slideshow .controls .control { float:left; margin-left: 16px; }
.widget-slideshow .overlay { clear: both; font-size: 0.8rem; color: #ffff00; position: absolute; left: 10px; bottom: 10px; }

.widget-rssfeed { }
.widget-rssfeed h1 { font-size: 2rem; font-weight: bold; line-height: 1.2em; margin: 0 0 8 0; }
.widget-rssfeed #wrapper { margin: 8 8 8 8; }
.widget-rssfeed p { font-size: 1rem; line-height: 1.2em; margin: 0 0 20 0; text-align: left; }
.widget-rssfeed img { float: left; }
.widget-rssfeed a { text-decoration: none; color: inherit; }

.widget-level { }
.widget-level h1 { font-size: 1.5rem; font-weight: bold; line-height: 1em; overflow: hidden; }
.widget-level h2 { font-size: 1.5rem; font-weight: normal; line-height: 1.2em; overflow: hidden; margin-top: 0.5em; }
.widget-level.switch h1 { font-size: 2rem; }
.widget-level > .ui-slider { width: 80%; margin-top: 0.5rem; height: 3rem; }
.widget-level > .ui-slider .ui-slider-handle { top: -0em; height: 3rem; width: 2rem; }
.widget-level .levelbuttons { }
.widget-level .levelbuttons button { width: 3rem; height: 1.25rem; margin-right: 8px; }
.widget-level #level { margin-top: 0.5rem; font-size: 1.5rem; }
.widget-level #level:after { content: "%"; }
.widget-level.active { background-color: @color4 !important; color: @color4-text; }
.widget-level.update-pending { background-color: @color1 !important; color: @color1-text; }

.widget-scene { vertical-align: middle; }
.widget-scene h1 { font-size: 2rem; line-height: 1em; }
.widget-scene .scenecontrol { }
.widget-scene.active { background-color: @color4 !important; color: @color4-text; }
.widget-scene.update-pending { background-color: @color1 !important; color: @color1-text; }

.widget-verasensor { }
.widget-verasensor h1 { font-size: 2rem; font-weight: bold; }

.widget-roomstatus { }
.widget-roomstatus h1 { font-size: 2rem;  }
.widget-roomstatus ul { list-style: none; list-style-type: none; }

.widget-verathermostat { }
.widget-verathermostat h1 { font-size: 2rem; font-weight: bold; }
.widget-verathermostat #temperature { font-size: 4rem; }
.widget-verathermostat #setpoints { font-size: 1rem; margin: 12 0 0 0; width: 90%; }
.widget-verathermostat #setpoints #heatsp { float: left; width: 30%; text-align: left; }
.widget-verathermostat #setpoints #mode { float: left; width: 40%; font-size: 1rem; text-align: center; }
.widget-verathermostat #setpoints #coolsp { float: right; text-align: right; }
.widget-verathermostat .therm-heating { color: red; }
.widget-verathermostat .therm-cooling { color: blue; }
.widget-verathermostat .therm-fanonly { color: #003366; }
