/* --- `Basic HTML --- */

body {
	font: 1em/1.3em Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
	color: #fff;
	background: #fff url(img/bg.png) repeat-x left top;
}

#container { 
	margin: 0 auto; 
	padding: 0; 
	max-width: 960px; 
	overflow: auto; 
	position: relative; 
	width: 100%;
	text-align: center;
}

a:link { color: #fff; font-weight: bold; }
a:visited { color: #fff; font-weight: bold; }
a:hover, a:active { color: #fff; }

/*hr { border: 0 #ccc solid; border-top-width: 1px; clear: both; height: 0; }*/
hr, .none { display: none; clear: both; }

.small { font-size: 90%; line-height: 1.2em; }
.red { color: #A80D0D; }
.blu { color: #036; }
.green { color: #060; }
.uppercase { text-transform: uppercase; }

/* --- `Headings --- */

h1 { font-size: 2em; }

/* --- `Spacing --- */

p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, li, pre, table, address, fieldset {
	padding-bottom: 10px;
}
	
ol { list-style: decimal; }
ul { list-style-image: url(img/arrow.png); }
li { margin-left: 30px; padding-bottom: 20px; }

/* --- `Clear Floated Elements --- */

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* textarea */

div.btn { 
	margin-top: 10px;
	padding-top: 10px;
	border: none;
	border-top: 1px solid #ccc;
	height: 34px;
	clear: both;
}

button#btn_cerca,
button#btn_annulla, 
button#btn_catalogo, 
button#btn_prenotalo, 
button#btn_invia {
  	width: 113px;
  	height: 24px;
  	border: none;
  	background: url(img/btn_cerca.gif) 0 -1px no-repeat transparent;
  	text-indent: -1000em;
  	cursor: pointer; /* hand-shaped cursor */
  	display: block;
  	float: left;
}
	
button#btn_cerca {
  	width: 56px;
}
	
button#btn_invia {
  	background: url(img/btn_invia.gif) 0 -1px no-repeat transparent;
}

/* --- `STYLES --- */

div#header {
	height: 140px;
	padding-top: 40px;
}
	@media (min-width: 0) and (max-width: 1023px) {
		div#header {
		    padding-top: 20px;
		}
	}
	div#header h1 {
		width: 270px;
		height: 62px;
		background: url(img/logo.png) 65px 0 no-repeat transparent;
		padding: 40px 0 0 45px;
		float: left;
		text-indent: -9000px;
	}
		@media (min-width: 0) and (max-width: 1023px) {
			div#header h1 {
			    background-position: center center;
			    text-align: center;
			    width: 100%;
			    float: none;
			    height: 99px;
			    padding: 0;
			    text-indent: -9000px;
			}
		}
	div#header h2 {
		width: 540px;
		height: 92px;
		background: url(img/slogan.png) 30px 30px no-repeat transparent;
		float: left;
		text-indent: -9000px;
	}
		@media (min-width: 0) and (max-width: 1023px) {
			div#header h2 {
			    background: none;
			    text-indent: 0;
			    width: 100%;
			    text-align: center;
			    font-size: 1.4em;
			    line-height: 1.2em;
			    margin-top: -22px;
			}
		}
div#col_left {
	width: 285px;
	float: left;
	text-align: right;
	font: 0.90em/1.3em Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
	padding-right: 22px;
}
	@media (min-width: 0) and (max-width: 1023px) {
		div#col_left {
		    display: none;
		}
	}
	p.app {
		background: url(img/app.png) 179px 0 no-repeat transparent;
		width: 307px;
		height: 115px;
	}
	span.stelle {
		background: url(img/stelle.png) 198px 0 no-repeat transparent;
		width: 285px;
		height: 30px;
		display: block;
		text-indent: -9000px;
		text-align: left;
	}
	p.btn_contatti a {
		background: url(img/contatti.png) 150px 0 no-repeat transparent;
		width: 285px;
		height: 34px;
		text-indent: -9000px;
		display: block;
		overflow: hidden;
		margin-top: 18px;
		text-align: left;
	}
div#col_center {
	width: 368px;
	height: 727px;
	float: left;
	text-align: center;
	padding-top: 24px;
	background: url('img/iphone.png') center center no-repeat transparent;
}
	@media (min-width: 0) and (max-width: 1023px) {
		div#col_center {
		    float: none;
		    width: 305px;
		    position: relative;
		    margin: 0 auto;
		}
	}
div#col_right {
	width: 285px;
	float: left;
	padding-top: 24px;
	text-align: left;
}
	@media (min-width: 0) and (max-width: 1023px) {
		div#col_right {
		    float: none;
		    width: 100%;
		    background-position: 0;
		    padding: 0;
		    margin-top: -60px;
		}
	}
	p.appstore a {
		background: url(img/appstore.png) 20px 0 no-repeat transparent;
		width: 285px;
		height: 64px;
		text-indent: -9000px;
		display: block;
		overflow: hidden;
		margin-top: 20px;
	}
		@media (min-width: 0) and (max-width: 1023px) {
			p.appstore a {
			    float: none;
			    width: 100%;
			    background-position: center center;
			    margin-top: 0;
			    margin-bottom: 20px;
			}
		}
		
div#col_right p.btn_contatti a {
	display: none;
}
@media (min-width: 0) and (max-width: 1023px) {
	div#col_right p.btn_contatti a {
		display: block;
		width: 100%;
		background-position: center center;
		margin-top: 0;
		margin-bottom: 20px;
	}
}