/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

body {
	background:url(../images/background_gradient.jpg) top no-repeat fixed;
	-webkit-background-size: 2080px 1300px;
	font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: white;
	background-color:#222429;
}

.fontface body {
	background:url(../images/background_gradient.jpg) top no-repeat fixed;
	-webkit-background-size: 2080px 1300x;
	font: 14px/21px 'Droid Sans','Helvetica',Helvetica,Arial,sans-serif;
	color: white;
	background-color:#222429;
}

strong {
	color:white;
}

#header {
	border-bottom: 2px solid yellow;
	margin-bottom:20px;
}

#language {
	text-align:center;
}

#language p {
	padding-top:15px;
	font-size:10px;
	font-weight:bold;
}

#footer {
	border-top: 2px solid yellow;
	margin-top:20px;
	color:white;
	padding-top:10px;
}

#footer div.leftF{
		font-size:16px;
		text-align:left;
		line-height:1.2em;
}

#footer div.rightF{
		font-size:16px;
		text-align:right;
		line-height:1.2em;
}

.homeBlock {
	overflow:hidden;
	border:3px white solid;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	min-height:389px;
}

.homeBlock>div {
	padding:5px;
}

.homeBlock h4 {
	color:white;
}

#paypal form {
	text-align:center;
	margin-bottom:0;
}

#cityInfo .homeBlock {
	background-image: url(../images/bologna.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
}


#exhibitors .homeBlock{
	background-image: url(../images/exhibitors.jpg);
	background-repeat:no-repeat;
}

.blockOverlay {
	/*position:absolute;*/
	background-image: url(../images/overlay.png);
	background-repeat:repeat;
	margin-bottom:10px;
}

.blockOverlay h4, .blockOverlay h5, .blockOverlay li {
	color:yellow;
}

.blockOverlay h5 { 
	margin-bottom:20px;
}

.blockOverlay li {
	float:left;
	/*margin-right:20px;*/
}

#news {
	margin-top:10px;
}

#news>ul>li {
	height:155px;
}

.newsTitle {
	color:yellow;
	margin-bottom:2px;
}

.newsDate {
	color:#2BA6CB;
	font-size:0.8em;
	margin-bottom:2px;
	margin-left:5px;
}

.newsBody {
	font-size:0.8em;
	margin-left:5px;
}

#devCon .homeBlock{
	background-image: url(../images/0004611.jpg);
	background-position:bottom;
	background-repeat:no-repeat;
}

#devCon p {
	font-size:0.8em;
	line-height:1.4em;
	clear:both;
	margin-bottom:10px;
}

#devCon li {
	margin-bottom:5px;
	color:white;
}

#paypal {
	font-size:0.9em;
}

a {
   outline: 0;
}

a img {
   outline: 0;
}

.show {
	display:block;
}

.hide {
	display:none;
}

.menu li, .menu li a {
	color:yellow;
	padding-left: 5px;
	padding-right: 5px;
}

.menu li a:hover {
	color:white;
	padding-left: 5px;
}

ul.menu li {
	list-style: none;
	margin-left: 5px;
	padding-left: 1em;
	text-indent: -1em;
}

.menu li p {
	color:white;
	margin-bottom:5px;
}

/* CSS3 STACKS
		http://inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/
*/

div.gallery {max-width:90%; margin:auto; margin-top:30px; text-align:center;}

.csstransforms .stack { position: relative; z-index: 10; }
 
/* Image styles */
.csstransforms .stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
 
/* Stacks creted by the use of generated content */
.csstransforms .stack:before, .csstransforms .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out;
}
.csstransforms .stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.csstransforms .stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */
.csstransforms .stack.rotated:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
}
.csstransforms .stack.rotated:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}

/* Third stack example (One stack element rotated in the opposite direction) */
.csstransforms .stack.twisted:before {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}
.csstransforms .stack.twisted:after {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

/* Fourth stack example (Similar to the second but rotated left) */
.csstransforms .stack.rotated-left:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.csstransforms .stack.rotated-left:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg);
}

/* Reset all rotations on hover */
.csstransforms .stack:hover:before, .csstransforms .stack:hover:after {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* CSS3 STACKS
		http://inspectelement.com/tutorials/create-the-illusion-of-stacked-elements-with-css3-pseudo-elements/
*/

.no-csstransforms div.gallery {border: 10px solid #fff; overflow:hidden;padding:0; height:200px;}
.no-csstransforms div.gallery img{
	width:100%; 
	height:200px;
	margin:0;
	padding:0;
}

/* #Page Styles
================================================== */

/* 404 */

.errorpage {
	font-size:2000%;
	color:white;
	font-weight: 700;
	line-height: 1.1em;
	text-align:center;
}

.frontPage {
	color:white;
	font-size:23px;
	font-weight: 700;
  font-family: "Droid Sans","Helvetica",Helvetica,Arial,sans-serif;
  line-height: 1.1em;
	margin-bottom: 14px;
  margin-top: 14px;
	text-align:center;
}

.frontPage1 {
	color:white;
	font-size:27px;
	font-weight: 700;
  font-family: "Droid Sans","Helvetica",Helvetica,Arial,sans-serif;
  line-height: 1.1em;
	margin-bottom: 14px;
  margin-top: 14px;
	text-align:center;
}

/* Info */

#cityInfo h4, #whereToStay h4, #howToArrive h4{
	color:white;
}

#whereToStay h5 {
	color: yellow;
}

#gmap {
	display:block;
	height: 450px;
}

#directions {
	background-color:white;
}

/* Exhibitors */

#commercial h4, #nonCommercial h4, #tournament h4{
	color:white;
}

#commercial h5, #nonCommercial h5, #tournament h5{
	color:white;
}

/* Gallery */

.galBlock {
	overflow:hidden;
	border:3px white solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	height:auto;
}

.galBlock>div {
	padding:5px;
}

.galBlock h4 {
	color:white;
}

#slideshow img {
	width:100%;
	border:3px solid white;
}

#gallery h4 {
	color:white;
}

ul#slideshow {
	float:left;
}

ul#slideshow>li {
	float: left;
  margin-right: 5px;
  width: 30%;
}

.simplePagerNav li {
	float:left;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.homeBlock {
			margin-top: 10px;
		}
		#devCon .homeBlock{
			background-image: url(../images/0004611-1.jpg);
			background-repeat:no-repeat;
		}	
		
		ul#slideshow>li {
			float: left;
			margin-right: 2px;
			width: 30%;
		}
		
		.menu li {
		    color: yellow;
			padding-left: 5px;
			padding-right: 5px;
			float: left;
		}
		
		.menu li a{
		    color: yellow;
			padding:0;
		}
		
		.homeBlock {
			overflow:hidden;
			border:3px white solid;
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			border-radius: 8px;
			min-height:10px;
		}
		
		div.gallery {max-width:100%; margin:auto; margin-top:20px; text-align:center;}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.homeBlock {
			margin-top: 10px;
		}
		
		ul#slideshow>li {
			float: left;
			margin-right: 2px;
			width: 45%;
		}
		
		#devCon .homeBlock{
			background-image: url(../images/0004611-1.jpg);
			background-repeat:no-repeat;
		}
		
		.menu li {
		    color: yellow;
			padding-left: 4px;
			padding-right: 4px;
			float: left;
		}
		
		.menu li a, .menu li a:hover, .menu li a:active{
		    color: yellow;
			padding:0;
			margin: 0;
		}
		
		.homeBlock {
			overflow:hidden;
			border:3px white solid;
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			border-radius: 8px;
			min-height:10px;
		}
		
		div.gallery {max-width:100%; margin:auto; margin-top:20px; text-align:center;}
	}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/