@font-face {
	font-family: 'MiamaRegular';
	src: url('../fonts/Miama.eot');
	src: local('Miama Regular'), local('Miama'), url('../fonts/Miama.woff') format('woff'), url('../fonts/Miama.ttf') format('truetype'), url('../fonts/Miama.svg#Miama') format('svg');
}


@font-face {
	font-family: 'ComfortaaBold';
	src: url('../fonts/Comfortaa_Bold.eot');
	src: local('Comfortaa Bold'), local('Comfortaa-Bold'), url('../fonts/Comfortaa_Bold.woff') format('woff'), url('../fonts/Comfortaa_Bold.ttf') format('truetype'), url('../fonts/Comfortaa_Bold.svg#Comfortaa-Bold') format('svg');
}

@font-face {
	font-family: 'ComfortaaRegular';
	src: url('../fonts/Comfortaa_Regular.eot');
	src: local('Comfortaa Regular'), local('Comfortaa'), url('../fonts/Comfortaa_Regular.woff') format('woff'), url('../fonts/Comfortaa_Regular.ttf') format('truetype'), url('../fonts/Comfortaa_Regular.svg#Comfortaa') format('svg');
}

/* stylesheet for Basil Package Design */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body{ line-height: 1; }
blockquote, q{ quotes: none; }
table{ border-collapse: collapse; border-spacing: 0; }
header, nav, article, footer, address{ display: block; }

body{ font: 14px/1.25em 'ComfortaaRegular', "century gothic", centurygothic, arial, sans-serif; margin: 0; background: #739eb3; color: #fff; }

html, body{ height: 100%; margin: 0; padding: 0; }
img#background{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

#scroller{ height: 100%; width: 100%; position: absolute; z-index: 100; }

#container{ width: 960px; margin: 0 auto; }

header img{ border: none; }
#logo{ display: block; float: left; }
#social{ float: right; padding-top: 70px; }
#social a{ float: right; padding-top: 5px; -webkit-transition-duration: .2s; -moz-transition-duration: .2s, .2s; }
#social a:hover{ padding-top: 0; }
#social img{ width: 32px; }

nav{ clear: both; background: #406b80; font: 14px 'ComfortaaRegular', "century gothic", centurygothic, sans-serif; }
nav li{ display: block; float: left; background: #406b80; }
nav li ul li{ background-color: transparent; }
nav li a{ display: block; float: left; padding: 10px 25px 7px 15px; }
nav li a:link,
nav li a:visited{ text-decoration: none; color: #fff; position: relative; -webkit-transition-duration: .2s; -moz-transition-duration: .2s, .2s; }
nav li a:hover{ left: 5px; }

nav ul.potato-menu{ margin: 0; padding: 0; width:auto; list-style:none; }
nav .potato-menu:after{ content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; }
nav ul.potato-menu li.potato-menu-item{ margin: 0; padding: 0; position: relative; list-style: none; list-style-position: outside; display: inline; float: left; }
nav ul.potato-menu li.potato-menu-item ul{ margin-top: 34px; padding: 0; }
nav ul.potato-menu li.potato-menu-item ul li{ display: block; clear: left; }
nav ul.potato-menu li.potato-menu-item ul li a{ display: block; clear: left; width: 135px; padding: 8px 15px; text-decoration: none; white-space: nowrap; outline: 0; background-image: none; }
nav ul.potato-menu ul.potato-menu-group{ background: url(../images/ghost.png); margin: 0; position: absolute; display: none; z-index: 1000; }
nav ul.potato-menu li.potato-menu-item ul li a:hover{}

a:link{ color: #fff; }
a:visited{ color: #ccc; }
a:hover{ text-decoration: none; }

#page_body{ background: #406b80; padding: 0 5px 5px; clear: both; }

.home .controls, .home .thumbs, .home #thumbs{ height: 0; display: none; }
#music{ position: relative; top: -31px; outline: none; }

#spotlight{ width: 400px; height: 500px; overflow: hidden; float: left; background: #739eb3; }
#spotlight img{ float: right; border: 5px solid #406b80; border-width: 0 5px; }
#text{ width: 450px; height: 400px; padding: 50px; overflow: hidden; float: right; background: #406b80; }

#content{ float: left; width: 425px; height: 350px; padding: 0 25px 0 0; position: relative; overflow: hidden; margin: 35px 25px 50px 0; }

.jspPane{ position: absolute; }
.jspVerticalBar{ position: absolute; top: 0; right: 0; width: 10px; height: 100%; margin: 0 15px 0 0; }
.jspHorizontalBar{ position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; }
.jspVerticalBar *,
.jspHorizontalBar *{ margin: 0; padding: 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.jspCap{ display: none; }
.jspHorizontalBar .jspCap{ float: left; }
.jspTrack{ background: #739eb3; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.jspDrag{ background: #b7dff7; position: relative; top: 0; left: 0; cursor: pointer; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{ float: left; height: 100%; }
.jspArrow{ background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled{ cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow{ height: 16px; }
.jspHorizontalBar .jspArrow{ width: 5px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus{ outline: none; }
.jspCorner{ background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner{ margin: 0 -3px 0 0; }

#content h1{ font: 48px 'MiamaRegular', Baskerville, serif; color: #fff; margin: 0; padding: 0; }
#content h2{ font: 32px 'MiamaRegular', Baskerville, serif; color: #fff; }
#content h3{ font: 18px 'ComfortaaBold', "century gothic", centurygothic, sans-serif; color: #fff; }
#content p,
#content li,
#content dt,
#content dd{ font: 14px 'ComfortaaRegular', "century gothic", centurygothic, sans-serif; line-height: 1.5em; }
#content p, 
#content ul,
#content ol,
#content dl{ margin: 0 0 18px; }

#gallery_container{ clear: both; }
#slideshow{ background: #406b80; width: 950px; height: 500px; padding: 0 5px 5px; position: relative; }

div#container{ overflow: hidden; }
div.content{ display: none; clear: both; }

div.content a, div.navigation a{ text-decoration: none; }
div.content a:hover, div.content a:active{ text-decoration: underline; }

div.navigation a.pageLink{ height: 77px; line-height: 77px; }

div.controls{ margin-top: 27px; height: 45px; clear: both; float: right; width: 150px; }
div.controls a{ outline: none; }
.play, .pause, .prev, .next{ display: block; float: left; margin: 2px 6px 0 0; width: 44px; height: 44px; text-indent: -9000px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.play{ background: #fff url(../images/arrow_play.png) center center no-repeat; }
.pause{ background: #fff url(../images/arrow_pause.png) center center no-repeat; }
.prev{ background: #fff url(../images/arrow_left.png) center center no-repeat; }
.next{ background: #fff url(../images/arrow_right.png) center center no-repeat; }

div.slideshow-container,
div.loader,
div.slideshow a.advance-link{ display: block; width: 950px; padding: 0; margin: 0; }

div.loader,
div.slideshow a.advance-link,
div.caption-container{ height: 510px; }

div.slideshow-container{ position: relative; clear: both; float: left; height: 510px; padding: 0; margin: 0; }

div.loader{ position: absolute; top: 0; left: 0; background-image: url('images/loader.gif'); background-repeat: no-repeat; background-position: center; }
div.slideshow span.image-wrapper{ position: absolute; display: block; }
div.slideshow a.advance-link{ display: block; width: 950px; height: 502px; text-align: center; }

div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited{ text-decoration: none; }
div.slideshow a.advance-link:focus{ outline: none; }

div.slideshow img{ display: block; padding: 0; margin: 0 auto; border: none; }

#thumbs{ height: 100px; width: 810px; }
div.navigation{ position: relative; }
div.navigation a.pageLink{ display: block; position: relative; float: left; margin: 2px; width: 16px; background-position:center center; background-repeat:no-repeat; }
div.navigation a.pageLink:focus{ outline: none; }

ul.thumbs{ margin: 0; padding: 0; }
ul.thumbs li{ float: left; padding: 0; margin: 0; list-style: none; position: relative; }
html>body ul.thumbs li{ top: 15px; -webkit-transition-duration: .2s; -moz-transition-duration: .2s, .2s; }
html>body ul.thumbs li.selected{ top: 0; }
ul.thumbs li.selected{ top: 20px; }
a.thumb{ display: block; width: 150px; height: 75px; margin: 0 10px 15px 0; background: #000; border: 1px solid #406b80; overflow: hidden; }
a.thumb:focus{ outline: none; }
ul.thumbs img{ border: none; display: block; width: 150px; }
div.pagination{ clear: both; position: relative; left: -50%; }
div.pagination a, div.pagination span.current, div.pagination span.ellipsis{ position: relative; display: block; float: left; margin-right: 2px; padding: 4px 7px 2px 7px; }
div.pagination a:hover{ text-decoration: none; }
div.pagination span.current{ font-weight: bold; }
div.pagination span.ellipsis{ border: none; padding: 5px 0 3px 2px; }

div.gallery-gutter{ clear: both; padding-bottom: 20px; }

form#contact{ width: 320px; }
form#contact fieldset { margin: 0; border: none; padding: 0; width: 320px; }
form#contact legend{ display: block; width: 310px; clear: both; color: highlight; font-size: 14px; padding-left: 0; padding-top: 0.8em; }
form#contact label{ float: left; display: block; clear: none; padding: 5px 0 0; white-space: nowrap; }
form#contact img{ display: block; margin: 10px 0 0 0; padding: 0; }
form#contact input, #contact select,
form#contact textarea{ width: 100%; margin-top: 0.1em; }
form#contact input.checkbox,
form#contact input.radio{width: auto; height: auto; margin: 0 .4em 0 0; padding-left: 0.3em; }
form#contact input#submit{ clear: both; float: left; width: auto; }
form#contact p{ font-size: 12px; text-indent: 0; margin: 0; }

.sessions fieldset{ width: 350px; border: none; }
.sessions input[type="checkbox"], .session input[type="radio"]{ margin: 0 15px 0 0; }
.sessions input[type="text"], .session textarea{ width: 250px; float: left; margin: 3px; }
.sessions input[type="submit"], .session input[type="reset"]{ margin: 3px 0 5px 175px; float: left; }
.sessions input[type="submit"]:hover, .session input[type="reset"]:hover{ cursor: pointer; }
.sessions fieldset p{ clear: both; font-style: italic; }

#session{ margin-bottom: 10px; }
#session label{ clear: left; float: left; width: 150px; padding: 5px; text-align: right; }
#session input[type="text"]{ width: 150px; float: left; margin: 3px; }
#session input[type="submit"]{ clear: both; }
#session p{ text-align: center; padding: 10px 0; }

.required, .error{ color: #6f2b22; }
.error{ font-style: italic; width: 100px; padding-top: 2px; font-size: 10px; }
.sessions .error{ float: left; }

.kalamazoo_message{ padding: 20px; margin: 0 10px 10px; border: 3px solid #b7dff7; color: #fff; background: #739eb3; font-style: italic; font-size: 10px; }

footer{ text-align: right; color: #fff; font-size: 12px; padding: 25px 0 0 0; }
footer address{ font-style: normal; }
footer p{ margin: 0; }

.clear{ clear: both; height: 0; }