@page {size: 210mm 297mm; margin: 30mm;}

#main {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: 0px;
	display: block;
	margin-left: -1%;
}

h3 {
	font-size: 1.4em;
	margin-bottom: 0.9em;
	color: rgba(0,0,0,0.6);
}

h4 {
	margin: 1%;
	font-size: 1.25em;
	margin-bottom: 0.25em;
	color: #fff;
}



form .option, form .sub>div {
	width: 100%;
	border: 1px solid #bbb;
	padding: 3%;
	margin-bottom: 20px;
}
.option label p{
	width: 100%;
}


.option p{
	color:#fff;
	margin: 1%;
}


#box {
	width:100%;
}

form fieldset {
	margin: 10px 5%;
}

form fieldset p {
	color:#fff;
	padding: 0.3em;
		font-size: 1.1em;
}

.sub {
	width: 300px 100%;
}


.sub>div {
	background-color: rgba(0,0,0,0.6);
	margin-bottom: 20px;
}

.sub>div p {
	color: #fff;
}



.sub .total-price {
	background-color: rgba(0,0,0,0.6);
}






sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
}

sup { top: -0.5em; }

sub { bottom: -0.25em; }








.option {
	background-color: rgba(0,0,0,0.6);
	border-radius: 20px;
}

.bPrice .bPrice-price span {color: #ff7300;}

.bPrice .total {font-size: 1.6em;}
.bPrice .total span {color: #ff7300; font-weight: bold;}

.bPrice.right .sub {margin-left: 20px;}
.bPrice.left .sub {margin-right: 20px;}

.bPrice textarea {display: block; height: 184px; width: 688px;}

.total-price p {
	color: #fff;
}


/*

Don't edit below this line

*/

.bPrice {position: relative;}
.bPrice .sub {position: absolute;}

.bPrice.right .options {float: left;}
.bPrice.left .options {float: right;}




/*--------------------------

Il comportamento del "sub" è nel file java...
...ho cambiato solo il margin top / if fixed ...
...da 20 a 100px....


.option sub {
    margin-left: 748px;
    margin-top: 20px;
    position: fixed;
    top: 0;
    margin-left: 748px;
    top: 0px;
    position: absolute;
    margin-top: 0px;
}

---------------------------------*/




#stampa {
	text-align: center;
	width: 100%;
	max-width: 684px;
}

.stampa-option {
	text-align: center;
	position: center;
	padding: 2%;
}


/*-------- Media query ------*/

@media only screen and (min-device-width: 400px) and (max-device-width: 500px) and (orientation:portrait) {
	#box {
	    width: 400%;
	}
	.sub {
		margin-left: 80% !important;
	}
}

@media only screen and (min-device-width: 300px) and (max-device-width: 400px) and (orientation:portrait) {
	#box {
	    width: 350%;
	}
	.sub {
		margin-left: 80% !important;
	}
}

@media only screen and (min-device-width: 200px) and (max-device-width: 300px) and (orientation:portrait) {
	#box {
	    width: 300%;
	}
	.sub {
		margin-left: 60% !important;
	}
}