/* global settings */
* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	background-color: #fff;
	font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif; 
	font-size:100%;
}

/* 
 *  For visible focus indicator around radio buttons and checkboxes
*/
input[type="radio"]:-moz-focusring { outline: #013151 dotted 1.5pt;}
input[type="checkbox"]:-moz-focusring { outline: #013151 dotted 1.5pt;}

.hideme{
	position: absolute;
	clip:rect(1px 1px 1px 1px);	
}

header {
	background-color:#003C74 !important;	
	padding-top:.8em;
}

header a > img {
	background:transparent;
    border-bottom:1pt solid #003C74;;
}

header a {
	background:transparent;
    color: #ffffff;
    line-height: inherit;
    text-decoration: underline;
}

header a:hover {
	background:transparent;
    color: #ffffff;
    line-height: inherit;
    text-decoration: underline;
}


header a:hover > img {
	background:transparent;
    border-bottom:1pt solid #ffffff;
}

header a:focus {
    color: #ffffff;
    line-height: inherit;
    text-decoration: underline;
	border:1pt dashed #ffffff;
}

.bar1{	
	color:#fff;
	/*padding: 1em 1em 1em 1em;	*/
	width:100%;
	height:auto;
	clear:both;
}
.bar1 > img{
	border:none;
}

.top-bar-section .has-dropdown a:hover, a:not(.link):hover{
	text-decoration:underline;
}
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button):hover {
    background: none repeat scroll 0 0 #0074c1;
    color: #ffffff;
	text-decoration:underline;
}
ul.dropdown li a:hover{
	text-decoration:underline;
}

.contain-to-grid {
 	background: none repeat scroll 0 0 #0063c6;
	border-top:1pt solid #fff;
    width: 100%;
}

.top-bar-section ul li {
    background: none repeat scroll 0 0 #0063c6;
}

.top-bar-section li:not(.has-form) a:not(.button) {
    background: none repeat scroll 0 0 #0063c6;
}
ul.left li a{
	font-size:100%;	
	text-decoration:none;
}			

ul.right li a{
	font-size:90%;	
	text-decoration:none;
}			

.top-bar-section li.active {
    background: none repeat scroll 0 0 #003c74;
}	
.top-bar-section li.active:not(.has-form) a:not(.button) {
    background: none repeat scroll 0 0 #003c74;
    color: #ffffff;
    line-height: 2.8125rem;
    padding: 0 0.9375rem;
}

.top-bar-section li:not(.has-form):hover a:not(.button):hover {
    background: none repeat scroll 0 0 #003c74;
}	
			 
ul.left li a:focus, ul.right li a:focus{	
	border:1pt dashed #e1e1e1;
}

a:hover{
	text-decoration:underline;
}

span a{
	float:left;
	margin:.7em 8em .0em .0em;
}

span.desc{
	font-size:86%;
	color:#3d3d3d;
	padding-left:1em;
}
.gar-title{ font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
	/*padding: 0em 0em 0em 0em;*/
	margin:0em 0em 0em 2em;
	font-size: 180%;
	font-weight:400;
	color:#fff;	
	float:left;
}

.mainwrap{
	padding:.0em;
}

label  {
	color:#111111;
	font-size: 115%;	
	width:220px;
	margin:.0em .0em .0em .0em;
	text-align:left;
}

label.lg  {
	color:#111111;
	font-size: 115%;	
	width:350px;
	margin:.0em .0em .0em .0em;
	text-align:left;
	clear:both;
}

label.inline{
	padding-bottom:.0em;
}

.contain{
	width:500px;
	margin:0 auto .0em auto;	
	text-align:center;
	clear:both;
}
.incontain{
	width:320px;	
	margin:.0em auto .0em auto;
	clear:both;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
    background-color: #ffffff;
    border-color: #9d9d9d;
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-family: inherit;
    font-size: 0.875rem;
    height: 2.3125rem;
    margin: 0 0 1rem;
    padding: 0.5rem;
    transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;
	width:90%;
}

div.incontain input[type="text"] {
    border: 2px solid #bbb;
    width: 90%;
	float:left;
}

select {
	font-size: 100%;	
	width:220px;
	margin:.0em .0em 1em .0em;
}

.text-center{
	width:100%;
	margin:0 auto;
}


.rt{
	margin-right:3em;
}

div.graybox {
    background-color: #f8f8f8;
    border: 2px solid #f0f0f0;
    margin: .0em auto 1em auto;
    max-width: 600px;
    padding: 30px 0;
}

.welcome{
	color:#003c64;
	font-size:110%;
	line-height:1.2em;
	font-weight:600;
	border-bottom:1pt solid #3d3d3d;
	margin-bottom:.4em;
}

.welc-ital{
	font-style:italic;
}

div.graybox2 {
    background-color: #f8f8f8;
    border: 2px solid #f0f0f0;
    margin: 1em auto 1em auto;
    max-width: 100%;
    padding: 1em .8em;
}

div.box {
    background: transparent;
    border: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    padding: 30px 0;
}

.accordion .accordion-navigation > a, .accordion dd > a {
    background: none repeat scroll 0 0 #efefef;
    color: #222222;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    font-size: 90%;
    padding: .8em;
}

ul {
    margin-left: .0rem;
}

li.accordion-navigation{
	border:1pt solid #ccc;	
}
/* Use display:block to show the accordian and display:none to hide the accordian */
.show{
	display:show;
	border-left:1pt solid #ccc;
	border-right: 1pt solid #ccc;
	border-top: 1pt solid #ccc;
}

button, .button {
	background-color:#0063c6;
    color: #ffffff;
    display: inline-block;
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
	border: 1pt solid #336699;
	/*border:1pt solid #9d9d9d;*/
    box-shadow: 2px 2px 0px #a1a1a1;
    padding: .7rem .8rem;
}
button:hover, .button:hover,
button:focus, .button:focus {
	background-color:#003c74;
}
h1#header {
	background: #003366 url('../images/separator.png') repeat-x left bottom; 
	padding: .5em; 
	text-align: center;
}

img#campuslogo {
	padding-right: 2em;
}

div#paymentseal {
	text-align: center; 
	padding-bottom: 2em;
}

.clearboth {
	clear: both;
}

/* page specific settings */

/* card input page */
div#cardinputcontainer, div#cardreturncontainer, div#welcomecontainer, div#customerlogoncontainer,
div#customerenrollcontainer, div#mainmenucontainer, div#messageboxcontainer, div#chooseinvoicescontainer,
div#confirminvoicescontainer, div#customerlogoffcontainer, div#customerchangepasswordcontainer,
div#garreceiptcontainer, div#departmentlistcontainer, div#systemerrorcontainer, div#cardsecuritycontainer {
	width: 40em;
	border: 1px solid #800019;
	text-align: left;
	background-color: #eeeeee;
	margin: .5em auto .5em auto;
} 

div#paymenthistorycontainer {
	width: 45em;
	border: 1px solid #800019;
	text-align: left;
	background-color: #eeeeee;
	margin: .5em auto .5em auto;
}

p#cardinputamount {
	width: 71%;
	float: right;
	text-align: center;
	font-size: xx-large;
	font-weight: bold;
	margin: .7em 0;
}

p#cardinputcardtypes {
	width: 71%;
	float: right;
	padding-top: 1em;
	text-align: center;
}

div#cardreturnlink {
	width: 100%;
	padding-top: .5em;
	text-align: center;
}

div#cardinputerror, div#cardinputcardinfo, div#cardinputaddressinfo, div#cardinputcontactinfo {
	width: 72%;
	float: right;
	padding-top: .5em;
	text-align: left;
}

div#cardinputsubmit {
	width: 30%;
	float: left;
	margin-left: 5em;
}

div#cardinputbuttons {
	width: 40%;
	float: left;
	margin-left: 5em;
}

div#achinputsubmit {
	width: 65%;
	float: right;
	margin-right: 2em;
}

.cardinputdescriptioncontainer, .garreceiptdescriptioncontainer {
width: 28%;
	text-align: left; 
	float: left; 
}

.cardinputsectionbreaker, .garreceiptsectionbreaker {
	border-bottom: 1px solid #828282; 
	clear: both;
}

.cardinputdescriptionheader, .garreceiptdescriptionheader {
	font-size: medium;
	font-weight: bold;
	font-style: normal;
	color: #800019;
	margin-left: .5em;
	padding: .5em 0 .25em .5em;
	border-bottom: 1px solid #828282;
	text-align: left;
}
 
.cardinputdescriptiontext, .cardreturndescriptiontext, .garreceiptdescriptiontext {
 	line-height: 130%;
	font-size: small;
	font-weight: normal;
	font-style: normal;
	color: #000000;
	padding: .25em 1em .5em 1em;
	text-align: left;
 }

.cardinputlabel {
	float: left;
	width: 13em;
	font-weight: bold;
	font-size: small;
	text-align: right;
	margin: 0 .25em 0.5em 0;
}

h3#cardinputcardinfoheader {
	text-align: center; 
	font-size: small; 
	font-weight: bold; 
	margin-bottom: .25em;
}

.cardinputcardformvalue {
	text-align: left;
	padding-left: 3px;
	float: left;
}

input#cardinputleftbutton {
	margin: 0 2em 0 4em;
}

input#cardinputrightbutton {
	margin-left: 2em;
}

h2#cardinputerrorheader, h2#garreceipterrorheader {
	font-size: large;
	color: #ff0000;
}

ul#cardinputerror, ul#passwordchangeerror, ul#garreceipterror, ul#changepassworderror, ul#dynamicformerror, p#cardinputerror {
	font-weight: bold;
	font-size: small;
	color: #ff0000;
	padding: .5em 2em .5em 1em;
	text-align: left;
}

/* welcome page */

h2#welcomeheader, h2#customerlogonheader, h2#customerenrollheader, h2#mainmenuheader, h2#messageheader,
h2#chooseinvoicesheader, h2#garreceiptheader, h2#cardreturndescriptionheader, h2#gardepartmentlistheader,
h2#systemerror, .cardverificationheader {
	font-size: medium;
	font-weight: bold;
	font-style: normal;
	color: #800019;
	margin: 0 .5em;
	padding: .5em 0 .25em .5em;
	border-bottom: 1px solid #828282;
	text-align: left;
}

h3#customerenrollsubheader {
	font-size: small;
	font-weight: bold;
	font-style: normal;
	color: #000000;
	padding: .5em 0 .25em .5em;
	text-align: center;
}

.welcometext, .customerlogontext, .customerenrolltext, .changepasswordtext, .paymenthistorytext, .systemerrortext {
	font-size: small;
	font-weight: normal;
	font-style: normal;
	color: #000000;
	padding: .75em 1em;
	text-align: left;
}

p#hidden {
	color: #cccccc;
}

/* customer logon page */
.customerlogoninputlabel, .customerpasswordinputlabel {
	float: left;
	width: 14em;
	font-weight: bold;
	font-size: small;
	text-align: right;
	display: block;
	margin: 0 .25em 1em 0;
}

.errortext {
	font-size: larger;
	font-weight: bold;
	font-style: italic;
	color: #DD0000;
	padding: 0 1em .75em 1em;
	text-align: left;
}

div#customerenrollsubmit, div#customerlogonsubmit, div#customerlogoffsubmit, div#customerpasswordsubmit {
	text-align: center;
	margin-bottom: 1em;
}

input#customerlogonleftbutton, input#customerenrollleftbutton, input#customerinvoiceleftbutton, 
input#customerlogoffleftbutton, input#customerpasswordleftbutton {
	margin-right: 2em;
}

input#customerlogonrightbutton, input#customerenrollrightbutton, input#customerinvoicerightbutton,
input#customerlogoffleftbutton, input#customerpasswordrightbutton {
	margin-left: 2em;
}

/* customer enrollment page */

.customerenrollinputlabel {
	float: left;
	width: 10em;
	font-weight: bold;
	font-size: small;
	text-align: right;
	display: block;
	margin: 0 .25em 1em 0;
}

ul#customerenrollinputerror {
	font-weight: bold;
	font-size: small;
	color: #ff0000;
	padding: 1em 0 1em 1em;
	margin-left: 1em;
	text-align: left;
}

/* main menu*/

div#summarycontainer {
	width: 20em;
	float: right;
	padding: .25em 0;
	margin: .5em;
	border: 1px solid #800019;
}

p#summarywelcometext {
	font-size: small;
	font-weight: bold;
	font-style: normal;
	color: #800019;
	margin: 0 .5em;
	padding: 0 0 .25em .5em;
	border-bottom: 1px solid #828282;
	text-align: left;
}

ul#summarylist, ul#chooseinvoiceserror {
	list-style: none; 
	margin-left: .75em;
}

.summarylabel {
	font-size: small;
	font-weight: normal;
}

.summarydata {
	font-size: small;
	font-weight: bold;
}

ul#mainmenulist {
	list-style: none; 
	margin-bottom: .5em;
}

.mainmenuitem {
	font-size: small;
	font-weight: bold;
	font-style: normal;
	margin: 0 .5em;
	padding: .5em 0 .25em .5em;
	text-align: left;
}

a.menulink {
	color: #000000;
	padding: .1em;
	font-size: small; 
	font-weight: bold; 
}	

a.menulink:hover {
	color: #FFFFFF;
	background-color: #003366;
	text-decoration: none;
	font-size: small; 
	font-weight: bold; 
}

.messagetext {
	font-size: small;
	font-style: normal;
	margin: .5em;
	padding: 0 0 .25em .5em;
	text-align: left;
}

/* choose and confirm customer invoices */

p#mainmenulink {
	float: right;
	margin: .4em .5em 0 0;
}

.invoicetext {
	padding: 0.5em 1em; 
	font-size: small;
}

.error {
	color: #FF0000;
	font-weight: bold; 	
}

div#customerinvoicesubmit {
	text-align: left;
	margin: 0 0 1em 3em;
}

table#chooseinvoice, table#confirminvoice, table#paymenthistory {
	width: 97%;
	margin: .5em; 
	border-collapse: collapse;
}

th#invoiceheader {
	color: #800019; 
	text-align: left; 
	padding-left: 1.5em; 
	border-bottom: 1px solid #828282;
}

th#descriptionheader {
	color: #800019;
	text-align: center;
	border-bottom: 1px solid #828282;
}

th#duedateheader {
	color: #800019;
	text-align: center;
	border-bottom: 1px solid #828282;
}

th#amountdueheader {
	color: #800019;
	text-align: right;
	padding-right: 1em;
	border-bottom: 1px solid #828282;
}

th#transactionidheader {
	color: #800019; 
	text-align: left; 
	padding-left: 1.5em; 
	border-bottom: 1px solid #828282;
}

th#paymentamountheader {
	color: #800019;
	text-align: right;
	padding-right: 1em;
	border-bottom: 1px solid #828282;
}

th#paymentdateheader {
	color: #800019;
	text-align: center;
	border-bottom: 1px solid #828282;
}

td.invoicedata {
	text-align: left; 
	padding-top: .25em;
	padding-left: 1em;
}

td.invoicedataindent {
	padding-left: .25em;
}

span.invoicedata, label.invoicedata {
	padding-left: .25em;
}

td.descriptiondata {
	text-align: left; 
	padding: .25em 0 0 1em;
}

td.duedatedata {
	text-align: right; 
	padding: .25em 1.5em 0 0;
}

td.amountduedata {
	text-align: right; 
	padding: .25em 1em 0 0;
}

td.transactioniddata {
	text-align: left; 
	padding: .25em 0 0 1.5em;
}

td.transactiontypedata {
	text-align: left; 
	padding: .25em 0 0 2em;
}

td.paymentamountdata {
	text-align: right; 
	padding: .25em 2em 0 0;
}

td.paymentdatedata {
	text-align: left; 
	padding: .25em 0 0 1em;
}

td.disabled {
	color: #aa0000;
}

th.disabled {
	color: #696969;
}

td#balancelabel {
	text-align: right; 
	padding-right: 1em; 
	font-weight: bold; 
	padding-top: .5em;
	color: #800019;
}

span#balancedata {
	color: #000000;
}

/* customer log off */

.logofftext {
	padding: 0.5em 1em; 
	font-size: small;
}

/* gar receipt */

.garreceiptlabel {
	float: left;
	width: 17em;
	text-align: right;
	font-weight: bold;
	font-size: small;
	margin-bottom: .5em;
}

.garreceiptdata {
	float: left;
	width: 12em;
	text-align: left;
	font-size: small;
	padding-left: .3em;
}

table#garreceiptdetailtable {
width: 17em; 
	font-size: small;
	margin: 0 auto;
}

table#garreceiptdetailtable th {
	padding-left: 2.5em; 
	width: 10em;
}

td.garreceiptdetailtableinvoiceid {
	text-align: left; 
	padding-left: 2em;
}

td.garreceiptdetailtableamount {
	text-align: right; 
	padding-right: 2em;
}

label#garemaillabel {
	float: left;
	width: 14em;
	text-align: right;
	font-weight: bold;
	font-size: small;
	padding-right: .3em;
}

div#garreceiptgeneralinfo, div#garreceiptinvoicedetail, div#garreceiptcarddescription, div#garreceiptemailinput  {
	width: 65%; 
	float: right;
	padding-top: .5em;
	text-align: left;
}

p#garreceiptcarddescriptiontext {
	font-weight: bold;
	font-size: small;
	text-align: center;
	margin-top: 2em;
}

div#garreceiptemailsubmit {
	text-align: center; 
	margin: .5em auto 0 auto;
}

p#garreceiptemailresponse {
	font-weight: bold;
	font-size: small;
	text-align: center;
	margin: .5em 0;
}

/* participating department list */

.departmentlisttext {
	padding: 0.5em 1em; 
	font-size: small;
}

table#departmentlist {
	border: 1px solid #800019; 
	margin: 1em auto; 
	border-collapse: collapse; 
	background-color: #FFFFFF; 
	font-size: small;
}

table#departmentlist th {
	border: 1px solid #828282; 
	padding: .2em;
}

table#departmentlist td {
	padding: 0 .5em; 
	border: 1px solid #828282;
}

div#departmentlistclosebutton {
	text-align: center; 
	margin-bottom: .5em;
}

footer{
	clear:both;
	background:#003C74;
	/*bottom:0;
	position:absolute;*/
	width:100%;
	margin-top:4em;
	padding:1em;
}

.copyright{
	font-size:76%;
	color:#ffffff;	
	margin-top:.8em;
}
footer a > img {
	background:transparent;
    border-bottom:1pt solid #003C74;;
}

footer a {
		background:transparent;
    color: #ffffff;
    line-height: inherit;
    text-decoration: underline;
}

footer a:hover {
	background:transparent;
    color: #ffffff;
    line-height: inherit;
    text-decoration: underline;
}


footer a:hover > img {
	background:transparent;
    border-bottom:1pt solid #ffffff;;
}

footer a:focus {
    color: #ffffff;
    line-height: inherit;
    text-decoration: underline;
	border:1pt dashed #ffffff;
}

footer p {
    color: #ffffff;
	font-size:86%;
}


/*-for smaller displays */
@media only screen and (max-width: 75em) { 

	header{
		/*height:420px;*/
		height:auto;
	}

	.bar1{	
		color:#fff;
		padding: 1em 1em 1em .0em;	
		width:100%;
		height:auto;
		clear:both;
	}
	.bar1 > img{
		border:none;
	}

	.top-bar-section .dropdown li.title h5, .top-bar-section .dropdown li.parent-link {
		font-size: 100%;
		margin-bottom: 0;
		margin-top: 0;
	}
	ul.left li a,
	ul.left li.has-dropdown li a, 
	ul.left li ul.dropdown li a   {
		font-size: 96%;
		text-decoration:none;
	}

	ul.dropdown li a:hover{
		text-decoration:underline;	
	}

	span a{
		float:left;
		margin:.2em 6em .8em .0em;
	}

	.gar-title{
		font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
		font-size: 180%;
		font-weight:400;
		color:#fff;	
		/*padding: 0em 0em 0em 0em;*/
		margin:0em 0em .5em .0em;
		float:left;
	}
}

/*-for smaller displays */
@media only screen and (max-width: 40em) { 
	body { 
		background-image:none;
	}

	header{
		/*height:420px;*/
		height:auto;
	}


	h2 {
		font-size:130%;
		padding-top:.0em;
		margin:.8em .0em .0em .0em;
	}
	.bar1{	
		color:#fff;
		padding: 1em 1em 1em .0em;	
		width:100%;
		height:auto;
		clear:both;
	}
	.bar1 > img{
		border:none;
	}

	.top-bar-section .dropdown li.title h5, .top-bar-section .dropdown li.parent-link {
		font-size: 100%;
		margin-bottom: 0;
		margin-top: 0;
	}
	ul.left li a,
	ul.left li.has-dropdown li a, 
	ul.left li ul.dropdown li a   {
		font-size: 96%;
		text-decoration:none;
	}

	span a{
		margin:.2em .0em .8em .0em;
	}

	.gar-title{ font-family: 'Source Sans Pro', 'Arial', 'Helvetica', sans-serif;
		font-size: 135%;
		font-weight:400;
		color:#fff;	
		width:100%;
		float:left;
		text-align:center;
		margin:0em 0em .5em .0em;
	}

	div.graybox {
		background-color: #f8f8f8;
		border: 2px solid #f0f0f0;
		margin: .0em auto 1em auto;
		min-width: 97%;
		max-width: 97%;
		padding: 30px 0;
		height:auto;
		clear:both;
	}
	div.box {
		background: transparent;
		border: none;
		margin-left: auto;
		margin-right: auto;
		min-width: 97%;
		max-width: 97%;
		padding: 30px 0;
		clear:both;
	}
	.contain{
		min-width: 97%;
		max-width: 97%;
		margin:0 auto .0em auto;	
		clear:both;
	}
	.incontain{
		width:360px;	
		margin:.0em .8em .0em .0em;
		clear:both;
	}

	div.incontain input[type="text"], input[type="password"] {
		border: 2px solid #bbb;
		float: left;
		width: 64%;
	}

	label.lg  {
		color:#111111;
		font-size: 100%;	
		width:280px;
		margin:.0em .0em .0em .0em;
		text-align:left;
		clear:both;
	}
	span.desc{
		font-size:76%;
		color:#3d3d3d;
		padding-left:.6em;
	}
}

.skip-link {
	background: #105756;
	color: #fff;
	font-weight: 700;
	left: 35%;
	padding: 4px;
	position: absolute;
	transform: translateY(-150%);
	margin-top: -100px;
}
  
.skip-link:focus {
	transform: translateY(0%);
	transition: transform 0.3s;
}
.border-right {
	border-right: 2px solid white;
}