@import url('normalize.css');
/* @fontface */
@import url(//fonts.googleapis.com/css?family=Oswald:400,700,300|Open+Sans:400,700);
/* -------- General -------- */
body {font-family:'Open Sans', sans-serif, verdana; color:#000; background:#fff; font-size: 13px;}
/* Links */
a {color:#00758d;}
a:focus {outline:thin dotted;}
a:hover, a:active {outline:0;}

/* Header */
#container {
	width:836px; position:relative; margin:0 auto;
	background-color:#fff; margin-top: 10px; position: relative;
	box-shadow:0 0 20px rgba(0,0,0,.4); -webkit-box-shadow:0 0 20px rgba(0,0,0,.4); -moz-box-shadow:0 0 20px rgba(0,0,0,.4);
	}

#top {position:relative; z-index:1; background: #008fa8; min-height: 137px;}
	/* Logo */
	a.logo {
		width:122px; height:137px; display:block; cursor:pointer; text-indent:-9999px;
		background:url(../images/brand.jpg) no-repeat 0 0; margin: 0 0 0 20px; float: left;
		}
	.social {position:absolute; right:20px; top:10px;}
	a.facebook, a.youtube {
		position: relative; float: right; display: block; height: 26px; width: 26px; margin: 10px 0 0; text-indent:-9999px;
		}
		a.facebook {background: url(https://myaccount.sabesjcc.org/jmx-console/images/facebook.jpg) no-repeat; margin: 10px 10px 0 0;}
		a.youtube {background: url(https://myaccount.sabesjcc.org/jmx-console/images/youtube.jpg) no-repeat;}


/* Navigation (Dropdown with other jQuery effects) */
#nav {position: relative; float: right;}
#nav .title {color: #fff; font-size:30px; line-height:32px; font-weight: 400; text-align:right; margin:18px 20px 8px 0;}

#nav ul {float: right;}
#nav ul li {list-style: none; border-right: 1px solid #fff; text-transform: uppercase;}
#nav ul li.last {border-right: none;}
#nav ul li a {text-decoration: none; color: #fff; font-weight:300; display:block; padding: 0 18px; cursor:pointer;}
#nav ul li a:hover {color: #f0812c;}

/* Drop Down Nav */
.nav, .nav ul, .sub-nav ul {list-style: none; font-weight:400;}
.nav {float:right; font-size:14px;}
.nav > li {float:left;}
.nav > li > a {color:#fff; position:relative;}
.nav > li:hover > a {color:#f0812c;}
.nav li a, .sub-nav li a {display: block; text-decoration: none;}
/* drop down style */
.nav ul, .sub-nav ul {position: absolute; display: none; z-index: 999; padding:5px 0 5px 8px; background:url(../images/white-90.png);}
.sub-nav ul {width:117px; margin:0; text-align:left;}
.nav ul li, .sub-nav ul li {border:none; padding:0;}
.nav ul li a, .sub-nav ul li a {border-right:none; border-bottom:1px solid #444; display:block; padding:1px 5px; font-size:12px; line-height:22px; color:#444; font-weight:400; text-transform:none; cursor:pointer;}
.nav ul li:hover a, .sub-nav ul li:hover a {color:#008ea8;}
.sub-nav ul li:hover a {text-transform:uppercase;}
.nav li:hover ul.noJS {display: block;}

.sub-nav {position:relative; color:#fff; line-height:27px; margin:15px 0; padding:0; text-align:center;}
.sub-nav > li {width:110px; height:30px; display:inline-block; margin: 2px; padding:0; cursor:pointer;}
.sub-nav > li > a {display:block; font-size:12px; color: #fff; text-decoration: none;}
.sub-nav > li:hover a {background-image:url(../images/white-40.png);}

.box-color-1, .fusia {background-color: #b51a92;}
.box-color-2, .lightblue {background-color: #41bed6;}
.box-color-3, .purple {background-color: #532691;}
.box-color-4, .green {background-color: #c0d026;}
.box-color-5, .orange {background-color: #f0812c;}
.box-color-6, .bluegreen {background-color: #81cec7;}
.box-color-7, .pink {background-color: #dd0078;}


/* --------- Helper Classes -------- */
/* For image replacement */
.ir {display:block; border:0; text-indent:-999em; overflow:hidden; background-color:transparent; background-repeat:no-repeat; text-align:left; direction:ltr} .ir br {display:none} .hidden {display:none !important; visibility:hidden} .visuallyhidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px} .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto} .invisible {visibility:hidden} .clearfix:before, .clearfix:after {content:""; display:table} .clearfix:after {clear:both} .clearfix {zoom:1} .clear {clear:both}

/* --------- Media Queries -------- */
@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

/* --------- Print Styles -------- */
@media print {* {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important} a, a:visited {text-decoration: underline} a[href]:after {content:" (" attr(href) ")";} abbr[title]:after {content:" (" attr(title) ")";} .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content:"";} pre, blockquote {border:1px solid #999; page-break-inside:avoid;} thead {display:table-header-group;} tr, img {page-break-inside:avoid;} img {max-width:100% !important;} @page {margin:0.5cm;} p, h2, h3 {orphans:3; widows:3;} h2, h3 {page-break-after:avoid;}}