﻿@media all and (min-device-width: 960px) {
    body
    {
		font-size: .9em;
    }
    input[type=button], input[type=submit], input[type=button]:hover, input[type=submit]:hover, 
    input[type=button][disabled], input[type=button][disabled]:hover, input[type=button][disabled]:focus, input[type=button][disabled]:active,
    input[type=submit][disabled], input[type=submit][disabled]:hover, input[type=submit][disabled]:focus, input[type=submit][disabled]:active
    {
		width: 100px;
		height: 50px;
    }
	div.main
	{
		width: 768px;
	}
}
 
@media all and (max-device-width: 959px) and (min-device-width: 600px) {
    body
    {
        font-size: .8em;
    }
    input[type=button], input[type=submit], input[type=button]:hover, input[type=submit]:hover, 
    input[type=button][disabled], input[type=button][disabled]:hover, input[type=button][disabled]:focus, input[type=button][disabled]:active,
    input[type=submit][disabled], input[type=submit][disabled]:hover, input[type=submit][disabled]:focus, input[type=submit][disabled]:active
    {
		width: 90px;
		height: 45px;
    }    
	div.main
	{
		width: auto;
	}
}
 
@media all and (max-device-width: 599px) and (min-device-width: 320px) {
    body
    {
        font-size: .7em;
    }
    input[type=button], input[type=submit], input[type=button]:hover, input[type=submit]:hover, 
    input[type=button][disabled], input[type=button][disabled]:hover, input[type=button][disabled]:focus, input[type=button][disabled]:active,
    input[type=submit][disabled], input[type=submit][disabled]:hover, input[type=submit][disabled]:focus, input[type=submit][disabled]:active
    {
		width: 80px;
		height: 40px;
    } 
	div.main
	{
		width: auto;
	}
}

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

body
{
	font-family: Arial, Helvetica, Sans-Serif;
	margin: 0px;
}

/*Standard Pekin maroon input button*/
input[type=button], input[type=submit]
{
	white-space: normal;
	font-weight: bold;
	color: #FFFFFF;
	font-size: inherit;
	text-shadow: 1px 1px 0px #51121B;
	padding: 5px 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #51121B;
	background: #760F24;
	background: linear-gradient(top,  #AB1B1F,  #420915);
	background: -ms-linear-gradient(top,  #AB1B1F,  #420915);
	background: -webkit-gradient(linear, left top, left bottom, from(#AB1B1F), to(#420915));
	background: -moz-linear-gradient(top,  #AB1B1F,  #420915);
	box-shadow: 1px 1px 3px #4E4E4E;
	-moz-box-shadow: 1px 1px 3px #4E4E4E;
	-webkit-box-shadow: 1px 1px 3px #4E4E4E;  
	vertical-align: middle;
}
input[type=button]:hover, input[type=submit]:hover
{
	white-space: normal;
	color: #FFFFFF;
	background: #404042;
	background: -webkit-gradient(linear, left top, left bottom, from(#84888C), to(#000000));
	background: -moz-linear-gradient(top,  #84888C, #000000);
	background: -ms-linear-gradient(top,  #84888C, #000000);
	background: linear-gradient(top,  #84888C, #000000);
	border: 1px solid #424041;
	box-shadow: 1px 1px 3px #4E4E4E;
	-moz-box-shadow: 1px 1px 3px #4E4E4E;
	-webkit-box-shadow: 1px 1px 3px #4E4E4E;  
	text-shadow: 1px 1px 0px #4E4E4E;
	vertical-align: middle;
}
input[type=button][disabled], input[type=button][disabled]:hover, input[type=button][disabled]:focus, input[type=button][disabled]:active,
input[type=submit][disabled], input[type=submit][disabled]:hover, input[type=submit][disabled]:focus, input[type=submit][disabled]:active
{
	white-space: normal;
	font-weight: bold;
	color: #404042;
	text-shadow: 0px 1px 0px rgba(255,255,255,.5);
	background: #DDDDDD;
	background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#DDDDDD));
	background: -moz-linear-gradient(top,  #666666,  #DDDDDD);
	background: -ms-linear-gradient(top,  #666666,  #DDDDDD);
	background: linear-gradient(top, #666666,  #DDDDDD);
	box-shadow: 1px 1px 3px #000000;	
	-moz-box-shadow: 1px 1px 3px #000000;	
	-webkit-box-shadow: 1px 1px 3px #000000;	
	vertical-align: middle;
}

@media all and (min-device-width: 960px) 
{
	input.buttonwidth125, input.buttonwidth125:hover, input.buttonwidth125[disabled], input.buttonwidth125[disabled]:hover, input.buttonwidth125[disabled]:focus, input.buttonwidth125[disabled]:active
	{
		width: 125px;
		height: 50px;
	}

	input.buttonwidth150, input.buttonwidth150:hover, input.buttonwidth150[disabled], input.buttonwidth150[disabled]:hover, input.buttonwidth150[disabled]:focus, input.buttonwidth150[disabled]:active
	{
		width: 150px;
		height: 50px;
	}

	input.buttonwidth175, input.buttonwidth175:hover, input.buttonwidth175[disabled], input.buttonwidth175[disabled]:hover, input.buttonwidth175[disabled]:focus, input.buttonwidth175[disabled]:active
	{
		width: 175px;
		height: 50px;
	}

	input.buttonwidth250, input.buttonwidth250:hover, input.buttonwidth250[disabled], input.buttonwidth250[disabled]:hover, input.buttonwidth250[disabled]:focus, input.buttonwidth250[disabled]:active
	{
		width: 250px;
		height: 50px;
	}
}

@media all and (max-device-width: 959px) and (min-device-width: 600px) 
{
	input.buttonwidth125, input.buttonwidth125:hover, input.buttonwidth125[disabled], input.buttonwidth125[disabled]:hover, input.buttonwidth125[disabled]:focus, input.buttonwidth125[disabled]:active
	{
		width: 125px;
		height: 45px;
	}

	input.buttonwidth150, input.buttonwidth150:hover, input.buttonwidth150[disabled], input.buttonwidth150[disabled]:hover, input.buttonwidth150[disabled]:focus, input.buttonwidth150[disabled]:active
	{
		width: 150px;
		height: 45px;
	}

	input.buttonwidth175, input.buttonwidth175:hover, input.buttonwidth175[disabled], input.buttonwidth175[disabled]:hover, input.buttonwidth175[disabled]:focus, input.buttonwidth175[disabled]:active
	{
		width: 175px;
		height: 45px;
	}

	input.buttonwidth250, input.buttonwidth250:hover, input.buttonwidth250[disabled], input.buttonwidth250[disabled]:hover, input.buttonwidth250[disabled]:focus, input.buttonwidth250[disabled]:active
	{
		width: 250px;
		height: 45px;
	}
}

@media all and (max-device-width: 599px) and (min-device-width: 320px) 
{
	input.buttonwidth125, input.buttonwidth125:hover, input.buttonwidth125[disabled], input.buttonwidth125[disabled]:hover, input.buttonwidth125[disabled]:focus, input.buttonwidth125[disabled]:active
	{
		width: 125px;
		height: 40px;
	}

	input.buttonwidth150, input.buttonwidth150:hover, input.buttonwidth150[disabled], input.buttonwidth150[disabled]:hover, input.buttonwidth150[disabled]:focus, input.buttonwidth150[disabled]:active
	{
		width: 150px;
		height: 40px;
	}

	input.buttonwidth175, input.buttonwidth175:hover, input.buttonwidth175[disabled], input.buttonwidth175[disabled]:hover, input.buttonwidth175[disabled]:focus, input.buttonwidth175[disabled]:active
	{
		width: 175px;
		height: 40px;
	}

	input.buttonwidth250, input.buttonwidth250:hover, input.buttonwidth250[disabled], input.buttonwidth250[disabled]:hover, input.buttonwidth250[disabled]:focus, input.buttonwidth250[disabled]:active
	{
		width: 250px;
		height: 40px;
	}
}

input.buttonwidthauto, input.buttonwidthauto:hover, input.buttonwidthauto[disabled], input.buttonwidthauto[disabled]:hover, input.buttonwidthauto[disabled]:focus, input.buttonwidthauto[disabled]:active
{
	width: auto;
	height: auto;
}

input[type=checkbox], input[type=radio]
{
    display: none;
}
input[type=radio] + label:before
{
	content: "";  
    display: inline-block;  
    width: 15px;  
    height: 15px;  
    vertical-align:middle;
    margin-right: 5px;  
	margin-top: 2px;
	margin-bottom: 2px;
    background-color: white;
    border-radius: 8px;  
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px; 
	border: 1px solid #C2C2C2;
}
input[type=radio]:checked + label:before
{
    content:"\2022"; /* Bullet */
    color: black; 
    text-align:center;
    line-height:16px;
	font-size: 1.7em;
}
input[type=radio]:disabled + label:before
{
	color: #666666;
	background-color: rgb(240,240,240);
}

.RadioButtonList label
{
	margin-right: 10px;
}

.CheckBoxList label
{
	margin-right: 10px;
}

input[type=checkbox] + label:before
{
    content: "";  
    display: inline-block;  
    width: 15px;  
    height: 15px;  
    vertical-align:middle;
	margin-left: 5px;
    margin-right: 5px;  
    background-color: white;
    border-radius: 4px;  
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px; 
	border: 1px solid #C2C2C2;
}
input[type=checkbox]:checked + label:before
{
    content:"\2713"; /* Tick */
    color: black; /*#666666;*/
    text-align:center;
    line-height:15px;
}
input[type=checkbox]:disabled  + label:before
{
	color: #666666;
	background-color: rgb(240,240,240);
}

input[type=text], input[type=password]
{
	font-size: inherit;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 1px solid #C2C2C2;
	padding: 2px 4px;
	-webkit-appearance: none;
	max-width: 75%;
}
input[type=text]:disabled 
{
	background-color: rgb(240, 240, 240);
	color: #666666;
}

textarea
{
	font-family: inherit;
	font-size: inherit;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 1px solid #C2C2C2;
	padding: 2px 4px;
	-webkit-appearance: none;
}

textarea:disabled
{
	background-color: rgb(240, 240, 240);
	color: #666666;
}

select
{
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 1px solid #C2C2C2;
	padding: 2px 4px;
	font-size: inherit;
	max-width: 75%;
}
select:disabled
{
	background-color: rgb(240,240,240);
	color: #666666;
}

select.fullsize
{
	max-width: 100%;
}

.TextBox_Right
{
    text-align: right;
}

div.Banner
{
	text-align: center;
}

div.main
{
	margin-left: auto; 
	margin-right: auto; 
	/*width: 768px;*/
}

div.mainentry
{
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: left;
	text-decoration: none;
	font-size: inherit;
}

div.Shadow 
{
	box-shadow:2px 2px 5px #4E4E4E;
    -moz-box-shadow: 2px 2px 5px #4E4E4E;
    -webkit-box-shadow: 2px 2px 5px #4E4E4E;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	background-color: #e2e2e2;
}

div.PageHeading
{
	font-weight: bold;
	text-align: left;
	background-color: #4E4E4E;
	padding: 5px;
	color: white;
	border-radius: 5px 5px 0px 0px; 
	-moz-border-radius: 5px 5px 0px 0px; 
	-webkit-border-radius: 5px 5px 0px 0px; 
}

div.PageSubHeading 
{
	font-weight: bold;
	text-align: left;
	background-color: #e2e2e2;
	padding: 5px;
	border-radius: 0px 0px 5px 5px; 
	-moz-border-radius: 0px 0px 5px 5px; 
	-webkit-border-radius: 0px 0px 5px 5px; 
}

div.ButtonRow
{
	text-align: left;
	padding: 5px;
	background-color: #e2e2e2;	
}

div.ButtonRowBottom
{
	text-align: center;
	padding: 10px;
	background-color: #e2e2e2;
	border-radius: 5px 5px 5px 5px; 
	-moz-border-radius: 5px 5px 5px 5px; 
	-webkit-border-radius: 5px 5px 5px 5px; 
	margin-top: 10px;
	margin-bottom: 10px;
}

div.header-cont 
{
    width: 100%;
    position: fixed;
    top: 0px;
}

div.header 
{
    height: auto;
    width: 775px;
    margin: 0px auto;                
    background-color: white;
}

div.footer-cont 
{
    width: 100%;
    position: fixed;
    bottom: 0px;
}

div.footer
{
    height: auto;
    width: 768px;
    margin: 0px auto;
    background-color: white;
	padding-top: 10px;
	padding-bottom: 10px;
}

div.errordiv
{
	/*font-size: 1em;	*/
	font-weight: bold;
	color: Red;
	display: none;
	text-align:left; 
	clear:both;
}

div.reqfieldmsg
{
	font-weight: bold;
	color: #C00000;
	text-align: center; 
}
/* to suppress underlining of column header 
in datagrid for sorted columns */
table
{
	width: 100%;
	text-decoration: none;
	font-size: inherit;
}

tbody, tr, td, a
{
	text-decoration: none;
	font-size: inherit;
}

.tdright
{
	text-align: right;
}

.tablePadZero
{
	border: none;
	border-collapse: separate;
	border-spacing: 0px;
}

.tablePadOne
{
	border: none;
	border-collapse: separate;
	border-spacing: 1px;
}

.tablePadFive
{
	border: none;
	border-collapse: separate;
	border-spacing: 5px;
}

.tablePadFiveBorder
{
	border: solid;
	border-width: 1px;
	border-collapse: separate;
	border-spacing: 0px;
	padding: 5px;
}

.HeaderStyle
{
	font-weight: bold;
	background-color: #e2e2e2;
}

.PagerStyle
{
	font-weight: bold;
	background-color: #e2e2e2;
	color: black;

}
.linkA:visited
{
	color: Blue;
}

.linkA:link
{
	color: Blue;
}

.linkA:active
{
	color: Blue;
}

.LabelRequired
{
	color:#C00000;
	font-weight: bold;
}

/* Validator control styles */
.CustomValidator
{
    font-weight: bold;
    color: #C00000;
}
.RequiredFieldValidator
{
    font-weight: bold;
    color: #C00000;
}
.CheckBoxValidator
{
    font-weight: bold;
    color: #C00000;
}

.CompareValidator
{
    font-weight: bold;
    color: #C00000;
}
.RangeValidator
{
    font-weight: bold;
    color: #C00000;
}
.RegularExpressionValidator
{
    font-weight: bold;
    color: #C00000;
}
.ValidationSummary
{
    font-weight: bold;
    color: #C00000;
}

@media screen and (max-width: 480px)
{
    *{
    max-width: 320px;
    }
}
