/** 
 * screen-layout-main.css
 * 
 * This file contains overrides for the portrait,
 * landscape and tablet layouts 
 */
header,
footer {
	z-index:100;
	position: fixed }
.layout-portrait header {
	width:100%;
	padding-bottom: 50px;
	background: rgba(0,0,0,0.75);
	background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.75)), color-stop(100%, rgba(0,0,0,0)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
} 
.layout-portrait footer{
	width:100%;
	bottom:0;
	padding-top: 50px;
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.layout-landscape header {
	height:100%;
	min-width: 20%;
	max-width: 75%;
	left:0;
	bottom:0;
	padding-right: 50px;
	background: rgba(0,0,0,0.75);
	background: -moz-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.75)), color-stop(100%, rgba(0,0,0,0)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
} 
.layout-landscape footer{
	height:100%;	
	right:0;
	padding-left: 50px;
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.75)));
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
}

/**
 * Font sizes
 * ---------------------------------------- */
.layout-tablet.font-x-small {
	font-size: 100%}
.layout-tablet.font-small {
	font-size: 150%}
.layout-tablet.font-medium {
	font-size: 200%}
.layout-tablet.font-large {
	font-size: 250%}
.layout-tablet.font-x-large {
	font-size: 350%}
.layout-tablet.font-xx-large {
	font-size: 500%}

/**
 * Photo-related classes
 * ---------------------------------------- */

/**
 *  Event classes/colors
 * ---------------------------------------- */
#events-table {
	height: 100%;
}
#events-table td {
	padding: 15px; 
	vertical-align: top;
}
.layout-portrait .events .day-container {
	padding: 15px 0 0 15px;
}
.layout-portrait .events {
	margin-bottom: 20px;
}
.layout-landscape .events {
	overflow: scroll;
}
.events .day-container {
	margin-top: 20px; 
	/*padding-top: 20px; */
	padding-left: 15px;
}
.events .event-description {
	margin-left: 80px;
}
.events .time-container {
	float: left;
	padding-right: 10px; 
	width: 70px; 
}
.events .hour {
	float: right;
	letter-spacing: -3px;
}
.events .minute-container {
	line-height: .8em; 
	padding-top: .45em; 
	padding-left: 5px;
	float: right;
	font-size: .5em;
	/*color: rgba(255,255,255,0.8);*/
}
.events .minute {
	font-weight: bold;
	font-size: 1.1em;
}
.events .ampm {
	font-size: .8em;
	text-transform: uppercase;
}
.events li {
	color: #fff;
}
.events li.red {
	color: #ffc1c1;
}
.events li.red-bright {
	color: #ff4f4f;
}
.events li.orange {
	color: #ffd5a9;
}
.events li.orange-bright {
	color: #ffb04f;
}
.events li.yellow {
	color: #fff3a3;
}
.events li.yellow-bright {
	color: #fcff4f;
}
.events li.green {
	color: #c1ffa7;
}
.events li.green-bright {
	color: #28e840;
}
.events li.teal {
	color: #b8f3e3;
}
.events li.teal-bright {
	color: #27e8d8;
}
.events li.blue {
	color: #aae0fc;
}
.events li.blue-bright {
	color: #68baff;
}
.events li.purple {
	color: #c1c8ff;
}
.events li.pink {
	color: #ffc9fe;;
}
.events li.pink-bright {
	color: #fd79ff;
}
.events .location {
	font-size: .65em;
	line-height: 1.2em;
	display: block;
	opacity: .8;
}
.calmonth .location {
	font-size: .85em;
	line-height: 1.4em;
}
.events .end-time {
	font-size: .65em;
	line-height: 1.2em;
	display: block;
	opacity: .8;
}
.calmonth .end-time {
	font-size: .85em;
	line-height: 1.4em;
}
.calmonth table {
	/*border-spacing: 2px;*/
}
.layout-portrait .events table.calmonth {
	width: 100%;
}
.calmonth tr {
	/*border-top: 1px solid rgba(255,255,255,0.25);*/
}
.calmonth th {
	font-weight: 100;
	text-align: left;
	padding: 2px 5px;
}
.calmonth td {
	vertical-align: top;
	width: 14.2%;
	/*padding: 0 3px;*/
	padding:1px 2px;
}
.calmonth .daybox {
	min-height: 100px;
	min-width: 100px;
	border-top: 2px solid rgba(255,255,255,0.3);
	padding: 3px;
	word-break: break-word;
	/*background: rgba(0,0,0,.2);*/
}
.calmonth .caldate {
	font-size: 1.25em;
	font-weight: bold;
}
.calmonth .time-container {
	width: 30px;
}
.calmonth .today {
	border-top: 3px solid rgba(255,255,255,0.8);
}
.calmonth .event-all-day {
	padding: 2px 4px;
	border-radius: 2px;
	color: #fff;
	background: rgba(0,0,0,.5);
} 

/* Fade out events for landsacpe view */
.layout-landscape .events {
	-webkit-mask-image: linear-gradient(to bottom, white 95%, transparent);
	mask-image: linear-gradient(to bottom, white 95%, transparent);
}
/* Tablet layout for events */
.layout-tablet .events .time-container {
	width: 2em; 
}
.layout-tablet .events {
	clear: both;
}
.layout-tablet .event-description {
	margin-left: 2.5em;
}
.layout-tablet .events .day-container {
	margin-top: 0; 
	padding-top: 15px; 
}


/**
 *  Event classes - Agenda calendar
 * ---------------------------------------- */
.calendar-agenda .calendar-table {
	height: 100%;
}
.calendar-agenda .calendar-table td {
	padding: 15px;
	vertical-align: top;
}
.calendar-agenda-dark {
	color: rgba(0,0,0,.7);
	text-shadow: none;
}
.calendar-agenda .calendar .day-container {
	padding: 15px 0 0 15px;
}
.calendar-agenda .calendar {
	margin-bottom: 20px;
}
.calendar-agenda .calendar {
	overflow: hidden;
}
.calendar-agenda  .day-container {
	/*margin-bottom: 2em;*/
}
.calendar-agenda  .event-summary {
	/*margin-left: 80px;*/
	margin-left: 3.75em;
}

.calendar-agenda .day-container {
	word-break: break-word;
}

.calendar-agenda-horiz .day-container {
	padding-left: .65em;
}
.calendar-agenda-horiz .day-container:first-child {
	padding-left: 0;
}

.calendar-agenda-horiz .day-container {
	width: 15em;
}

.agenda-day-header {
	border-bottom: 1px solid rgba(255,255,255,.3); 
	padding-bottom: .3em;
}
.layout-landscape .agenda-day-header {
	border-bottom: none;
	padding-bottom: 0;
}
.calendar-agenda-dark .agenda-day-header {
	border-bottom: 1px solid rgba(0,0,0,.2); 
}
.agenda-day-header .agenda-day-header-num {
	font-size: 150%;
	font-weight:300;
	opacity:.8;
}
.agenda-day-header-num, .agenda-event-time {
	font-family: Rubik, Consolas, monaco, monospace;
}
.agenda-event-time {
	float: left; 
	opacity: .65; 
	font-size: 90%;
	font-weight: 500;
	padding-top: .05em;
}
.calendar-agenda-horiz .agenda-event-time {
	float: none;
}
.agenda-event-time-end {
	font-size: 90%;
	font-weight: 300;
}

.agenda-event-summary {
	font-weight: 500;
}
.agenda-event-description {
	opacity: .65;
	margin-top: .3em;
	font-size: 90%;
}
.calendar-agenda-horiz .agenda-event-summary {
	padding-top: .3em; 
}
.calendar-agenda-horiz .agenda-event-time-start {
	float: left;
	margin-right: .35em;
}
.has-event-background .agenda-event-time-end {
	margin-bottom: .2em;
}
.calendar-agenda-horiz .agenda-event-time-end {
	float: left;
	margin-bottom: 0;
}
.calendar-agenda-horiz .agenda-event-time-end:before {
	content: "- ";
}
.agenda-event-day-count {
	font-size: 85%;
	opacity: .6; 
	margin-top: .3em;
}
.agenda-event-location {
	margin-top: .3em;
	margin-bottom: .1em;
	font-size: 90%;
	opacity: .5;
}
.agenda-no-events {
	opacity: .35;
	margin-top: 1em;
}

/* Make the vertical calendar display horizontally */
.calendar-agenda.calendar-agenda-horiz {
	display: table-row;
}
.calendar-agenda.calendar-agenda-horiz .day-container {
	display: table-cell;
}

.calendar-agenda li {
	border-left-width: .25em; 
	border-left-style: solid; 
	padding-left: .35em;
}
.calendar-monthly li {
	color: #fff;
}




li.has-event-background.white {
	background: #88888833;}
li.has-event-background.grey {
	background: #66666633;}
li.has-event-background.lt-grey {
	background: #99999933;}
li.has-event-background.red {
	background: #ce3d3d33;}
li.has-event-background.orange {
	background: #cc894133;}
li.has-event-background.yellow {
	background: #d3b80b33;}
li.has-event-background.green {
	background: #15b72a33;}
li.has-event-background.teal {
	background: #13c19333;}
li.has-event-background.blue {
	background: #0e87c433;}
li.has-event-background.purple {
	background: #3e28ba33;}
li.has-event-background.pink {
	background: #c857ac33;}
li.has-event-background.red-bright {
	background: #ff4f4f33;}
li.has-event-background.orange-bright {
	background: #ffb04f33;}
li.has-event-background.yellow-bright {
	background: #fcff4f33;}
li.has-event-background.green-bright {
	background: #30da4633;}
li.has-event-background.teal-bright {
	background: #27e8d833;}
li.has-event-background.blue-bright {
	background: #68baff33;}
li.has-event-background.pink-bright {
	background: #fd79ff33;}

li.event-all-day.white {
	background: #888888; color: #fff; }
li.event-all-day.grey {
	background: #666666; color: #fff; }
li.event-all-day.lt-grey {
	background: #999999; color: #fff; }
li.event-all-day.red {
	background: #ce3d3d; color: #fff; }
li.event-all-day.orange {
	background: #cc8941; color: #fff; }
li.event-all-day.yellow {
	background: #d3b80b; color: #fff; }
li.event-all-day.green {
	background: #15b72a; color: #fff; }
li.event-all-day.teal {
	background: #13c193; color: #fff; }
li.event-all-day.blue {
	background: #0e87c4; color: #fff; }
li.event-all-day.purple {
	background: #3e28ba; color: #fff; }
li.event-all-day.pink {
	background: #c857ac; color: #fff; }
li.event-all-day.red-bright {
	background: #ff4f4f; color: #fff; }
li.event-all-day.orange-bright {
	background: #ffb04f; color: #fff; }
li.event-all-day.yellow-bright {
	background: #fcff4f; color: #fff; }
li.event-all-day.green-bright {
	background: #30da46; color: #fff; }
li.event-all-day.teal-bright {
	background: #27e8d8; color: #fff; }
li.event-all-day.blue-bright {
	background: #68baff; color: #fff; }
li.event-all-day.pink-bright {
	background: #fd79ff; color: #fff; }



/**
 * Weather styles
 * ------------------------------------------------------ */
.weather-current-icon {
	font-size: 90% }
.layout-portrait #weather {
	 margin-bottom: 40px;
	 padding: 0 20px; }
.layout-portrait .weather-container {
	display: table; 
	width: 100% }
.layout-portrait .weather-item {
	display: table-cell }
.layout-portrait .weather-current {
	 min-width: 250px }
.layout-portrait .weather-current-alt {
	line-height: 1.6em }
.layout-portrait .weather-forecast {
	vertical-align: bottom; 
	line-height: 1.8em; 
	width: 16% }
.layout-portrait .weather-moon {
	vertical-align: bottom;
	padding-bottom: 10px; }	 
.layout-portrait .weather-forecast-item-high,
.layout-portrait .weather-forecast-item-low {
	padding: 0 5px;
}
/* </= 1080 */
@media (max-width: 1080px) {
	.layout-portrait .weather-forecast-item-high,
	.layout-portrait .weather-forecast-item-low {
		display: block;
	}
	.layout-portrait .weather-current {
		padding-top: 25px;
	}
}
/* > 1080 */
@media (min-width: 1081px) {
	.layout-portrait .weather-item {
		padding-top: 15px;
	}
}
/**
 * Right side weather / landscape */
.layout-landscape #weather {
	calc(100% - 60px); }
.layout-landscape .weather-current {
	padding: 15px 20px 0 0; 
	text-align: right;
	height: 20% }
.layout-landscape .weather-current-alt {
	text-align: right;
	margin-top: 10px; }
.layout-landscape .weather-forecast {
	height: 78% }
.layout-landscape .weather-forecast-item {
	height: 20%; 
	line-height: 1.8em }
.layout-landscape .weather-forecast-item-table {
	display: table; 
	width: 100%; 
	padding-top: 10px; }
.layout-landscape .weather-forecast-item-label {
	display: table-cell; 
	vertical-align: middle; 
	padding-right: 10px; }
.layout-landscape .weather-forecast-item-icon {	
	display: table-cell; 
	padding-right: 10px; 
	vertical-align: middle }
.layout-landscape .weather-forecast-item-hilo {	
	display: table-cell; 
	padding-right: 15px;
	line-height: 1.4em }
.layout-landscape .weather-pop {
	display: table-cell;
	color: #fff;
	font-size: 70%;
	text-align: center;
	vertical-align: middle;
}

.weather-forecast-item .day {
	margin-bottom: .5em;
}
#weather .day {
	margin-bottom: .5em;
}
#weather-alert-message {
	line-height: 1.4em;
	color: rgba(255,255,255,0.6);
}
.layout-portrait .weather-alert {
	padding: 15px 15px 15px 20px; 
	z-index: 100;
}
.layout-landscape .weather-alert {
	position: fixed; 
	left: 0; 
	right: 0; 
	top: 0;
	margin: 0 auto; 
	width: 50%; 
	padding: 15px 15px 15px 25px; 
	border-bottom-right-radius: 5px; 
	border-bottom-left-radius: 5px;
	z-index: 100;
}
.layout-tablet #weather {
	margin-bottom: 30px;
}
.layout-tablet .weather-forecast {
	line-height: 1em }
.layout-tablet .weather-current {
	 min-width: 0 }
.layout-tablet .weather-current-alt {
	line-height: 1.2em }
.layout-tablet .weather-forecast-item-high {
	/*margin-top: 20px;*/
}
.layout-tablet .weather-forecast .wi {
	margin-bottom: 20px;
}
.layout-portrait .weather-pop {
	color: #fff;
	font-size: 70%;
	margin-top: .5em;
}

/**
 * RSS styles
 * ------------------------------------------------------ */
#rss {
	pointer-events: none; /* So pointer events can pass through, but reverted for Anchor tags */
}
.layout-landscape #rss { /*.rss-landscape {*/
	z-index: 200; 
	position: absolute; 
	bottom: 10%; 
	right: 20%; 
	left: 25%;
}
.layout-portrait #rss { /*.rss-portrait {*/
	z-index: 200; 
	position: absolute; 
	min-height: 50px; 
	bottom: 25%; 
	padding: 50px 20px; 
	right: 0; 
	left: 0;
}
.layout-tablet #rss {
	position: relative;
	padding: 0 20px 40px 20px;
	left: auto;
	right: auto;
}
.layout-tablet .rss-title,
.layout-tablet .rss-description {
	overflow: hidden;
	height: 1em;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

@media (min-width: 1600px) {
    .layout-portrait #rss {
        padding: 50px 150px;
    }
    .calmonth td {
	    padding: 0 6px;
    }
}
#rss img,
.rss img {
	display: none;
}
#rss A { pointer-events: auto; }

/**
 * Message styles 
 * ------------------------------------------------------ */


/**
 * Todo styles 
 * ------------------------------------------------------ */
.layout-portrait .todo {
	margin-left: 20px;
	padding-top: 20px;
	clear: both;
}
.layout-landscape .todo {
	margin-left: 20px;
	padding-top: 20px;
	position: fixed;
	bottom: 60px;
	max-height: 25%;
	overflow: hidden;
}

/**
 * Clocks
 * ------------------------------------------------------ */
.time .sec {
	font-size: .4em;
	color: #fff;
	padding-left: 5px;
	position: relative;
	top: -1em;
}
.time-ampm {
	font-size: .3em;
	color: rgba(255,255,255,0.8);
	padding-left: 5px;
	position: relative;
}
.day {
	font-family: "Roboto", sans-serif;
	text-transform: uppercase;
}
.layout-tablet .day {
	font-size: .75em;
}
.clock {
	 padding: 10px 15px; 
}
.layout-portrait .clock {
	float: left;
}
.layout-tablet .clock {
	padding-bottom: 0;
}
.clock .date {
	padding-left: 5px;
}
.layout-portrait .day-of-week {
	font-size: 1.5em;
}
.layout-landscape .day-of-week,
.layout-landscape .month{
	float: left;
}
.layout-landscape .month {
	padding-left: .75em;
}
.layout-tablet .date .day-of-week {
	text-align: right;
	font-size: .9em;
}
.layout-tablet .date .month {
	text-align: right;
	font-size: .7em;
}