/* v1.0 | A compilation of styles to control the layout of jQuery scripts and functionality. */

/*	--------------------------------------------------
	BEGIN jQuery Styles for #mainUpper slides
	-------------------------------------------------- */
div#mainUpper #banner-wrapper {
  width:600px;
  height:350px;
  position:relative;
}

/*
#ribbon {
  position:absolute;
  top:-3px;
  left:18px;
  z-index:500;
}
*/

#frame {
    height: 341px;
    left: -50px;
    position: absolute;
    top: -3px;
    width: 739px;
    z-index: 0;
}

/*
  Slideshow
*/

#slides {
    left: 35px;
    position: absolute;
    top: 15px;
    z-index: 100;
}

/*
  Slides container
  Important:
  Set the width of your slides container
  Set to display none, prevents content flash
*/

.slides_container {
    display: none;
    overflow: hidden;
    position: relative;
    width: 570px;
}

/*
  Each slide
  Important:
  Set the width of your slides
  If height not specified height will be set by the slide content
  Set to display block
*/

.slides_container div.slide {
    display: block;
    height: 270px;
    width: 570px;
}

/*
  Next/prev buttons
*/

#slides .next, #slides .prev {
    display: block;
    height: 43px;
    left: -40px;
    position: absolute;
    top: 107px;
    width: 24px;
    z-index: 101;
}

#slides .next {
    left: 585px;
}


/*
  Pagination
*/

#slides .pagination {
    display: block;
    height: 43px;
    left: 0;
    margin: 26px auto 0;
    position: absolute;
    top: 275px;
    width: 600px;
    z-index: 101;
    text-align: center;
}

.pagination li {
    float: left;
    list-style: none outside none;
    margin: 0 1px;
}

.pagination li a {
    background-image: url("../../../images/jQslide/pagination.png");
    background-position: 0 0;
    display: block;
    float: left;
    height: 0;
    overflow: hidden;
    padding-top: 12px;
    width: 12px;
}

.pagination li.current a {
    background-position: 0 -12px;
}

/*
  Caption
*/

div.slide div.caption {
    background: rgb(14, 59, 74); /* The Fallback for IE */
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    border-top: 1px solid #000000;
    bottom: -35px;
    color: #FFFFFF;
    font-size: 1.1em;
    height: 30px;
    left: 0;
    line-height: 1.33;
    padding: 5px 0 3px 0;
    position: absolute;
    text-shadow: none;
    width: 100%;
    z-index: 500;
}
div.slide div.caption p {
    color: #FFFFFF !important;
    margin-bottom: 1em;
    paddong: 0;
    margin:  0;
    font-size: .8em;
}
/*	--------------------------------------------------
	END jQuery Styles for #mainUpper slides
	-------------------------------------------------- */

/*	--------------------------------------------------
	Begin Sliding Door Effect with jQuery
	-------------------------------------------------- */

#right .qitem {
	font-family: arial;
	width:241px;
	height:241px;	
	border:4px solid #222;	
	margin:5px 5px 25px 0;
	background: url('../../../images/bump-slides/bg.gif') no-repeat;
	
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}

	#right .qitem img {
		border:0;
	
		/* allow javascript moves the img position*/
		position:absolute;
		z-index:200;
	}

	#right .qitem .caption {
		position:absolute;
		z-index:0;	
		color:#ccc;
		display:block;
		top: 0;
		left: 0;
	}

#right .qitem .caption h4 {
    color: #369EAD;
    font-size: 1.3em;
    margin: 0;
    padding: 10px 5px 5px 10px;
}

#right .qitem .caption h6 {
    color: #369EAD;
    font-size: .9em;
    margin: 0;
    padding: 10px 5px 5px 10px;
}

#right .qitem .caption p {
    font-size: 1em;
    margin: 0;
    padding: 3px 5px 0 10px;
}


#right .qitem .caption ul {
    font-size: 1em;
    margin: 0;
    padding: 3px 5px 0 10px;
}

/* Setting for corners */

.topLeft, .topRight, .bottomLeft, .bottomRight {
	position:absolute;
	background-repeat: no-repeat; 
	float:left;
}

.topLeft {
	background-position: top left; 	
} 

.topRight {
	background-position: top right; 
} 

.bottomLeft {
	background-position: bottom left; 
} 

.bottomRight {
	background-position: bottom right; 
}
/*	--------------------------------------------------
	End Sliding Door Effect with jQuery
	-------------------------------------------------- */

/*	--------------------------------------------------
	Reveal Modals
	-------------------------------------------------- */
		
	.reveal-modal-bg { 
		position: fixed; 
		height: 100%;
		width: 100%;
		background: #000;
		background: rgba(0,0,0,.8);
		z-index: 100;
		display: none;
		top: 0;
		left: 0; 
		}
	
	.reveal-modal {
		visibility: hidden;
		top: 100px; 
		left: 50%;
		margin-left: -300px;
		width: 520px;
		background: #eee url(../images/modal-gloss.png) no-repeat -200px -80px;
		position: absolute;
		z-index: 101;
		padding: 30px 40px 34px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
		-box-shadow: 0 0 10px rgba(0,0,0,.4);
		}
		
	.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
	.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
	.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
	.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}
	
	.reveal-modal .close-reveal-modal {
		font-size: 22px;
		line-height: .5;
		position: absolute;
		top: 8px;
		right: 11px;
		color: #aaa;
		text-shadow: 0 -1px 1px rbga(0,0,0,.6);
		font-weight: bold;
		cursor: pointer;
		} 
	/*
		
	NOTES
	
	Close button entity is ×
	
	Example markup
	
	<div id="myModal" class="reveal-modal">
		<h2>Awesome. I have it.</h2>
		<p class="lead">Your couch.  I it's mine.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
		<a class="close-reveal-modal">&#215;</a>
	</div>
	
	*/
	
/*	--------------------------------------------------
	End Reveal Modals
-------------------------------------------------- */

/*	--------------------------------------------------
	Begin Approach
-------------------------------------------------- */

* {
	padding: 0;
	margin:  0;
}

#wrap {
	width: 670px;
	height: 268px;
	cursor: pointer;
	margin: 30px auto;
}

#wrap a {
	display: block;
	font-size: 72px;
	text-decoration: none;
	color: #999;
	line-height: 268px;
	text-align: center;
}
#wrap a:hover {
	color: #FFF;
}

#wrap a#demo-link {
	font-size: 24px;
	color: #FFFFCC;
	line-height: 268px;
	text-align: center;
}

#wrap img {
	float: left;
	height: 67px;
	width: 67px;
	opacity: 0.2;
	z-index: 0;
}
/*	--------------------------------------------------
	End Approach
-------------------------------------------------- */