/******************************************************************
Theme Name: Winkipop_12
Theme URI: http://www.thirstcreative.com.au
Description: Custom site for Winkipop.
Author: Thirst Creative
Author URI: http://www.thirstcreative.com.au
Version: 1.0
******************************************************************/

/******************************************************************
GENERAL LAYOUT STYLES
******************************************************************/

body 
{ 
	background: #fff; 
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 50%, #f4f4f4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(100%,#f4f4f4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#f4f4f4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#f4f4f4 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#ffffff 50%,#f4f4f4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
}

/******************************************************************
GRID STYLES
******************************************************************/

/* 960 Grid System (http://960.gs/ ) */

#container, .wrap 
{ 
	width: 960px;
	padding: 0px 0px 40px 0px;
	
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -265px;
}

.push { height: 190px; }
	
/* default styles & fixes */
.first { margin-left: 0; } /* fixes alignment */
.last { margin-right: 0; } /* fixes alignment */

/* Grid */

.col-255
{
	width: 255px;
	float: left;
	margin-right: 20px;
}

.col-415
{
	width: 415px;
	float: left;
	margin-right: 20px;
}

.col-690
{
	width: 670px;
	float: left;
	margin-right: 40px;
	padding-bottom:25px;
}

.col-250
{
	width: 250px;
	float: left;
}
	
/******************************************************************
COMMON & REUSABLE STYLES
******************************************************************/

/* floats */
.left { float: left; }
.right { float: right; }
	
/* text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* highlighting search term on search page */
mark, .search-term { background: #EBE16F; }

/* alerts & notices */
.help, .info, .error, .success { margin: 10px; padding: 5px 18px; border: 1px solid #cecece; }
.help { border-color: #E0C618; background: #EBE16F; }
.info { border-color: #92cae4; background: #d5edf8; }
.error { border-color: #fbc2c4; background: #fbe3e4; }
.success { border-color: #c6d880; background: #e6efc2; } 
	
/******************************************************************
LINK STYLES
******************************************************************/

a, a:visited 
{ 
	color: #000;
	text-decoration: underline; 
	outline: none !important;
}

a:hover, a:focus 
{ 
	color: #000;
	text-decoration: underline;
}

a:active {} /* on click */
a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */ }

/******************************************************************
TEXT SELECTION STYLES
******************************************************************/

/* Highlighted Text */
::selection { 
	background: #6fc2f6; 
	color:#fff; 
	text-shadow : none; 
}

/* Firefox */
::-moz-selection { 
	background: #6fc2f6; 
	color:#fff; 
	text-shadow : none; 
}

/******************************************************************
HEADLINES & TITLES
******************************************************************/

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; }

h1, .h1 
{
}

h2, .h2 
{
	font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    margin:20px 0 -15px;
	color:#DA3F3D;
}

h3, .h3 { font-size: 1.125em; }
h4, .h4 { font-size: 1.1em; font-weight: 700; }
h5, .h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; }

p
{
	font-size: 15px;
	margin-bottom: 16px;
	-moz-hyphens: none;
}

address
{
	font-size: 13px;
	font-style: normal;	
	margin-bottom: 13px;
	margin-right: 40px;
}


/******************************************************************
HEADER SYTLES
******************************************************************/

header[role=banner] 
{
	width: 960px;
	height: 110px;
}

#inner-header
{
	height: 110px;
	width: 960px;
	float: left;
}

	#logo 
	{
		margin-top: 20px;
		width: 365px;
		float: left;
	}
	
	#tagline
	{
		float: right;
		margin-top: 37px;
	}
	#facebookbutton { margin:46px 0 0 30px; float:right; }
	
	#header-logo-icon
	{
		height: 0;
    	left: -210px;
    	position: relative;
    	width: 194px;
	}

/******************************************************************
NAVIGATION STYLES
(Main Navigation)
******************************************************************/
nav
{
	float: left;
}

	.menu
	{ 
		background: #ec5f5a; /* Old browsers */
		
		width: 960px;

		background: -moz-linear-gradient(top,  #ed6b66 0%, #e9423c 50%, #e83d37 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed6b66), color-stop(50%,#e9423c), color-stop(100%,#e83d37)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* IE10+ */
		background: linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed6b66', endColorstr='#e83d37',GradientType=0 ); /* IE6-9 */
	}
		nav[role=navigation] .menu ul li 
		{
			float: left;
    		height: 35px;
    		padding-left: 28px;
    		padding-right: 28px;
		}
		
		nav[role=navigation] .menu ul li:nth-last-child(6)
		{
			padding-left: 30px;
		}
			nav[role=navigation] .menu ul li a 
			{ 
				color: #fff;
				font-size: 14px;
				display: block; 
				text-decoration: none;
				text-shadow: 0 -1px 1px rgba(0,0,0,0.33); 
				padding-top: 7px;
			}
				nav[role=navigation] .menu ul li:hover , .current_page_item
				{ 
					background: #d30f0c;  /* Old browsers */

					background: -moz-linear-gradient(top,  #dd4745 0%, #d41411 50%, #d30f0c 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4745), color-stop(50%,#d41411), color-stop(100%,#d30f0c)); 
					background: -webkit-linear-gradient(top,  #dd4745 0%,#d41411 50%,#d30f0c 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  #dd4745 0%,#d41411 50%,#d30f0c 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  #dd4745 0%,#d41411 50%,#d30f0c 100%); /* IE10+ */
					background: linear-gradient(top,  #dd4745 0%,#d41411 50%,#d30f0c 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4745', endColorstr='#d30f0c',GradientType=0 ); /* IE6-9 */

					color: #fff;
				}
				
				nav[role=navigation] .menu ul li:first-child a {}
				
		nav[role=navigation] .menu ul li.current-menu-item a, 
		nav[role=navigation] .menu ul li.current_page_item a,
		nav[role=navigation] .menu ul li.current-page-ancestor a {}

		/* sub menus */
		nav[role=navigation] .menu ul li ul, nav[role=navigation] .menu ul li ul li ul { 
			background: #4598bb;
			position: absolute; 
			left: -9999em; 
			z-index: 9999; 
			width: 200px; 
		}
			nav[role=navigation] .menu ul li ul li ul { 
				margin-left: 200px; 
				top: auto; 
				margin-top: -30px; 
			}
			nav[role=navigation] .menu ul li ul li:hover ul, nav[role=navigation] .menu ul li:hover ul { 
				left: auto; 
			}
			nav[role=navigation] .menu ul li ul li a { 
				width: 160px; 
			}
			
			nav[role=navigation] .menu ul li ul li a {}
				nav[role=navigation] .menu ul li ul li a:hover {}
			nav[role=navigation] .menu ul li ul li:last-child a {}

				nav[role=navigation] .menu ul li ul li ul.sub-menu { }
					nav[role=navigation] .menu ul li ul li:hover ul.sub-menu { }


/******************************************************************
POSTS & CONTENT STYLES
******************************************************************/

#content {}
	
article header
{
	width: 960px;
	height: 410px;
	margin-top: 5px;
	margin-bottom: 20px;
}
	
.slideshow_corner
{
	background-image: url("library/images/winkipop_slideshow_corner.png");
    background-repeat: no-repeat;
    height: 104px;
    left: 862px;
    position: relative;
    top: -95px;
    width: 113px;
	
	visibility: hidden;
}

.news_and_deals
{
	background-color: #e4e4e5;
	height: 155px;
}

#showcase_sidebar .showcase-content
{
	background-color: #e4e4e5;
}

#showcase_sidebar .showcase-content
{
	float: left;
}

#showcase_sidebar .showcase-content-container
{
	background-color: #FFF;
	height: 155px;
}

/* Navigation arrows */
	#showcase_sidebar .showcase-arrow-previous, #showcase_sidebar .showcase-arrow-next
	{
		cursor: pointer;
    	display: block;
    	height: 18px;
    	position: absolute;
    	top: -39px;
    	width: 18px;
	}
	
	#showcase_sidebar .showcase-arrow-previous
	{
		background-image: url("library/images/winkipop_arrow_left.png");
    	background-repeat: no-repeat;
    	left: 190px;
    	top: -40px;
		
		display: block !important;
	}
	
	#showcase_sidebar .showcase-arrow-next
	{
		background-image: url("library/images/winkipop_arrow_right.png");
    	background-repeat: no-repeat;
    	right: 19px;
		
		display: block !important;
	}

.news_and_deals p
{
	padding: 0px 20px 0px 20px;
	margin-top: 0;
}

.deal_title
{
	color: #e83d37;
	display: block;
	margin-bottom: 0;
	margin-top: 13px !important;
}

.client_testimonial { margin:40px 0 20px; }

.client_testimonial p
{
	color: #757575;
    font-size: 13px;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 19px;
    margin: 0 0 0;
}

.client_testimonial_title
{
	margin-top:10px !important;
	font-weight:bold;
	font-style: normal !important;
}

#events, #events li { margin:0; list-style:none; }
#events li a { padding:10px; font-size:12px; font-weight:bold; color:#000; text-decoration:none; line-height:20px; background:#F0F0F0; border-bottom:1px solid #D8D8D8; display:block; }
#events li a:hover { background:#E2E2E2; }

.eventtitle { width:100%; padding:0 15px; font-weight:bold; font-size:18px; line-height:50px; color:#FFF; letter-spacing:.2px; box-sizing:border-box; background:#666 url(library/images/eventtitle-back.png); }
.moreevents { width:100%; padding:0 15px; font-weight:bold; font-size:18px; line-height:60px; color:#FFF !important; letter-spacing:.2px; display:block; text-decoration:none !important; box-sizing:border-box; background:#3C3E95 url(library/images/moreevents-back.png); border-radius:0 0 30px; position:relative; cursor:pointer; }
.moreevents:after { content:""; width:36px; height:36px; background:url(library/images/arrow-button.png); position:absolute; top:12px; right:12px; }

.moreevents.mobile { margin:12px 0 30px; display:none; }

.mobilefooter { width:100%; margin-top:50px; padding:0 20px; font-size:18px; line-height:60px; background:#DDD; display:none; box-sizing:border-box; overflow:hidden; }
.mobilefooter .facebook { position:relative; top:10px; float:right; }
.mobilefooter a { color:#000; text-decoration:none !important; }

/******************************************************************
Slideshow:
******************************************************************/

/* Showcase
-------------*/

#awOnePageButton .view-slide
{
	display: none;
}

/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load
{
	height: 470px; /* Same as showcase javascript option */
	overflow: hidden;
}

/* Container when content is shown as one page */
.showcase-onepage
{
	/**/
}

/* Container when content is shown in slider */
.showcase
{
	position: relative;
	margin: auto;
}

	.showcase-content-container
	{
		background-color: #fff;
	}
	
	/* Content */
	.showcase-content
	{
		background-color: #fff;
		float: right;
	}
	
	.showcase-thumbnail-restriction
	{
		margin-top: 0 !important;
		background-color: #fff;
		
		width: 315px;
		height: 415px !important;
	}
		
		#showcase .showcase-content-wrapper
		{
			text-align: center;
			height: 415px;
			width: 960px;
			display: table-cell;
			vertical-align: middle;
		}
		
		#showcase_page .showcase-content-wrapper
		{
			text-align: center;
			height: 415px;
			width: 645px;
			display: table-cell;
			vertical-align: middle;
		}
		
		/* Styling the tooltips */
		.showcase-plus-anchor
		{
			background-image: url('../images/plus.png');
			background-repeat: no-repeat;
		}
		
		.showcase-plus-anchor:hover
		{
			background-position: -32px 0;
		}
		
		div.showcase-tooltip
		{
			background-color: #fff;
			color: #000;
			text-align: left;
			padding: 5px 8px;
			background-image: url(../images/white-opacity-80.png);
		}
		
		/* Styling the caption */
		.showcase-caption
		{
			color: #000;
			padding: 8px 15px;
			text-align: left;
			position: absolute;
			bottom: 10px; left: 10px; right: 10px;
			display: none;
			background-image: url(../images/white-opacity-80.png);
		}
		
	.showcase-onepage .showcase-content
	{
		margin-bottom: 10px;
	}
	
	/* Button Wrapper */
	.showcase-button-wrapper
	{
		clear: both;
		margin-top: 10px;
		text-align: center;
		display: none;
	}
	
		.showcase-button-wrapper span
		{
			margin-right: 3px;
			padding: 2px 5px 0px 5px;
			cursor: pointer;
			font-size: 12px;
			color: #444444;
		}
	
		.showcase-button-wrapper span.active
		{
			color: #fff;
		}
	
	/* Thumbnails */
	.showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
	{
		background-color: #fff;
		z-index: 999 !important;
	}
	
	.showcase-thumbnail-wrapper
	{
		overflow: hidden;
		top: 0 !important;
	}
		
		.showcase-thumbnail
		{
			cursor: pointer;
			float: left;
			height: 100px;
			margin-bottom: 5px;
			margin-right: 5px;
			position: relative;
			width: 100px;
		}
		
		.showcase-thumbnail img
		{
			opacity:0.6;
			filter:alpha(opacity=60); /* For IE8 and earlier */
		}
		
			.showcase-thumbnail-caption
			{
				position: absolute;
				bottom: 2px;
				padding-left: 10px;
				padding-bottom: 5px;
			}
			
			.showcase-thumbnail-content
			{
				padding: 10px;
				text-align: center;
				padding-top: 25px;
			}
			
			.showcase-thumbnail-cover
			{
				background-image: url(images/black-opacity-40.png);
				position: absolute;
				top: 0; bottom: 0; left: 0; right: 0;
			}
		
		.showcase-thumbnail img:hover
		{
			opacity: 1;
			filter:alpha(opacity=100); /* For IE8 and earlier */
		}
		
			.showcase-thumbnail:hover .showcase-thumbnail-cover
			{
				display: none;
			}
		
		.showcase-thumbnail.active img
		{
			opacity: 1;
			filter:alpha(opacity=100); /* For IE8 and earlier */
		}
		
			.showcase-thumbnail.active .showcase-thumbnail-cover
			{
				display: none;
			}
	
	.showcase-thumbnail-wrapper-horizontal
	{
		padding: 10px;
	}
	
		.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
		{
			margin-right: 10px;
			width: 116px;
		}
	
	
		/* Hide button text */
		.showcase-thumbnail-button-forward span span,
		.showcase-thumbnail-button-backward span span, .showcase-thumbnail-button-backward
		{
			display: none;
		}
		
		
/******************************************************************
GHOST CAROUSEL
******************************************************************/
		
#ghostCarousel 
{
	overflow: hidden;   
	margin-top: 15px;
}

#ghostCarousel #content > div 
{
	height: 135px;
	width: 200px;
	float: left;
	position: relative;
}

#gcNav 
{
    float: right !important;
    height: 18px !important;
    position: relative !important;
    right: -30px;
    text-align: center;
    top: -80px;
    width: 18px;
    z-index: 999;
}

	/* Footer arrow */
	
	#footer_next_button
	{
		background-image: url("library/images/winkipop_arrow_right_footer.png");
    	background-repeat: no-repeat;
    	cursor: pointer;
    	display: block;
    	height: 18px;
		width: 18px;
	}

/******************************************************************
FOOTER STYLES
******************************************************************/

footer
{
	width: 100%; 
	margin-top: 30px;
}

.sponsor-text-container
{
	width: 100%;
	height: 25px;
}

.sponsor-overlap
{
	background-color: #FFFFFF;
    height: 25px;
    left: -900px;
    position: relative;
    right: 100%;
    width: 1000px;
}

.sponsor-text
{
	z-index: 999;
	position: relative;
}

.footer-container
{
	background-color: #FFF;
	width: 100%;
}

#inner-footer, .sponsor-text
{
	width: 960px;
	margin: 0 auto;
}

#inner-footer img
{
	float: left;
}
	
/******************************************************************
MEDIA QUERIES & DEVICE STYLES
To use a responsive design, it's reccomended to use the responsive version of Bones. You can find it on github: https://github.com/eddiemachado/bones-responsive
******************************************************************/

@media only screen and (min-width: 1025px) {
.moreevents:hover { opacity:.8; }
}

@media only screen and (max-width: 1020px) {
#tagline, #header-logo-icon, #facebookbutton, .slideshow_corner, .showcase-thumbnail-container, #gcNav { display:none !important; }
#container, .wrap, header, #inner-header, .menu, #showcase, #showcase_page, .showcase-content, .showcase-content-wrapper, .showcase-content-container, .showcase-content-wrapper img, #main, article, .col-690, footer, #inner-footer { width:100% !important; box-sizing:border-box; }
.home header, .showcase, .showcase-content, .showcase-content-container, .showcase-content-wrapper { height:300px !important; }
header, #showcase_page.showcase, #showcase_page .showcase-content, #showcase_page .showcase-content-container, #showcase_page .showcase-content-wrapper { height:400px !important; }
header[role=banner], .home header[role=banner], .showcase-content-wrapper img { height:auto !important; }
.showcase-content-wrapper img { position:absolute; top:0; left:50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); }
#container { padding:0 20px 40px; }
#logo { width:100%; text-align:center; }
#logo img { width:240px; height:auto; margin-top:8px; }
nav { width:100%; height:46px; }
nav.pull { height:auto; }
.menu { background:#DE2A25; display:none; }
.menu ul li.current_page_item, .menu ul li.current_page_item a, .menu ul li:hover, .menu ul li a:hover { background:#D31310 !important; }
.menu li { width:100%; text-align:center; box-sizing:border-box; }
#pull { width:100%; height:46px; display:block; position:relative; cursor:pointer; background: #ec5f5a;
background: -moz-linear-gradient(top,  #ed6b66 0%, #e9423c 50%, #e83d37 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed6b66), color-stop(50%,#e9423c), color-stop(100%,#e83d37)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* IE10+ */
background: linear-gradient(top,  #ed6b66 0%,#e9423c 50%,#e83d37 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed6b66', endColorstr='#e83d37',GradientType=0 ); /* IE6-9 */
}
#pull:before { content:""; width:100%; height:100%; background:url("library/images/pull.png") center no-repeat; position:absolute; }
.col-250 { width:100%; }
.col-690 { padding-bottom:0; }
.showcase-arrow-next, .showcase-arrow-previous { width:30px; height:30px; margin-top:-15px; position:absolute; top:50%; right:-15px; background:#FFF url(library/images/nav-arrows.png) right; border-radius:100px; z-index:1; cursor:pointer; }
.showcase-arrow-previous { right:auto; left:-15px; background-position:left; }
footer { overflow:hidden !important; }
.moreevents.mobile { display:block; }
.mobilefooter { display:block; }
}

@media only screen and (max-width: 750px) {
.home header, .showcase, .showcase-content, .showcase-content-container, .showcase-content-wrapper { height:240px !important; }
header, #showcase_page.showcase, #showcase_page .showcase-content, #showcase_page .showcase-content-container, #showcase_page .showcase-content-wrapper { height:340px !important; }
}

@media only screen and (max-width: 650px) {
.showcase-content-wrapper img { width:590px !important; height:260px !important; }
#showcase_page .showcase-content-wrapper img { height:370px !important; }
}

@media only screen and (max-width: 400px) {
.home header, .showcase, .showcase-content, .showcase-content-container, .showcase-content-wrapper { height:180px !important; }
header, #showcase_page.showcase, #showcase_page .showcase-content, #showcase_page .showcase-content-container, #showcase_page .showcase-content-wrapper { height:250px !important; }
.showcase-content-wrapper img { width:400px !important; height:180px !important; }
#showcase_page .showcase-content-wrapper img { height:250px !important; }
}