@import url(colorbox.css);

@charset "UTF-8";
/* CSS Document */

html, body {height:100%;}

/*overall style*/
html, body, div, span, applet, object, iframe, h2, h3, p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

/* The body is the outermost layout component and contains the visible page content.  */
body {
	background-color: #1880C7;
	color: #222;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	margin: 0 0 0 0; /* Sets the margin using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding using shorthand notation (top, right, bottom, left) */
	text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */

h1 {
	color: #666;
	font-size: 24px;
	line-height: 26px;
	font-weight: normal;
}
/* Commonly used to style section titles. */
h2 {
	color: #1880C7;
	font-size: 20px;
	font-weight: bold;
	line-height: 23px;
	margin-bottom: 1em;
}

h3 {
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	margin-bottom: .25em;
	color: #333;
}

h4 {
	color: #666;
	font-size: 16px;
	font-weight: normal;
	line-height: 18px;
}
h5 {
	color: #1880C7;
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
}
h6 {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
}

p {
	margin-bottom: 1em;
}

/* Sets the style for unvisited links. */
a, a:link {
	color: #1880c7;
	text-decoration: underline;
	font-weight: bold;
}
/* Sets the style for visited links. */
a:visited {
	color: #1880c7;
	text-decoration: underline;
}
/* Sets the style for links on mouseover. */
a:hover {
	color: #1880c7;
	text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
	color: #1880c7;
	text-decoration: underline;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
	color: #1880c7;
	text-decoration: underline;
}

A IMG {
	border: none;
}

DIV {box-sizing:border-box;-moz-box-sizing:border-box;-web-kit-box-sizing:border-box;}

#outerWrapper {
	background:#FFF;
}
/* Page Header */

#menu-wrapper {background:#1880c7;border-bottom:3px solid #333;}

/* Menu Style */
#menu {padding: 5px 2% 0 2%;max-width:1200px;width:100%;margin:0 auto;}
#menu P {display:inline;}
#menu a.menuButton {display:none;background:url(images/menu.png) no-repeat 0 0;background-size:100%;width:30px;height:30px;cursor:pointer;text-indent:-999em;margin-left:5%;float:left;}
#menu a.menuButton:hover, #menu a.menuButton.hover {background-position:0 -30px;}
#menu #menuLinks {list-style: none outside none;margin: 0;padding: 0;float: left;width: 70%;}
#menu #menuLinks LI {display: block;margin: 0 5px 0 0;float: left;}
#menu #menuLinks li a:link, #menu #menuLinks li a:visited {display: block;padding: 6px;text-decoration: none;color: #FFF;font-weight: normal;}
#menu #menuLinks li a:hover, #menu #menuLinks li.selected {background-color: #CCC; color: #333;}


#social-media {float:right;width:20%;}
#social-media ul {margin:0;padding:0;list-style:none;}
#social-media ul li {float:right;margin-right:5px;}
#social-media ul li a {width:27px;height:27px;display:block;text-indent:-9999em;}
#social-media ul li .facebook {background:url('images/facebook.png') no-repeat 0 0;}
#social-media ul li .flickr {background:url('images/flickr.png') no-repeat 0 0;}
#social-media ul li .twitter {background:url('images/twitter.png') no-repeat 0 0;}

#header-wrapper {max-width:1200px;margin:0 auto;padding:10px;}
#header-wrapper .logo {background:url('images/reflex-logo.png') no-repeat 0 0;background-size:100%;width:40%;max-width:495px;height:195px;display:block;float:left;}
#header-wrapper #slogan, #header-wrapper #player {float:right;width:60%;max-width:600px;margin-bottom:10px;}
#header-wrapper #slogan {font-size:20px;color:#666;font-family:Tahoma, Geneva, sans-serif;line-height:normal;}
#header-wrapper #player {background:url('images/player-bg.png') no-repeat center bottom;min-height:150px;clear:right;padding:20px;}
#header-wrapper #player #listen {
	width:65%;
	margin:0 auto;
	box-sizing:border-box;
	-moz-border-sizing:border-box;
	-webkit-border-sizing:border-box;
	border:1px solid #999;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background: rgb(124,124,124); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdjN2M3YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(124,124,124,1) 0%, rgba(19,19,19,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(124,124,124,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(124,124,124,1) 0%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(124,124,124,1) 0%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(124,124,124,1) 0%,rgba(19,19,19,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(124,124,124,1) 0%,rgba(19,19,19,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7c7c', endColorstr='#131313',GradientType=0 ); /* IE6-8 */
}

#header-wrapper #player #listen ul {margin:0;padding:0;list-style:none;}
#header-wrapper #player #listen ul li {float:left;margin:5px 2%;}
#header-wrapper #player #listen ul li a {width:35px;height:35px; text-indent:-9999em;display:block;}
#header-wrapper #player #listen ul li.listen-now {border-right:1px solid #CCC;color:#CCC;font-weight:bold;font-size:16px;padding:5px;margin:8px 4%;}
#header-wrapper #player #listen ul li a.itunes {background:url('images/itunes.png') no-repeat 0 0;background-size:100%;}
#header-wrapper #player #listen ul li a.windows {background:url('images/wm.png') no-repeat 0 0;background-size:100%;}
#header-wrapper #player #listen ul li a.real {background:url('images/real.png') no-repeat 0 0;background-size:100%;}
#header-wrapper #player #listen ul li a.quicktime {background:url('images/quicktime.png') no-repeat 0 0;background-size:100%;}


/* Contains the main page content.  */

#contentWrapper {max-width:1200px;margin:0 auto;position:relative;clear:both;}
#content {padding: 20px;text-align: left;min-height: 180px;margin:0;}
#content h1 {margin-top:0;}

#slider-wrapper {width:100%;margin:20px 0;padding:0 20px;position:relative;}
#slider-wrapper .slider { overflow:hidden; position:relative; width:100%;padding:0 10px; height:230px; }
#slider-wrapper .slider ul { margin:0; padding:0;}
#slider-wrapper	.slider ul li { float:left; list-style:none; padding:0 25px 0 0;width:375px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }
#slider-wrapper .slider li div {padding:10px; border:1px solid #CCC;height:230px;overflow:auto;color:#333;}
#slider-wrapper .slider li div IMG {max-width:100%;}
#slider-wrapper .slider li div h2 {padding:5px 10px;margin-left:-10px;float:left;background: url('images/slider-h2-bg.png') no-repeat right center #1880c7;width:75px; color:#FFF;font-size:18px; font-weight:normal;}
#slider-wrapper .slider li div h3 {font-size:14px;font-weight:bold;color:#000;}
#slider-wrapper .slider li div P, #slider-wrapper .slider li div.event h3 {clear:both;}
#slider-wrapper .slider li div.news h3 {float:right;width:65%; padding:0}
#slider-wrapper .slider li div.event .date {float:right;width:65%;font-size:18px;font-weight:normal;color:#333; padding:5px 0;clear:none;}
#slider-wrapper .controls {position:absolute;bottom:45%;left:0;width:100%;}
#slider-wrapper .controls a {background:url('images/slider-arrows.png') no-repeat 0 0;height:33px;width:10px;display:block;text-indent:-9999em;float:left;}
#slider-wrapper .controls a.prev-slide:hover {background-position:0 -33px;}
#slider-wrapper .controls .next-slide {background-position:-10px 0;float:right;}
#slider-wrapper .controls .next-slide:hover {background-position:-10px -33px;}

#gallery {margin-top:100px;}
#gallery IMG {margin:0 2px 2px 0;width:50px;}

#contactForm {float:right;width:65%;}

#footer {background:#1880c7;}

#footerContent {
	text-align: left;
	line-height: 20px;
	max-width: 1200px;
	margin: 0 auto;
	padding:20px 0;
}

#footerContent .column {width:29%;float:left;color:#CCC;margin:0 2%;}
#footerContent .column h2 {color:#FFF;font-size:24px;font-weight:normal;font-family:Tahoma, Geneva, sans-serif;line-height:normal;}
/*--------Clear Floats After---------*/

#menu:after,
#menuWrapper:after,
#contentWrapper:after,
#header-wrapper #player #listen:after,
#sidebar:after,
#footer:after {
	clear:both;
	display:block;
	content:"";
}

/* ------Content Styles-------------*/

ul li {
	margin: 0 0 .5em 0;
}

/*---------Responsive---------------*/
@media screen and (max-width:800px) {
	#header-wrapper #player #listen {width:80%;}
}

@media screen and (max-width:615px) {
	#header-wrapper #slogan {font-size:16px;}
	#header-wrapper #player #listen {width:100%;}
}

@media screen and (max-width:495px) {
	#menu {padding:10px 0 0 0}
	#menu a.menuButton {display:block;}
	#menu #menuLinks {display:none;position: absolute;left:5%;top:45px;z-index:9999;}
	#menu #menuLinks LI {float:none;margin:0;}
	#menu #menuLinks li a:link, #menu #menuLinks li a:visited {display:block;width:100px;background:#CCC;padding: 4px 4px;text-decoration: none;color: #333;font-weight: normal;border:1px solid #1880c7;}
	#menu #menuLinks li a:hover, #menu #menuLinks li.selected {background-color: #aaa;color: #000;}
	#social-media {width:40%}
	#header-wrapper .logo, #header-wrapper #slogan, #header-wrapper #player, #footerContent .column {float:none;width:95%;margin:0 auto;}
	#header-wrapper #player #listen {width:85%;}
	#header-wrapper #player #listen ul li.listen-now {font-size:14px;}
	#gallery {margin-top:50px;}
	#footerContent .column {border-bottom:1px solid #CCC;}
}

@media screen and (max-width:355px) {
	#header-wrapper .logo {height:150px;}
	#slider-wrapper	.slider ul li {width:260px;}
	#slider-wrapper .slider li div P {display:block;}
	#slider-wrapper .slider li div h3 {width:100%;float:none !important;clear:left;}
	#header-wrapper #player #listen {width:100%;}
	#header-wrapper #player #listen ul li.listen-now {float:none;border-right:none;margin:0 auto;}
	#gallery {margin-top:50px;}
}