@charset "utf-8";

/*
The slider container. You can set the size, color, position and other
attributes here.
*/
.sw_container {
	/* Set the slider size here. */
	width: 970px;
	height: 564px;
	background-color: #FFFFFF;
	/* Center the slider. */
	margin-left: auto;
	margin-right: auto;
}

/*
The container for the title and description of the slide. 
It contains the background of the text and the text itself.
*/
.sw_infoComponent {
	left: 38px;
	top: 26px;
	overflow: hidden;
	width: 894px;
}

/*
The background for the title and description displayed
on the slides.
*/
.sw_text_background {
	width: 100% !important;		/* This attribute will not be overwritten by the slider. */
	border-radius: 0px;			/* Works only on CSS3 compatible browsers. */
	background-color: #FFFFFF;
	opacity: 0.7;		/* Works only on CSS3 compatible browsers. */
}

/*
The title of the slide.
*/
.sw_title {
	color: #000000;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
	margin-top: 10px;
	margin-left: 14px;
	margin-right: 14px;
}

/*
The description of the slide.
*/
.sw_description {
	color: #000000;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: 12px;
    font-style: normal;
    font-weight: normal;
	overflow: hidden;
	margin-top: 5px;
	margin-left: 14px;
	margin-right: 14px;
	margin-bottom: 15px;
}

/*
The slide preloader. If you would like to change the preloader, simply replace the 
.gif file with one of your own and, if it is required, set its size and position 
from this CSS class.
*/
.sw_preloader {
	background-image: url("../graphics/preloader.gif");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	left: 50%;
	top: 50%;
	margin-left: -17px;
	margin-top: -17px;
}

/*
The NORMAL state for the previous slide button.
*/
.sw_previous_button {
	width: 41px;
	height: 40px;
	left: 18px;
	top: 240px !important;	/* If the top property is not overwritten with the !important tag, the slider will automatically set it to 50%, vertically centering the button in the slider. */
	background-image: url("../graphics/btnPrev_normal.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The HOVER state for the previous slide button.
*/
.sw_previous_button:hover {
	background-image: url("../graphics/btnPrev_hover.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The DISABLED state for the previous slide button.
*/
.sw_previous_button_disabled {
	top: 240px !important;	/* If the top property is not overwritten with the !important tag, the slider will automatically set it to 50%, vertically centering the button in the slider. */
	opacity: 0.7;		/* Works only on CSS3 compatible browsers. */
}

.sw_previous_button_disabled:hover {
	top: 240px !important;	/* If the top property is not overwritten with the !important tag, the slider will automatically set it to 50%, vertically centering the button in the slider. */
	opacity: 0.7;		/* Works only on CSS3 compatible browsers. */
}



/*
The NORMAL state for the next slide button.
*/
.sw_next_button {
	width: 41px;
	height: 40px;
	right: 18px;
	top: 240px !important;	/* If the top property is not overwritten with the !important tag, the slider will automatically set it to 50%, vertically centering the button in the slider. */
	background-image: url("../graphics/btnNext_normal.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The DISABLED state for the next slide button.
*/
.sw_next_button_disabled {
	display: none !important;	/* This attribute will not be overwritten by the slider. */
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The HOVER state for the next slide button.
*/
.sw_next_button:hover {
	background-image: url("../graphics/btnNext_hover.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The timer element. If the slider is not in auto-slideshow mode, 
the timer will not display.
*/
.sw_timer {	
	height: 2px;
	background-color: #000000;
	opacity: 0.40;		/* Works only on CSS3 compatible browsers. */
}

/*
The control bar contains a list of graphical symbols (bullets),
each symbol representing a slide. The slide symbols have three states:
normal, hover and selected. The control bar also uses two buttons 
for page navigation (previous and next page buttons).
*/
.sw_controlBar {
	width: 896px;
	height: 110px;
	left: 37px;
	bottom: 0px;
}

/*
The background for the entire control bar. The symbol thumbnails can have their 
own backgrounds which you can set separately. The size of the background is 
always overwritten by code and it is set to be the same size as the size of 
the control bar.
*/
.sw_controlBar_background {
	background-image: url("../graphics/cbar_top_shadow.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The container for the slide's thumbnail (bullet).
*/
.sw_controlBar_thumbnail_container {
	width: 100%;
}

/*
The thumbnails have a normal, hover and selected state. This is the NORMAL 
state of the bullet thumbnail.
*/
.sw_controlBar_thumbnail {
	background-color: #FBFBFB;
	margin-left: 7px;
	margin-right: 7px;
	width: 82px;
	height: 55px;
	border: 1px solid #D8D8D8;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.7;		/* Works only on CSS3 compatible browsers. */
}

/*
The HOVER state of the bullet thumbnail.
*/
.sw_controlBar_thumbnail:hover {
	overflow : hidden;
	cursor: pointer;
	opacity: 1;
}

/*
The normal state for the SELECTED bullet thumbnail.
*/
.sw_controlBar_thumbnail_selected {
	border: 1px solid #439EEB;
	overflow : hidden;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The hover state for a SELECTED bullet thumbnail. It is the same as the normal selected
state so that it won't be confusing for viewers.
*/
.sw_controlBar_thumbnail_selected:hover {
	border: 1px solid #439EEB;
	overflow : hidden;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The NORMAL state for the next page button displayed in the control bar.
*/
.sw_controlBar_next_thumb_page_button {
	width: 22px;
	height: 22px;
	background-image: url("../graphics/nextPage_normal.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The HOVER state for the next page button displayed in the control bar.
*/
.sw_controlBar_next_thumb_page_button:hover {
	background-image: url("../graphics/nextPage_hover.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The NORMAL state for the previous page button displayed in the control bar.
*/
.sw_controlBar_previous_thumb_page_button {
	width: 22px;
	height: 22px;
	background-image: url("../graphics/prevPage_normal.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
The HOVER state for the previous page button displayed in the control bar.
*/
.sw_controlBar_previous_thumb_page_button:hover {
	background-image: url("../graphics/prevPage_hover.png");
	background-repeat: no-repeat;
	background-size: 100%;		/* Works only on CSS3 compatible browsers. */
	cursor: pointer;
	opacity: 1;		/* Works only on CSS3 compatible browsers. */
}

/*
Styling rules for the container of the slides. You can set the size of
the contaner and position it within the boundaries of the slider.
*/
.sw_slider_container {
	width: 894px;
	height: 428px;
	border: 1px solid #D8D8D8;
	left: 37px;
	top: 25px;
}

/*
Styling rules for the content of the slides, only for those slides that
have HTML content.
*/
.sw_slider_content {
	
}