﻿/* HTML Tags ----------------------------------- */
body
{
	font-family: Arial;
	font-size: 14px;
}
/* Banner  ----------------------------------- */
#banner
{
	/*background: url(Custom/Images/banner.png) repeat-x #689BC8;
	height:120px;*/
}
#bannerright
{
	/*To set up a second banner image on the right of the banner, 
		add a file called bannerright.png to Custom/Images folder, 
		set to display to block, 
		and adjust disptances from top and right if needed
	display:block;
	right:10px;
	top:5px; */
}

#bannerbackground
{
	/* If banner background has a plain colour, simply set background-color */
	 background-color: #006680; 
	/* If banner background has more than one colour or a gradient colour, set background with url to 1px wide backgorund image */
	/* background: url("") repeat-x #689BC8; */
}
/* Overall layout -------------------------------------------*/
#topcontainer
{
	width: 100%;
}
/* container surrounding containing three columns below */
#content
{
	width: 100%;
	max-width: 1200px;
}
/* main column with login fields and text below them */
.column2
{
	width: 60%;
	max-width: 450px;
}

@media (min-width: 1200px)
{
	#content /* container surrounding containing three columns below */
	{
		max-width: 1200px;
	}

	.column2 /* main column with login fields and text below them */
	{
		width: 60%;
		max-width: 450px;
	}
}

@media (min-width: 900px) and (max-width: 1200px)
{
	#content /* container surrounding containing three columns below */
	{
		max-width: 1150px;
	}

	.column2 /* main column with login fields and text below them */
	{
		width: 60%;
		max-width: 400px;
	}
}

@media (min-width: 600px) and (max-width: 900px)
{
	#content /* container surrounding containing three columns below */
	{
		max-width: 850px;
	}

	.column2 /* main column with login fields and text below them */
	{
		width: 90%;
		max-width: 400px;
	}
}

@media (max-width: 600px)
{
	#content /* container surrounding containing three columns below */
	{
		max-width: 550px;
	}

	.column2 /* main column with login fields and text below them */
	{
		width: 90%;
		max-width: 400px;
	}
}

/* Headings ----------------------------------- */
h1
{
	color: #006680;
	font-size: 16pt;
	font-family: Arial;
	font-weight: normal;
}

h2
{
	color: #006680;
	font-size: 13pt;
	font-family: Arial;
	font-weight: bold;
	margin-bottom: 0px;
}

h3
{
	color: #006680;
	font-size: 12pt;
	font-family: Arial;
	font-weight: bold;
}

/* Form ---------------------------------------------------------------- */
.formFieldName
{
	color: #808080;
	font-size: 16px;
	font-weight: normal;
}

.textbox
{
	color: #808080;
	font-size: 16px;
	border: 1px solid #042A57;
	border-radius: 5px;
}

.checkbox
{
	font-size: 13px;
}

.buttons
{
	-moz-box-shadow: inset 0px 1px 0px 0px #9DEE9;
	-webkit-box-shadow: inset 0px 1px 0px 0px #30A4C0;
	box-shadow: inset 0px 1px 0px 0px #30A4C0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #30A4C0), color-stop(1, #006880));
	background: -moz-linear-gradient(top, #30A4C0 5%, #006880 100%);
	background: -webkit-linear-gradient(top, #30A4C0 5%, #006880 100%);
	background: -o-linear-gradient(top, #30A4C0 5%, #006880 100%);
	background: -ms-linear-gradient(top, #30A4C0 5%, #006880 100%);
	background: linear-gradient(to bottom, #30A4C0 5%, #006880 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#30A4C0', endColorstr='#006880',GradientType=0);
	background-color: #30A4C0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #006880;
	color: #ffffff;
	font-size: 15px;
	text-shadow: 0px 1px 0px #006880;
}

.buttons:hover
{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006880), color-stop(1, #30A4C0));
	background: -moz-linear-gradient(top, #006880 5%, #30A4C0 100%);
	background: -webkit-linear-gradient(top, #006880 5%, #30A4C0 100%);
	background: -o-linear-gradient(top, #006880 5%, #30A4C0 100%);
	background: -ms-linear-gradient(top, #006880 5%, #30A4C0 100%);
	background: linear-gradient(to bottom, #006880 5%, #30A4C0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006880', endColorstr='#30A4C0',GradientType=0);
	background-color: #006880;
}

/* Expanding block if needed -------------------------------------------- */
.rogerwide
{
	background-color: #DDF2F7;
}

.expandicon{
	vertical-align: text-bottom;
	margin: 0px 1px -1px 1px;
}
