/* -----------------------------------------
   Site specific CSS
----------------------------------------- */

@import url("material-design-iconic-font.min.css");
@import url("RobotoDraft.css");
@import url("Roboto.css");


@media handheld, only screen and (max-width: 767px) {
	#main { padding: 15px 0px 13px 0px; }
}

body, input, select, textarea, button, .ui-btn,h1,h2,h3,h4,h5,h6 {
	font-family: "RobotoDraft","Roboto","Helvetica Neue",sans-serif;
	font-weight: 400;
}

a { color: #000000;  }
a:hover { color: #333333; }
a:focus { color: #666666; }

label.vertmiddle { line-height: 0.9; }
input.nopad { margin-bottom: 0; }

.purewhite.label			{ background-color: #FFFFFF; color: #111; }
.pca1min.label			{ background-color: #6BB9E6; }
.pca10min.label			{ background-color: #1E253F; }
.pca5sec.label			{ background-color: #87CEF7; }
.pcathreshold.label			{ background-color: #E91C21; }

.smallfont { font-size: 8px; font-size: .8rem; }

#main h1 {
  margin-top: 15px;
  color: #333333;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 800; 
}
#main h2 {
  color: #333333; /*#1F79EB;*/
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 600;
}
#main h3 {
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 600;
}
#main h4 {
  color: #1F79EB;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: 10px;
  border-bottom: 1px dotted #CECECE;
  text-shadow: 0 1px 1px rgba(0,0,0,0.28);
}

.footer, a.footer {
  color: #cecece;
  font-size: 10px;
  font-size: .7rem;  
}

.fullscaleimg {
  max-height: 100%;
  vertical-align:middle;
}
.vertimg {
  line-height: 27px;
}

form.nice div.form-field input.redborder, form.nice input.input-text.redborder, form.nice textarea.redborder, .redborder { border: solid 1px #c00; color: #c00; }

form.nice .bigtextarea {
  height: 20em;
}
form.nice .medtextarea {
  height: 8em;
}

ul.breadcrumbsMenu { display: block; background: #FFFFFF; padding: 1px 1px; margin-bottom: 1px; border: 0px; border-radius: 0px; overflow: hidden; }
ul.breadcrumbsMenu li:before { content: "|"; color: #aaa; }

table tbody tr.alt { background: #DEDEDE; }
table tbody tr.highlightred, label.highlightred { background: #E91C21; }
table tbody tr.highlightyellow { background: #FFFF00; }
table tbody tr.highlightgreen { background: #00CC33; }
table tbody tr:hover, table tbody tr.alt:hover, table tbody tr.highlightred:hover, table tbody tr.highlightyellow:hover { background: #FEF2DA; }

table.diagram tbody tr td { color: #333; padding: 0px; vertical-align: middle; text-align:center; border: none; }
th.smaller { font-size: 12px; }
table.diagram tbody tr:hover, table.diagram tbody tr.alt:hover { background: #FFFFFF; }

th.verttop { vertical-align: top; }

img.noresizeimg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

img.img800 {
  text-align: center;
  margin: auto;
  width: 800px;
  height: 430px;
  max-width: 800px;
  max-height: 430px;
}

img.graphimg {
  width: 550px;
  height: 500px;
  max-width: 550px;
  max-height: 500px;
}

object.audioobj, embed.audioobj {
  padding: 0px;
  margin: 0px;
  height: 20px;
  width: 200px;
  max-width: 200px;
}

div.panel {
  padding: 20px;
}

.inline, input.inline {
  display: inline;
}

.nobottompad, input.nobottompad {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.bottompad {
  padding-bottom: 10px;
}

.vertmiddle {
  vertical-align: middle;
}

/*input.tiny, textarea.tiny { width: 75px; }*/
input.supertiny, textarea.supertiny { width: 45px; }
.micro.button			{ font-size: 10px; padding: 6px 4px 8px; width: auto; }

.bigclose {
	font-size: 22px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	font-weight: bold;
	cursor: pointer;
}

.has-tip.stealthtip {
  font-weight: normal;
  border: none;
}


/****************************** new css *******************************/

.header-section {
	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
	position: fixed;
	z-index: 999;
	min-width: 100%
}
.header-fill {
	height: 100px;
    transition: padding .25s ease; 
}

.header {
  padding: 10rem 0;
  background: linear-gradient(
    rgba(200, 200, 200, 0.45),
    rgba(200, 200, 200, 0.45)
  ),
  /* bottom, image */
  url("../images/stockart/supermarketaisle2.jpg") center center no-repeat;    
  background-size: cover; 
}
.header-small {
  padding: 1rem 0;
}
.top-bar {
  background-color: #FFF;
/*  padding: 0.75rem;*/
  transition: padding .25s ease; 
  padding-bottom: 25px;
  border-bottom: 3px #EA7B2A solid;
}
.top-bar ul {
  background-color: #FFF;
}
.content {
  padding: 1rem 0;
  background: linear-gradient(
    rgba(200, 200, 200, 0.45),
    rgba(200, 200, 200, 0.45)
  ),
  /* bottom, image */
  url("../images/stockart/supermarketaisle12.jpg") center center no-repeat;
  background-size: cover;     
}

.white-content-box, .green-content-box {
    background-color: #FFF;
    padding: 50px;
    border: 1px solid #666;
    -webkit-box-shadow: 10px 10px 16px -3px rgba(0,0,0,0.42);
    -moz-box-shadow: 10px 10px 16px -3px rgba(0,0,0,0.42);
    box-shadow: 10px 10px 16px -3px rgba(0,0,0,0.42);
    -webkit-border-radius: 20px 2px 20px 0px;
    -moz-border-radius: 20px 2px 20px 0px;
    border-radius: 20px 2px 20px 0px;    
}
.green-content-box {
    color: #FFF;
    background-color: #57B749;    
    border: 1px solid #57B749;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;  
}

.nopadding {
    padding: 0px !important;
    margin: 0px !important;
}
.button.orange-button {
    background-color: #EA7B2A;
}
.drop-shadow {
    -webkit-box-shadow: 10px 10px 16px -3px rgba(0,0,0,0.42);
    -moz-box-shadow: 10px 10px 16px -3px rgba(0,0,0,0.42);
    box-shadow: 10px 10px 16px -3px rgba(0,0,0,0.42);        
}
a.greenlink {
    color: #57B749;  
}
a.whitelink {
    color: #CECECE;
}

/** OVERRIDES **/
.title-bar {
    background-color: #FFF;
    color: #57B749;
}
.menu-icon::after {
    background-color: #57B749;
    box-shadow: 0 7px 0 #57B749, 0 14px 0 #57B749;
}
.menu-icon:hover::after {
    background-color: #666;
    box-shadow: 0 7px 0 #666, 0 14px 0 #666;
}