/* 
 * capitocome.it MAIN CSS
 * Copyright © 2009-2010 Capitocome
 * Author: Matteo Carletti - Web Development/Web Designer freelance
 * Email: carlettiteo(at)gmail(dot)com
 */

@import url('yui-reset.css');
.pngfix { *behavior: url( iepngfix.htc ); }

html, body, #bg, #bg table, #bg td, #cont {height:100%; width:100%; overflow:hidden}
body {cursor:default;background:url(../images/template/loading.gif)}
h1 {font:38px 'Courier New', Courier, monospace}
h2 {font:28px 'Courier New', Courier, monospace}
img {display:block}
a {text-decoration:none;color:red}
a:hover, a:active {background:red; color:#FFF}

/* Title page */
h1 img {position:absolute; right:20px; top:150px; z-index:75}
/* Stikers page */
h3 {position:relative;border-bottom:1px solid #CCC;padding:30px 30px 10px;margin:-28px -30px 0;text-transform:uppercase;line-height:1.5;font-weight:700}
h3 span {position:absolute;right:518px;top:29px;background:#000;text-align:center;padding:0 5px;white-space:nowrap;display:block;color:#fff;font-weight:400}
/* Badge Top page and Bottom page */
#badge-scroll {position:absolute; left:0; top:300px; z-index:74; display:block; padding:0}
#badge-scroll img {border:0}
.anchor-top {position:absolute; top:0; left:0}
	
/*** MENU ***/
#menu {position:absolute; top:20px; left:0; width:100%; z-index:80; background:#000; opacity:0.8; filter:alpha(opacity=80)} /* UP #cont; DOWN #ClearBox->1000) */
#menu div {height:53px;	margin:0 auto; padding:0; font:26px 'Courier New', Courier, monospace; line-height:22px}
#menu-main {width:520px}
#menu-shop {width:788px}
#menu-philosophy {width:600px}
#menu ul {width:100%}
#menu li {list-style:none}

.alignRight {float:right}
.alignRight a {background:url(../images/template/contact.png) right center no-repeat; display:block; height:37px; padding:16px 3px 0; color:#999}
.alignRight a:hover, .alignRight a:active {background:#FFF url(../images/template/contact_hover.png) right center no-repeat; color:#000}
.alignRight span {padding-right:30px}
.alignLeft {float:left; margin-left:-20px}
.alignLeft a {background:url(../images/template/back_home.png) left center no-repeat; display:block; height:37px; padding:16px 3px 0; color:#999}
.alignLeft a:hover, .alignLeft a:active {background:#FFF url(../images/template/back_home_hover.png) left center no-repeat; color:#000}
.alignLeft span {padding-left:52px}
.alignCenter {float:left; margin-left:0}
.alignCenter a {display:block; height:37px; padding:16px 3px 0; color:#999}
.alignCenter a:hover, .alignCenter a:active {background:#FFF; color:#000}

/*** MAIN CONTENTS ***/
#cont {position:absolute; top:0; left:0; z-index:70; overflow:auto}
div.box {margin:96px auto 0; width:540px; padding-bottom:90px; min-height:50%}
#box-content{padding:30px; font:13px/1.8 'Courier New', Courier, monospace; text-align:center; background:#fff}
#box-content p {padding-bottom:14px; margin:0 auto}
#box-content img {margin:0 auto}
#box-content blockquote {margin-left:20px}

#philosophy{margin:96px auto; width:600px}

/*** ABOUT ***/
.aboutImages {padding-bottom:16px}
.aboutCollection {font-weight:bold}
.aboutLink {border-bottom:1px dashed #F00; color:#000}

/*** CONTACT ***/
.contact-link {padding-top:20px !important; font:18px "Courier New", Courier, monospace !important;}
.contact-link a:hover, .contact-link a:active {background:none}
a:hover.highlight, a:active.highlight {background:#F00}
.contact-link a img {display:inherit; border:0; text-align:center}
.contact-link a:hover img, .contact-link a:active img {opacity:0.7; filter:alpha(opacity=70)}
#gmap {margin-top:20px;border:1px dotted red;width:478px;height:500px}

/*** MAIN e-SHOP ***/
.innerIcons {width: 480px; margin:10px 0 0; padding:0}
.innerIcons li {
	float:left;
	list-style:none;
	width:145px; height:233px;
	margin-right:18px;
	text-align:left;
	font:bold 14px "Courier New", Courier, monospace;
	line-height:1.2
}
.innerIcons li a {
	display:block;
	width:145px; height:233px;
 border: 1px dotted #999;
	color: #222;
	/*for IE?*/
	font:bold 14px "Courier New", Courier, monospace;
	line-height:1.2
}
.innerIcons li a:hover, .innerIcons li a:active {border:1px solid #F00; color: #FFF;
	font:bold 14px "Courier New", Courier, monospace; /*for IE?*/
	line-height:1.2
}
.innerIcons li img {border:0}
.innerIcons li span {display:block; margin:4px 0 0 5px;	font:bold 14px "Courier New", Courier, monospace; line-height:1.2}
.innerIcons li span img {float:right;position:relative; margin:5px 6px}

.one-line {height:240px}
.two-line {height:500px}
.four-line {height:1020px}
.noMargin-right {margin-right:0 !important;}
.icoMargin-top {margin-top:20px !important;}

/*** DOWNLOADS ***/
.dw-item {width:480px; height:96px;	margin:10px 0 0; padding:0}
.dw-icon {float:left; width:100px; text-align:left;	line-height:1.2}
.dw-icon a {display:block; width:100px;	height:94px; border:1px dotted #999; color:#000}
.dw-icon a:hover, .dw-icon a:active {border:1px solid #F00; color:#FFF}
.dw-icon img {border:0}
.dw-icon span {display:block; margin-top:4px; font-size:13px; font-weight:bold; text-align:center}
.dw-details {position:relative;	float:right; width:370px; height:96px; text-align:left}
.dw-title {display:block; font-size:22px; font-weight:normal; line-height:normal}
.dw-title a {color:#000; border-bottom:1px dashed #CCC}
.dw-title a:hover, .dw-title a:active {color:#FFF; background:#F00;}
.dw-credits {display:block;	margin:6px 0 0;	font-size:12px;	line-height:1.2;	width:370px; color:#333}
.dw-credits a {color:#555}
.dw-credits a:hover, .dw-credits a:active {color:#F00; background:none; text-decoration:underline}
.dw-credits span {display:block; margin-top:5px; font:oblique 13px Tahoma, Geneva, sans-serif; color:#444; line-height:1.4; letter-spacing:0.05em}

/*** FOOTER ***/
#footer {margin:10px 0 0 0; padding:2px 4px; background:#000; text-align:right; font:14px 'Courier New', Courier, monospace; color:#FFF !important; opacity:0.8; filter:alpha(opacity=80)}
#footer a {color:#FFF !important; border-bottom:1px dashed #FFF !important;}
.logo {float:left; margin-top:-2px}
.slogan {float:left; margin-top:2px; font-size:11px}

/*** BACKGROUNDS ***/
#bg div {position:absolute;width:200%;height:200%;top:-50%;left:-50%}
#bg td {vertical-align:middle;text-align:center}
#bg img {margin:0 auto;min-height:50%;min-width:50%}