#header {
z-index: 11; /* to keep drop down menus above slideshow content */
}


.main {
padding-bottom: 11px;
}

#content {
float: none;
margin: 0;
padding: 0;
width: 100%;
background: url(../jpg/bg-home.jpg) 0 0 no-repeat;
position: relative;
overflow: auto;
}

.spotlight-wrapper {
height: 300px;
margin-bottom: 10px;
}

#spotlight {
position: absolute;
right: 13px;
top: 20px;

background: #fff;
background:hsla(0, 0%, 100%, 0.75);

border-radius: 5px;
color: #082C51;
width: 602px;
height: 216px;
padding: 14px 20px 30px 15px;
}


#spotlight h1 {
font-size: 161%;
}

#spotlight #slides {
transition:1s;
opacity:0;
display: none
}

#spotlight.visible #slides {
opacity:1;
display:block;
}

.spotlight #slides a {
color: #082C51;
text-decoration: none;
}


/* Show active item in the pagination */
.spotlight .slidesjs-pagination .active {
color:red;
}

.spotlight .slidesjs-navigation {
position: absolute;
bottom:15px;
color: #0090AE;
font-weight: bold;
font-size: 20px;
font-family: monospace;
width: 20px;
height: 20px;
text-align: center;
}

.spotlight .slidesjs-navigation:focus{
outline: none;
}

.spotlight .slidesjs-previous {
left: 220px;
}


.spotlight .slidesjs-next {
right: 225px;
}




.spotlight .slidesjs-pagination {
list-style:none;
margin:0;
padding:0;
height: 30px;
line-height: 0;
background: transparent;
text-align: center;
}

.spotlight .slidesjs-pagination-item {
display: inline-block;
width: 18px;
height: 100%;
position: relative;
}

.spotlight .slidesjs-pagination-item a:focus {
outline: none;
}

.spotlight .slidesjs-pagination-item a {
display: block;
height: 100%;
width: 100%;
position: relative;
}


.spotlight .slidesjs-pagination-item span {
position: absolute;
top: 34%;
left: 28%;
background: #082C51;
width:  8px;
height: 8px;
font-size: 0px;
border-radius: 100%;
display: inline-block;
overflow: hidden;
transition: 0.4s;
}

.spotlight .slidesjs-pagination-item .active span {
background:#0090AE;
transform: scale(1.2);
}

/*----------------------------- */
/* guide slideshow styles */

.guides-wrapper {
height: 184px;
overflow:hidden;
background: #063357;
text-align: center;
color: #fff;
margin: 0 10px 20px 10px;
border-radius: 6px;
}

.guides-header {
	padding: 14px;
	margin: 0;
	text-transform: uppercase;
}

/*
This is the overall slideshow itself.
Be aware that the slideshow height setting in JS is what really controls the height.
And that the width and height given to slidesjs is more of an aspect ratio than a specific size.
The height defined here is the height generated by the slideshow script itself.
I match the value here so content below the slideshow doesn't jump around when 
the slideshow finally loads at its self-determined size.
*/
.guides-wrapper .guides {
transition: 1s;
opacity:0;
margin:auto;
position: relative;
}

.guides-wrapper.visible .guides {
opacity:1;
}



.guides .slidesjs-navigation {
position: absolute;
z-index: 10;
width: 30px;
height: 30px;
text-align: center;
top: 40px;
background-image: url(../png/sprite-home-guides-arrows.png);
color: transparent;
overflow:hidden;
}
.guides .slidesjs-previous {
left: 5px;
background-position: center left;
}
.guides .slidesjs-next {
right: 5px;
background-position: center right;
}



.guide-group {
/*
The individual slides themselves.
Be aware that the slideshow height setting in JS is what really controls the height.
And that the width and height given to slidesjs is more of an aspect ratio than a specific size.
*/
width: 858px;
margin: auto;
display: -webkit-flex;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
}

.guide {
text-align: center;
font-size: 0.9em;
}

.guide a {
text-decoration: none;
color: #fff;
}

.guide img {
	height: 100px;
	display: block;
	margin: auto;
	margin-bottom: 4px;
}

.guide title {

}










.box {
background: #e7501b;
border-radius: 6px;
width: 320px;
height: 167px;
float: left;
padding: 10px;
color: #fff;
position: relative;
}

.box h1 {
padding-top: 5px;
font-size: 183%;
}

#search h1 {
font-size: 170%;
margin-bottom: 10px;
}

.box a {
color: #fff;
}

.box ul {
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}

.box li {
padding-bottom: 3px;
font-size: 13px;
}

.box li a {
text-decoration: none;
}

.box .link {
position: absolute;
bottom: 8px;
font-size: 83%;
text-decoration: none;
left: 10px;
}

.box .zbutton {
position: absolute;
width: 64px;
height: 28px;
line-height: 28px;
right: 18px;
bottom: 15px;
border: 0;
border-radius: 4px;
background: #fff;
color: #4a5e69;
text-decoration: none;
text-align: center;
opacity: 0.7;
font-weight: normal;
font-size: 1em;
}



#news {
margin-left: 10px;
background:#E73A4F;
background: linear-gradient(to top, #8E1F43, #E73A4F 30%) repeat scroll 0 0 transparent;
}

#events {
margin-left: 20px;
margin-right: 20px;
background: #e9511c;
background: linear-gradient(to top, #b2320a, #e9511c 30%) repeat scroll 0 0 transparent;
}

#search {
width: 200px;
background: #AFD320;
background: linear-gradient(to top, #91a431, #afd320 30%) repeat scroll 0 0 transparent;   
}


input.field, select.field {
border:0;
border-radius: 4px;
width: 189px;
height: 36px;
margin-bottom: 14px;
margin-left: 4px;
font-size: 16px;
color: #666;
}

select.field {
padding:6px 3px;
border-color: blue;
}

.box form .zbutton {
line-height: 1em;
}