/* start with widths 0 through 320 */

html {
	height:100%;
	width:100%;
	font-size:120%;
	box-sizing:border-box;
}
* {
	box-sizing:inherit;
}
body{

	margin:0;
	padding:0;
	background:lightgray;

}

/* generic rounded button stylings */
button {
	font-size:100%;
	width:96%;
	display:block;
	margin:0 auto;
	min-height:2em;
}
button.logout {
	float:right;
	margin:auto auto;
	display:inline-block;
	width:auto;
	height:30px;
	margin: 8px 5px 0 0;
	font-size:70%;

}
span {
	font-size:90%;
}
p {
	margin:0 0 1em 0;
}
p.scoring {
	margin:0;
	font-size:89%;
}
p.scoring span{
	font-weight:bold;
}
p.section-title {
	margin:0;
	text-align:left;
	font-size:100%;
	font-weight:bold;
	background-color:#ddd;
}
p.align-left {
	text-align:left;
	padding:0 0 0 5px;
}
p.smaller {
	font-size:small;
	padding:0 1em;
}
.small-margin {
	margin: .5em 0;
}
/*div.header {
	background-image: url('/vending_common_files/images/NB_MobileWeb_homeheader.png') ; 
	background-size:contain;
	background-repeat: no-repeat;
	background-color:#d51f38;
	height:50px;
	
}*/



header.header {
	background-image: url('/healthy_env/NB_MobileWeb_homeheader.png') ; 
	background-size:contain;
	background-repeat: no-repeat;
	background-color:#d51f38;
	height:50px;
	width:inherit;
	position:fixed;
	top:0;
	
}
main.content {
	/*padding:50px 0 0 0;*/
}

footer.footer {
	height:25px;
	background-color:lightgray;	
	width:inherit;
}





/* smallest screen's container */
div.container {
	width:100%;
	background-color:white;
	margin:50px auto 0;
	padding:0 0 2% 0;
	text-align:center;
}


/*used for stuff like login widgets */
/* four or even three column might not be supported*/
div.one-column, div.two-column, div.three-column, div.four-column  {
	width:100%;
	margin:0 auto 1em;
	
}


div.container p.title {
	width:100%;
	background-color:#d51f38;
	text-align:center;
	color:white;
	margin:0 0 1% 0;
}



div.begin-hidden {
	display:none;
}



div.field {
	margin:0;
	padding:1em;
	text-align:left;
	width:100%;
}


div.field label{
	font-weight:bold;
	display:block;
}
div.field input{
	font-weight:bold;
	display:block;
	width:98%;
	margin:1%;
	padding:1% 0;
}
div.field.radio-field {
} 
div.field.radio-field input{
	display:inline-block;
	width:auto;
	margin-left:2em;
}
div.field.radio-field label{
	display:inline-block;
	width:auto;
} 
div.field.check-field input{
	display:inline-block;
	width:auto;
	margin-left:2em;
}
div.field.check-field label{
	display:inline-block;
	width:auto;
	font-weight:normal;
}
div.field select{
	font-weight:bold;
	display:block;
	width:98%;
	margin:1%;
	padding:1% 0;
}

div.field button{
	font-weight:bold;
	display:block;
	width:98%;
	margin:1%;
	padding:3% 0;
}

div.field textarea{
	font-weight:bold;
	display:block;
	width:98%;
	resize:none;
	max-width:98%;
	min-width:98%;
	height:100px;
	margin:1%;
}

table.standardTable {
	width:100%;
	border-collapse:collapse;
}
table.standardTable button{
	width:100%;
	border-collapse:collapse;
	font-size:small;
}
table.standardTable thead tr th,
table.standardTable tbody tr th{
	background-color: #d51f38;
	border:1px solid white;
	color:white;
}

table.standardTable tbody tr td{
	background-color: #f66;
	border:1px solid white;
	font-weight:normal;
}
table.standardTable tbody tr:nth-child(even) td{
	background-color: #ff8080;
}

table.standardTable tbody tr:hover td{
	background-color:lightgray;
}
table.standardTable tbody tr td:hover {
	background-color:#ddd;
}


/* class overriders just incase */

tr.alt_e td {
	background-color: #f66;
}
tr.alt_o td {
	background-color: #ff8080;
}

.sprite-link {
	width:30px;
	height:30px;
	display:inline-block;
	vertical-align:middle;
}
a.sprite-link {
	display:block;
	margin:0 auto;
}
a.sprite-link.a-inl-blk {
	display:inline-block;
}
a.sprite-link.float-left {
	float:left;
}

a.sprite-link.float-right {
	float:right;
}

.delete-icon {
	background:url('/vending_common_files/images/delete.png') no-repeat 0 0;
	width:16px;
	height:16px;
}
.view-icon {
	background:url('/vending_common_files/images/view.png') no-repeat 0 0;
	width:16px;
	height:16px;
}
.check-icon {
	background:url('/vending_common_files/images/check.png') no-repeat 0 0;
	width:16px;
	height:16px;
}
.edit-icon {
	background:url('/vending_common_files/images/edit.png') no-repeat 0 0;
	width:16px;
	height:16px;
}
@media screen and (min-width:320px) {
	body{
		width:100%;
		margin:0;
	}
}
@media screen and (min-width:533px) {
	html {
		font-size:110%;
	}
	body{
		width:100%;
		margin:0;
	}
}


@media screen and (min-width:768px) {
	html {
		font-size:110%;
	}
	body{
		width:100%;
		margin:0;
	}
}
/* desktops */
@media screen and (min-width:960px) {
	html {
		font-size:100%;
	}
	body{
		width:100%;
		margin:0 auto;
		width:960px;
	}
	header.header {
		height:70px;
	}
	main.content {
		/*padding:70px 0 0 0;*/
	}
	div.container {
		margin:70px auto 0;
	}
	div.two-column  {
		width:47%;
		margin:0 1% 0 0;
		display:inline-block;
	}
}