@charset "UTF-8";

/* Layout Small Screens */

header { 
	height: 100px; 
	background: url(../images/tsf/header_small.png) repeat-x right 0px
}

/*header a.logo {
	width: 100px;
	height: 87px;
	top: 2px;
	left: 20px;
	background-image: url(../images/tsf/tsf_logo_small.png);
	border-radius: 3px;
}*/

header a.TSF {
	font-size: 1.5em; 
	font-weight: bold; 
	color: #blue; 
	position: absolute;
	top: 5px;
	left: 5px;
	background-color: white;
	padding:5px;
	border-radius: 10px;
	/*top: 80px;
	right: 20px;*/
	z-index: 1;	
	text-decoration: none;
}
.alert 
{ 
	color:white;
	background-color:#D90000;
	font-size: 1.2em;
	line-height: 1.7em;
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 10px 10px 10px 10px;
}

article { padding: 0px 20px 10px 20px}


/*make nav show up in the order its div appears*/
/*nav { 
	position: static;
	padding: 10px 0px 10px 0px;
	background-color: #515673;
}*/

/*set the border radius for buttons for mozilla and webkit*/
/*nav a {
	color: #a6abc5;
	display: block;
	margin: 15px;
	padding: 9px;
	border: 1px solid #a6abc5;
	background: url(../images/mobile_link_arrow.png) no-repeat right center;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}*/

/*nav a:hover { color: #fff; background-color: rgba(255,255,255,.15)}*/
/*nav { 
	top: 100px; 
}*/

nav > label{
	display: block;
	color: #fff;
	background-color: #003699;
	margin-bottom: 10px;
	padding: 10px 0;
}

nav > ul {
	display: none;
    clear: both;
}
nav > input:checked + ul { /* <================ This is the key */
    display: block;
	opacity: 1;
	visibility: visible;
	padding-left:20px;
	padding-right:20px;
}
/*nav ul {
	opacity: 1;
	visibility: visible;
	padding-left:20px;
	padding-right:20px;
}*/

nav ul li {
	display: block;
	margin: 0 0 0 0;
	position: relative;
	padding: 8px 15px 8px 15px;
	background: #003699;
	color:#fff;
	margin-right: -4px;
	cursor: pointer;
}

nav ul li ul {
	padding: 0;
	position: relative;
	top: 8px;
	left: 0px;
	width: 100%;
	display: block;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
nav ul li ul li { 	
	font-size: 1em;
	display: block;
	background: #003699;
	color: #fff;
	border-radius: 0px 0px 0px 0px;
	z-index: 1;
}

nav ul li a{
	padding: 15px;
}
nav ul li ul li a {
	width: 100%;
}
/*nav ul li:hover ul, nav ul li:active ul, nav ul li:focus ul{
	display: block;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}*/

nav ul li:hover{
	background: #003699;
}
nav ul li ul li:hover{ 
	background: #666666;
}

/* Small Tables */
table{
	width: 100%;
	overflow: hidden;
}
table, th, td{
	font-size: 1em;
}
td {
    /*height: 50px;*/
    vertical-align: middle;
	padding: 5px;
}

/* Responsive Table with Headings */
.multi-column-table {
	margin: 1em 0;
	min-width: 300px;
	width: 100%;
	overflow: hidden;
}

.multi-column-table tr {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.multi-column-table th {
	display: none; 
}

.multi-column-table td {
	display: block; 
}
.multi-column-table td:first-child {
	padding-top: .5em;
}
.multi-column-table td:last-child {
	padding-bottom: .5em;
}
.multi-column-table td:before {
	content: attr(data-th); 
	font-weight: bold;
	width: 5em; 
	display: inline-block;
}

/* Form input fields*/
.forms h1 {
	margin:-30px -20px 10px -30px;
}
.shortField {
	display:inline-block;
	margin-right: 5px;
	width:98%;
}

.telephone .phone{
	width:70%;
}
.telephone .extension{
	width:27%;
}

.grade{
	display:inline-block;
	width:100%
}
.grade label{
	text-align:center;
	display:inline-block;
	width:98%;
	padding-right: 10px;
}

.forms {
    padding: 30px 10px 20px 10px;
}

.forms fieldset {
	margin:20px 0 0 0;
	padding: 10px;
}

.content_container {padding: 15px 10px 15px 10px;}

/*put a line to separate the footer*/
footer { border-top: 1px solid #a6abc5;}

/*no need of the background image since you can't see it*/
body { background-image: none}