/* this stylesheet is included as a starting point with the Perch Quill Feather, the design was created by Laura Kalbag for Perch. 
You are welcome to use this as is, or use it as a starting point when building your site.
SECTIONS:

1. Default styling - establishes the basic styles for elements on the site
2. Section specific styling - for specific parts of the site
3. Layout rules - these create the responsive layout
*/

/* *** 1. DEFAULT STYLING *** */
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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%; 
	font: inherit; 
	vertical-align: baseline; 
}

body {
	background: #fff; 
	line-height: 1;
}

strong { font-weight: bold; }
abr {
	border-bottom:1px dotted;
}

input[type=submit], button {
	cursor:pointer;-webkit-appearance:none;
} 

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block;
} 

/* make sure the page doesn't shift horizontally */
html {
	overflow-y:scroll
}


/* The default font and size from which other font sizes are calculated is set here. 
To have a different font, change the font family.
To make the text bigger across the site, change the font size */
body {
    color: #555;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 87.5%;
    line-height: 1.4;
    padding: 20px 0 0 0;
}

.wrapper {
	width: 90%;
    margin: 0 auto 0 auto;
    clear:both;
}

a {
    color: #333;
}

a:active,
a:hover {
    color: #000;
}

p {
    margin-bottom: 1.2em;
}

h1, h2, h3, h4 {
    font-weight: bold;
    margin: 1em 0 0.5em 0;
}

h1 a, h2 a, h3 a, h4 a {
    font-weight: bold;
}

h1 {    
    letter-spacing: 1px;
    text-transform: uppercase;
}


img {
    border: 1px solid #e2e2e2;
    margin-bottom: 1em;
    max-width: 100%;
	height: auto;
}


figure figcaption h4 {
    margin-top: 0;
}

figure figcaption p {
    margin-bottom: 0;
}

form {
    overflow: hidden;
}

form fieldset {
    border: 1px solid #e2e2e2;
    margin: 2em 0;
    padding: 1em;
}

form legend {
    font-weight: bold;
    margin-left: -1em;
    padding: 0 1em;
}

form label {
    display: block;
    margin-bottom: 0.5em;
}

form input[type=text],
form input[type=email],
form input[type=password],
form input[type=search],
form input[type=url],
form textarea {
    background: #fff;
    background: -moz-linear-gradient(top, #f1f1f1 1%, #ffffff 25%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f1f1f1), color-stop(25%,#ffffff), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #f1f1f1 1%,#ffffff 25%,#ffffff 100%);
    background: -o-linear-gradient(top, #f1f1f1 1%,#ffffff 25%,#ffffff 100%);
    background: -ms-linear-gradient(top, #f1f1f1 1%,#ffffff 25%,#ffffff 100%);
    background: linear-gradient(top, #f1f1f1 1%,#ffffff 25%,#ffffff 100%);
    border: 1px solid #dee0e0;
    color: #000;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    margin-bottom: 2em;
    padding: .5em;
    width: 95%;
}


form input[type=submit],
form input[type=button],
form button {
    background: #333;
    border: 1px solid #333;
    border-radius: 10px;
    color: #fff;
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    margin-bottom: 2.5em;
    padding: .5em 1em;
}

form input[type=submit]:hover,
form input[type=button]:hover,
form button:hover,
form input[type=submit]:active,
form input[type=button]:active,
form button:active {
    background: #000;
    border: 1px solid #000;
}

ul.footer-addr {
	list-style-type: none;
	float: left;
}
ul.footer-addr li {
	list-style-type: none;
	float: left;
	margin-right: 5px;
}


/* *** MAIN-NAV *** */


#menu-icon {

	display: inline-block;
	width: 104px;
	height: 50px;
	background: #4C8FEC url(/images/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;

}

.headerH2 {
	font-size: 1.2em;
}
.headerH2 a {
	text-decoration:none;
}
.headerH2 a span {
	font-size: 0.01em;
}

.main-nav {
   /* border-top: 1px solid #e2e2e2; */
    margin-bottom: 5px;
}

.main-nav li {
    list-style-type: none;
}

.main-nav li a {
    color: #555;
    display: block;
   font-weight: bold;
    /* letter-spacing: 1px; */
    padding-right: 2px;
    text-decoration: none;
    text-transform: uppercase;
	border: 1px solid gray;
	background: #f0f0f0;
	line-height: 1.8em;
}

.main-nav li.selected a {
	color: #fff;
    background-color: #000;
}

.main-nav li a:hover {
	color: #000;
}

.main-nav ul li.selected a {
    background: #000;
    color: #fff;
}
.main-nav ul {
	display: none;
}
.main-nav:hover ul {
	display: block;
}

/* *** SUB NAV *** */
.sidebar ul{
	font-weight: bold;
    margin: 0 0 1.2em 1.2em;
}




/* *** PRIMARY-CONTENT ***
The following rules only effect content inside the main content area of the page.
*/

.primary-content {
	padding: 0 0 2em 0;
}

.primary-content ul, .primary-content ol {
	margin: 0 0 1.2em 1.2em;
}


/* *** LAYOUT-FOOTER *** */
.layout-footer {
    background: #f0f0f0;
    border-top: 1px solid #dee0e0;
    margin-top: 40px;
    padding: 1.5em 0 1.5em 0;
    clear:both;
}

.layout-footer ul.social-links li {
    list-style-type: none;
}

.layout-footer ul.social-links li a {
    color: #787878;
}

/* *** 3. LAYOUT RULES *** */

/* this is a mobile first responsive design. Therefore we start out by displaying the rules for the smallest size and then add rules as the screen size gets wider.
You could also have each section as a separate stylesheet, it is up to you. */

/*Screen width above 320px. Mobile phones. */
@media only screen and (min-width: 200px) {

	body{line-height: 1.8em}
	.videoWrapper {
		position: relative;
		padding-bottom: 0px; 
		padding-top: 25px;
		height: 169px;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 300px;
		height: 169px;
	}


    a{ line-height: 1.8em; }  
    ul#cyclelist {border: 1px solid brown;position:relative;overflow:hidden;height: 150px;}
    ul#cyclelist li {font-style: italic;padding:5px;opacity:0;position:absolute;}

	div.googleSearch {
		display:none;
		float:left; 
		margin-left: 10px;
	}
	 .galleria{ width: 300px; height: 200px; background: #000 }
	 .videoIframe { width: 320px; height: 240px; }
	 .articleIndex { width: 320px; }
    .main-nav {
       /* border-bottom: 1px solid #e2e2e2;*/
        overflow: hidden;
        padding: 0;
    }
    
    .main-nav ul {
        overflow: hidden;
        margin: 0 0 1.2em 1.2em;
	display: none;
	
    }
    
    .main-nav li {
        
	list-style-type: none;


    }
    
.main-nav li a {
    color: #555;
    
   font-weight: bold;
    /* letter-spacing: 1px; */
    padding-right: 2px;
    text-decoration: underline;
    text-transform: uppercase;
	border: none;
	background: none;
	line-height: 1.8em;
	



    .layout-footer ul.social-links {
        overflow: hidden;
        padding-bottom: 5px;
    }
    
    .layout-footer ul.social-links li {
        float: left;
        width: 20%; /* 1/5 of 100% */
    }
    
    .layout-footer ul.social-links li.facebook a {
        background-position: -60px 0;
    }
    
    .layout-footer ul.social-links li.flickr a {
        background-position: -120px 0;
    }
    
    .layout-footer ul.social-links li.linkedin a {
        background-position: -182px 0;
    }
    
    .layout-footer ul.social-links li.rss a {
        background-position: -240px 0;
    }
    
    .layout-footer ul.social-links li a:hover,
    .layout-footer ul.social-links li a:active {
        opacity: .8;
    }
    
    .layout-footer small {
        display: block;
        text-align: center;
    }
  
}

@media only screen and (min-width: 460px) {

	body{line-height: 1.8em}
	.videoWrapper {
		position: relative;
		padding-bottom: 0px; 
		padding-top: 25px;
		height: 236px;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 420px;
		height: 236px;
	}

    ul#cyclelist {border: 1px solid brown;position:relative;overflow:hidden;height: 100px;}
    ul#cyclelist li {font-style: italic;padding:5px;opacity:0;position:absolute;}

 .galleria{ width: 400px; height: 267px; background: #000 }
 .videoIframe { width: 400px; height: 300px; }
 .articleIndex { width: 400px; }	
a{ line-height: 1.8em; }    
}

@media only screen and (min-width: 700px) {
	body{line-height: 1.4;}
	.videoWrapper {
		position: relative;
		padding-bottom: 0px; 
		padding-top: 25px;
		height: 315px;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 560px;
		height: 315px;
	}




    ul#cyclelist {border: 1px solid brown;position:relative;overflow:hidden;height: 75px;}
    ul#cyclelist li {font-style: italic;padding:5px;opacity:0;position:absolute;}


 .galleria{ width: 600px; height: 400px; background: #000 }
 .videoIframe { width: 600px; height: 450px; }
 .articleIndex { width: 500px; }
#menu-icon {
	display: none;
}
    
  a[href^=tel]{
   text-decoration: none;
}	
   	
    .main-nav ul {
        display: block;
        margin-right: auto;
        margin-left: auto;
        max-width: 1200px;
    }
.main-nav li {
        float: left; 
	list-style-type: none;
	margin-top: 5px;
	
    }
.main-nav li a {
    color: #555;
    display: block;
   font-weight: bold;
    /* letter-spacing: 1px; */
    padding-right: 4px;
	padding-left: 4px;
	margin-right: 5px;
    text-decoration: none;
    text-transform: uppercase;
	border: 1px solid gray;
	background: #f0f0f0;
	line-height: 1.8em;
}
    
    .layout-footer ul.social-links {
        float: left;
    }
    
    
    .layout-footer ul.social-links li.facebook a {
        background-position: -27px -70px;
    }
    
    .layout-footer ul.social-links li.flickr a {
        background-position: -55px -70px;
    }
    
    .layout-footer ul.social-links li.linkedin a {
        background-position: -82px -70px;
    }
    
    .layout-footer ul.social-links li.rss a {
        background-position: -109px -70px;
    }
    
    .layout-footer ul.social-links li a:hover,
    .layout-footer ul.social-links li a:active {
        opacity: .8;
        
    }
    
    .layout-footer small {
        display: block;
        text-align: right;
    }
a{ line-height: 1em; }    	

}

@media only screen and (min-width: 960px) {

	.videoWrapper {
		position: relative;
		padding-bottom: 0px; 
		padding-top: 25px;
		height: 315px;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 560px;
		height: 315px;
	}



    ul#cyclelist {border: 1px solid brown;position:relative;overflow:hidden;height: 75px;}
    ul#cyclelist li {font-style: italic;padding:5px;opacity:0;position:absolute;}

/* LARGE SCREENS */
	div.googleSearch {
		display:inline;
		float:left; 
		margin-left: 10px;
	}
#siteSearch { display: none }

 .galleria{ width: 960px; height: 640px; background: #000 }

    .cols2-nav-left .sidebar {
	   float: left;
        width: 18.75%; /* 180/960*/
    }
    
    .cols2-nav-left .primary-content {
	   float:right;
        width: 75%; /* 720/960*/
    }
    
    .cols2-nav-right .sidebar {
       float: right;
        width: 18.75%; /* 180/960*/
    }
    
    .cols2-nav-right .primary-content {
       float:left;
        width: 75%; /* 720/960*/
    }
    
    .cols1 .primary-content {
	   margin: 0 auto 0 auto;
       width: 90%;
    }

    .modules .module {
	   width: 31.25%;
       float:left;
       margin: 0 0 1.5em 3.125%;
    }
    
    .modules .module:nth-child(3n+1) {
	   margin: 0 0 1.5em 0;
    
    }

    .main-nav ul {
        display: block;
        margin-right: auto;
        margin-left: auto;
        max-width: 1200px;
    }
a{ line-height: 1em; }    

}

@media only screen and (min-width: 1200px) {
	.videoWrapper {
		position: relative;
		padding-bottom: 0px; 
		padding-top: 25px;
		height: 315px;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 560px;
		height: 315px;
	}


    ul#cyclelist {border: 1px solid brown;position:relative;overflow:hidden;height: 75px;}
    ul#cyclelist li {font-style: italic;padding:5px;opacity:0;position:absolute;}

    .wrapper, .main-nav ul {
        display: block;
        margin-right: auto;
        margin-left: auto;
        max-width: 1200px;
    }
	a{ line-height: 1em; }    

}
div.staffSummaryDiv {
	float: left;
	width: 140px;
	padding-left:5px;
	padding-right:5px;
	border: 1px solid gray;	
	margin: 2px;
	height: 270px;
	
}
div.staffSummaryDivNoImg {
	float: left;
	width: 140px;
	padding-left:5px;
	padding-right:5px;
	border: 1px solid gray;	
	margin: 2px;
	height: 80px;
	
}