﻿/**** STYLING RESET + DEFAULTS ****/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, ol, li
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight:normal;
	vertical-align: baseline;
	font-family: Roboto,arial,sans-serif;
	box-sizing:border-box;
	color:#848484;
	line-height:1.54;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}*,*:before,*:after{box-sizing:inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
div {
	overflow:auto;
}
ol li {
	font-size:16px;
	font-weight:normal;
	color:#000;
}
ol li h6 {
	font-weight:normal;
}
ol li ol li {
	font-size:14px;
	font-weight:normal;
	margin:15px 0 15px 0;
	color:#848484;
}
ol ol, ul ol { 
   margin-left: 15px; 
}
a {
	background-color:transparent;
	-webkit-text-decoration-skip:objects;
}
a:active,a:hover {
	outline-width:0;
}
h3 {
	font-size:24px;
	color:#000;
}
h6 {
	font-size:16px;
	color:#000;
}
p {
	margin-top: 1em;
    margin-bottom: 1em;
}
sup {
  /* Move the superscripted text up */
  top: -0.5em;
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/**** BUTTON/LINKS STYLING ****/
.button {
	border:none;
	display:inline-block;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	cursor:pointer;
	white-space:nowrap;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.button2 {
	border:none;
	display:inline-block;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:inherit;
	cursor:pointer;
	white-space:nowrap;
	margin:8px 0 8px 0;
}

/**** BAR STYLING ****/
.bar {
	width:100%;
	overflow:hidden;
}

/**** SHADOWS ****/
.card {
	box-shadow: 0 8px 6px -8px rgba(0,0,0,.3);
}

/**** COLUMN STYLING ****/
.col {
	float:left;
	width:100%;
}

.col.s1{width:8.33333%}
.col.s2{width:16.66666%}
.col.s3{width:24.99999%}
.col.s4{width:33.33333%}
.col.s5{width:41.66666%}
.col.s6{width:49.99999%}
.col.s7{width:58.33333%}
.col.s8{width:66.66666%}
.col.s9{width:74.99999%}
.col.s10{width:83.33333%}
.col.s11{width:91.66666%}
.col.s12{width:99.99999%}

@media (min-width:580px){
	.col.m1{width:8.33333%}
	.col.m2{width:16.66666%}
	.col.m3{width:24.99999%}
	.col.m4{width:33.33333%}
	.col.m5{width:41.66666%}
	.col.m6{width:49.99999%}
	.col.m7{width:58.33333%}
	.col.m8{width:66.66666%}
	.col.m9{width:74.99999%}
	.col.m10{width:83.33333%}
	.col.m11{width:91.66666%}
	.col.m12{width:99.99999%}
}

@media (min-width:941px){
	.col.l1{width:8.33333%}
	.col.l2{width:16.66666%}
	.col.l3{width:24.99999%}
	.col.l4{width:33.33333%}
	.col.l5{width:41.66666%}
	.col.l6{width:49.99999%}
	.col.l7{width:58.33333%}
	.col.l8{width:66.66666%}
	.col.l9{width:74.99999%}
	.col.l10{width:83.33333%}
	.col.l11{width:91.66666%}
	.col.l12{width:99.99999%}
}

/**** POSITIONS ****/
.top {
	top:0;
}

.fixed {
	position:fixed;
}

.absolute {
	position:absolute;
}

/**** WIDTHS ****/
.w100 {
	width:100%;
}

/**** CONTENT STYLING ****/
.content {
	max-width:1008px;
	margin:auto;
}

#content h3 {
	font-weight:normal;
}

#content {
	padding:0 15px 0 15px;
}

.main-content {
	font-size:14px;
	color:#444444;
}

.main-content a {
	color:#4285f4;
}

/**** PADDINGS ****/
.padding {
	padding:8px 16px!important;
}

.padding-tb {
	padding:8px 0!important;
}

.padding-rl {
	padding:0 16px!important;
}

.padding-rl15 {
	padding:0 15px!important;
}

.padding-tbrl15 {
	padding:8px 15px!important;
}

/**** MARGINS ****/
.margin-top {
	margin-top:140px;
}

/**** LOGO ****/
#logo-text {
	color: #8a8a8a;
	font-family: Roboto,arial,sans-serif;
	font-weight: 400;
	font-size:26px;
	vertical-align: baseline!important;
}

#logo {
	padding:25px 15px 23px 15px;
}

#logo > img {
	float:left;
	width:105px;
	margin:0;
	padding:0;
}

#logo > span {
	display:inline-block;
	line-height:28px;
	font-size:20px;
	margin:0 0 0 15px;
}

#logo-bar {
	z-index:999;
	background:white;
}

/**** NAVIGATION BAR (TOP) ****/
#navbar {
	font-size:14px;
}

#navbar a {
	margin:0 15px 0 0;
	padding:0 0 15px 0;
}

#navbar a:not(.active-page) {
	border-bottom: 2px solid transparent;
}

.active-page {
	color: #444;
	font-weight: bold;
	border-bottom: 2px solid #448aff;	
}

/**** SIDE BAR (LINKS) ****/
#side-bar {
	font-size:14px;
	overflow:visible;
}

.side-links {
	margin:0;
}

.side-links:before {
	border-left:4px solid transparent;
	content: "";
	margin-left:-15px;
	padding-left:11px;
}

.active-header {
	color: #4285f4;
	z-index:999;
}

.active-header:before  {
	border-left: solid 4px #4285f4;
	content: "";
	margin-left:-15px;
	padding-left:11px;
	z-index:9999;
}

/**** FLOAT ****/
.float-r {
	float:right;
}

.float-l {
	float:left;
}

/**** HIDING ****/
.hide {
	display:none;
}

/**** FOOTER ****/
#footer {
	margin-top:150px;
}

#footer-links {
    background-image: url("/shared_images/durell-rainbow.png");
    background-repeat: repeat-x;
    background-color: #f9f9f9;
    border-top: 1px solid #f5f5f5;
    padding: 40px 0 20px 0;
}

#footer-links ul {
	padding:0;
	margin:0;
}

#footer-links li {
	font-size:14px;
	list-style:none;
	padding:10px 0 0 0;
}

#footer-bar {
	background: #f9f9f9;
    border-top: 1px solid #f5f5f5;
    padding: 20px 0 20px 0;
}

#footer-nav {
	background: #f5f5f5;
    border-top: 1px solid #eee;
}

#footer-nav li {
	display:inline;
	font-size:11px;
	line-height:2.19;
	color: rgba(61,61,61,.8);
}

#footer-nav li:not(:first-child):before {
	content: "\0000b7";
    padding: 0 5px;
}

#footer-links .links-column:not(:last-child) li:last-child {
	padding:10px 0 20px 0;
}

#footer-links .links-column .split li:last-child {
	padding: 10px 0 0 0;
}

/**** BREAKPOINT MD - 940PX ****/
@media screen and (max-width:940px) {
	.md-hide {
		display:none;
	}
	#side-bar{
		position:static;
		padding:8px 16px 8px 16px;
	}
	#logo-bar {
		padding:0 20px 0 20px;
	}
	.button2 {
		padding:0;
	}
	.padding-mob {
		padding:8px 20px!important;
	}
	.margin-top {
		margin-top:120px;
	}
	#footer {
		margin-top:0;
	}
	.padding-mob-none {
		padding:0!important;
	}
	#logo {
		padding:25px 0 23px 0;
	}
}

/**** BREAKPOINT SM - 580PX ****/
@media screen and (max-width:580px) {
	.mob-hide {
		display:none;
	}

	#logo {
		width:80%;
		float:left;
	}

	#mob-menu {
		width:20%;
		float:right;
		padding:25px 0 23px 0;
		line-height:29px;
	}

	#mob-menu > a {
		padding: 0;
		font-size:29px;
        line-height:29px;
	}

	.margin-top{
		margin-top:90px;
	}

	.margin-top-mob {
		margin-top:220px;
	}

	.show-sm {
		display:block;
	}

	#side-items{
		float:left;
	}

	#navbar a {
		margin:0 0 15px 0;
		padding:0 0 5px 0;
	}
	
	.bar .bar-item {
		float:left;
		width:auto;
		clear:both;
		display:block;
		outline:0
	}
}
/**** BREAKPOINT XSM - 360PX ****/
@media screen and (max-width:360px) {
	#logo > span {
		float:left;
		margin:10px 0 0 0;
		width:100%;
	}

	.margin-top {
		margin-top:120px;
	}

	.margin-top-mob {
		margin-top:250px;
	}
}