/*	-----------------------------------
 * 	Styles for CumulusMX Templates
 Last modified: 2021/03/19 09:23:15
 * 	----------------------------------*/

html, body, p, h1, h2, h3, h4, h5, h6, li, td, th {
	font-family: 'Rosario', sans-serif;
	font-style: italic;
}

body{
	background: #2d2d2d;
	color: #fff;
}

p {
	font-size: 15px;
}

#Header {
	border-style: solid;
	border-width: 0 0 10px 0;
}

.site-width {
	max-width:1140px;
	margin:auto;
}

.graph-width {
	max-width:1250px;
	margin:auto;
}

#Footer {
	border-width:5px 0 0 0;
	border-style: solid;
}

.logo {
	max-width:250px;
	margin: 5px 0 5px 16px;
}

.subText {
	font-size: 80% !important;
	font-weight:400;
}

.statusPanel h5 {
	margin-bottom: -5px;
}


/*	--------------------------------------------------
 * 	Menu enhancements
 * 	--------------------------------------------------*/
#Main_Menu {
	margin-bottom: 4px;
	border-width:2px 0 0 0 ;
	border-style: solid;
	min-height: 32px;
}

.at-slim {
	padding: 4px 14px!important;
}

.at-divider {
	margin: 0 5px;
	color:#F80;
}

.at-spacer {
    min-height:2em;
}

.at-menu-lable {
	display:block;
	width:100%;
	font-size: 13px;
	font-style: italic;
	padding-bottom: 2px!important;
	padding-top:4px!important;
	border-bottom: 1px dotted #c2cfa5!important;
}

.at-menu-bar {
	display:block;
	height: 2px;
	padding: 0 2px!important;
}

.at-indent {
	padding-left: 40px!important;
}

/*	-------------------------------
 * 	Model enhancements
 * 	------------------------------*/

.w3-modal-content {
	margin-top:10%;
	border-radius: 8px;
}

.w3-modal header { border-radius: 8px 8px 0 0;}
.w3-modal footer { border-radius: 0 0 8px 8px;}
.w3-modal .w3-btn { border-radius: 0 8px;}

/* 	----------------------------------------
 * 	Media enhancements
 * 	---------------------------------------*/
@media screen and (max-width:780px) {
	#Footer { position: unset; }
	#Content {
		/*margin-top: 170px!important;*/
		margin-bottom: 5px!important;
	}

	.statusPanel {
		text-align:center!important;
		margin:auto!important;
	}
}

@media screen and (max-height:768px) {
	#Footer { position: unset; item: center;}
	#Content {
		margin-bottom: 5px!important;
	}
}

/*	--------------------------------------
 * 	LED enhancements
 * 	-------------------------------------*/
.at-led-round {
	display:inline-block;
	height: 1.2em;
	width: 1.2em;
	margin: 0 0.5em -3px 0.5em;
	border-radius: 50%;
	background-color: #888;
	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
}

.at-led-block {
	display:inline-block;
	height: 1.2em;
	width: 1.2em;
	margin: 0 0.5em -3px 0.5em;
	background-color: #888;
	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
}

.at-led-brick {
	display:inline-block;
	height:0.8em;
	width:1.6em;
	margin:0 0.5em -3px 0.5em;
	background-color: #888;
	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
}
.at-led-oval {
	display:inline-block;
	height:1em;
	width:2em;
	margin:0 0.5em -3px 0.5em;
	border-radius: 50%;
	background-color: #888;
	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
}

.at-led-green {
	background-color: #0b0;
}

.at-led-flash-red {
	animation: flashR 1s infinite;
}

@keyframes flashR {
	0%, 60%  {background-color: #f00;}
	61%,100% {background-color: #800;}
}


/*
Added by Geoff Collinson December 2021
grid container section
*/


.ggridcontainer {
	 display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px 10px;
   grid-auto-flow: column;
  
  grid-template-areas:

    "A B C D E"
    "F G H I J";
 
}

.ghome {grid-area:A;}
.gbarometer { grid-area: B; }
.galmanac {grid-area: E;}
.gdirection {grid-area: F;}
.gtemp {grid-area: C;}
.ghumidity {grid-area: D;}
.gspeed {grid-area: G;}
.grain{grid-area: H;}
.gsolar{ grid-area: I;}
.gyest{grid-area: J;}



.box {
    padding: 15px;
    font-size: 150%;
	text-align: center;	
	  }
  
 .gtemp{
	 font-size:300%;
   
	
	
 }
 
 .gtitle {
	 color: #ffcc00;
 }