/* reset */
* {outline: none; background-repeat: no-repeat; border: 0;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}



/* definizioni generali */

html, body {height: 100%; overflow: hidden; }
body { background-color: black; font-family: Arial, sans-serif; color: #fff; font-size: 100px; overflow: hidden; }
h2 { overflow: hidden; font-size: 1.3em; margin-bottom: 4px; text-transform: uppercase; color: rgb(159,55,32); }
p {padding-bottom: 15px; line-height: 15px; font-size: 12px; }
.brick { color: rgb(159,55,32) !important;}


/* sfondo */
#background {  overflow: hidden; height: 100%; width: 100%; z-index: 0; background-image: url(../images/background/bsquared.jpg); background-position: top center; background-color: black;}
#background a { position: absolute; top: 0: left: 0; height: 100%; width: 100%; z-index: 999; }


/* wrapper */
#wrapper {position: relative; top: 0; left: 0; overflow: hidden; }
#wrapper {overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; width: 100%; font-size: 100%; min-height: 540px; min-width: 770px;  }
#wrapper_inner {height: 100%; width: 100%; font-size: 100px; }
#wrapper_inner  {position: absolute; top: 0; left: 0;}


/* page */
.page {position: absolute; width: 100%; height: 100%; padding: 0;}

/* link */
a:link, a:visited, a:active {color: #fff; text-decoration: none; cursor: pointer; }
a:hover {color: #8F8F8F;}
a.back:link, a.back:visited, a.back:hover, a.back:active {display: block; background-color: rgb(159,55,32); line-height: 22px; padding: 0 12px; color: #fff; float: left;}


/* main_menu */
#main_menu {float: left; padding: 13px 0 0 45px;}
#main_menu li {float: left; padding-left: 16px;}
#main_menu img { vertical-align: text-top; margin-top: -0px; } /* logo barra navigazione */


/* top */
#nav_bar {background-color: rgba(0, 0, 0, 0.95); position: absolute; top: -4em; left: 0; width: 100%; height: 4em; }
#top {position: absolute; top: 0; left: 0; z-index: 1000; width: 100%;}
#top a, #top span {font-size: 11px;}
#top a:link, #top a:visited, #top a:active, #top a.selected, #top span {font-size: 12px;  letter-spacing: 0.1em; color: white; text-decoration: none; padding-left: 11px; display: block; background-image:url(../images/layout/main_menu_bg.gif); background-position: bottom left; }
#top a:hover, #top a.selected, #top span {color: rgb(159,55,32) !important; background-position: bottom left;}
#top {min-width: 770px; font-size: 10px;}


/* zoom */
#top span#zoom {display: block; width: 30px; height: 30px; overflow: hidden; background-image:url(../images/zoom/bsquared.png); background-position: 0 0; position: absolute; top: 0.3em; left: 1.4em;  z-index: 1001; line-height: 0; padding: 0; cursor: pointer; }
#top span#zoom:hover { background-image:url(../images/zoom/zoom.png) !important; cursor: pointer; }
.zoom-in h1 {display: none;}
.zoom-in .nav a { background-image: none !important;} 
.zoom-in .nav ul { display: none !important;}
.zoom-in .nav ul a {text-indent: 0; background-color: transparent; position: relative !important; top: 0 !important; left: 0 !important; margin: 0 !important; height: auto !important; width: auto !important;}
.zoom-in .inner {display: none;}


/* logo link */
#top a#bsquared-link:link, #top a#bsquared-link:visited, #top a#bsquareds-link:active, #top a#bsquared-link.selected, #top a#bsquared-link span {  background-image: none; }


/* credits-link */
#top a#credits-link:link, #top a#credits-link:visited, #top a#credits-link:active, #top a#credits-link.selected, #top a#credits-link span {  background-image:url(../images/layout/main_menu_bg.gif); background-position: bottom left; float: right; margin-right: 60px; padding-top: 13px; }


/* social network menu */
#social_menu {float: right; padding: 13px 11px 0 0; position: relative; top: 0; left: 0; z-index: 2;}
#social_menu li {float: left; padding-left: 1px;}

/* facebook */
#top a#facebook:link, #top a#facebook:visited, #top a#facebook:active, #top a#facebook.selected, #top a#facebook span { background-image: url(../images/layout/facebook.png); background-position: left center; padding-left: 15px;}
#top a#facebook:hover { background-image: url(../images/layout/facebook-white.png); background-position: left center;}


/* twitter */
#top a#twitter:link, #top a#twitter:visited, #top a#twitter:active, #top a#twitter.selected, #top a#twitter span { background-image: url(../images/layout/twitter.png); background-position: left center; padding-left: 15px;}
#top a#twitter:hover { background-image: url(../images/layout/twitter-white.png); background-position: left center;}



/* menu articoli*/
.article_menu {float: left; margin-top: 15px; width: 150px; height: 400px; border-right: rgb(159,55,32) 1px solid; padding-right: 5px; }
.article_menu li {float: left; clear: left; width: 100%; padding: 0 0 10px;}
.article_menu a { text-transform: uppercase; font-size: 11px;}
.article_menu a:link, .article_menu a:visited, .article_menu a:active {  width: 100%; overflow: hidden; color: gray; } 
.article_menu a.selected:link, .article_menu a.selected:visited, .article_menu a.selected:hover, .article_menu a.selected:active { padding-left: 10px; background: url(../images/layout/main_menu_bg.gif) no-repeat left center; color: rgb(159,55,32); }
.article_menu a:hover { color: white;}

/* link articoli*/
div.scroll_box a {color: gray;}
div.scroll_box a:hover {color: rgb(159,55,32);}

/* liste articoli*/
div.scroll_box ul { padding-bottom: 10px; }


/* wrapper articoli*/
.article_sections {width: 420px; height: 400px; min-height: 350px; overflow: hidden; position: relative; top: 0; left: 0; float: right; margin-right: 5px; }


/* articoli multipagina*/
ul.multipage_menu { position: absolute; bottom: 0; right: 0; }
.multipage_menu li{ display: inline;}
.multipage_menu li a { color: gray !important; }
.multipage_menu li a:hover { color: rgb(159,55,32) !important; }

/* articoli*/
.article  {width: 420px; height: 400px min-height: 340px; margin-top: 15px; overflow: hidden; position: absolute; top: 0; left: 0; }


/* posizione articoli */

#square1, #life1, #university1, #habitat1, #history1, #job1 {left: 0; }
#square1_2, #life2, #university2, #habitat2, #history1_2, #job2 {left: 500px; }
#square2, #life3, #university3, #habitat3, #history2 {left: 1000px;}
#square3, #life4, #university4, #history2_2 {left: 1500px;}
#square4, #history3 {left: 2000px;}
#square5, #university5, #history3_2 {left: 2500px;}
#square6 {left: 3000px;}
#square7 {left: 3500px;}


/* scroll */
.scrollable {padding: 5px 0; position: relative; top: 0; left: 0;}
.scroll_box {overflow: hidden; position: relative; top: 0; left: 0; }

/* titolo delle sezioni dei contenuti */
.section_title {color: white; float: left; text-transform: lowercase; font-size: 13px; padding: 0px; margin: 0 0 35px 0; text-transform: uppercase;   }

/* inner */
.inner { margin: 25px; font-size: 12px; overflow: hidden; position: relative; top: 0; left: 0; }


/* location */
span.location {display: none; font-size: 14px;  letter-spacing: 0.1em; color: white; width: 100%; height: 100%; position: absolute; text-align:center; top: 50%; margin-top: -0.50em; cursor: pointer;}
.location .location {display: block;}
#current_page span.location { color:rgb(159,55,32)!important; }
#current_page {border-color: rgb(159,55,32)!important;}


/* logo*/
h1 { background-image:url(../images/layout/logo.png); width: 351px; height: 66px; text-indent: -3000px; overflow: hidden; position: absolute; top: 70px; left: 55px; cursor: pointer; } 


/* bsquared */
#bsquared .content { height:210px; width:460px; }


/* university */
#university .article_menu { height: 350px;}
#university .inner { height: 350px; width:500px; margin: 20px 25px;}
#university_sections, #university .article { width: 310px; }


/* square */
#square .inner { height:400px; width:600px; }


/* life */
#life .article_menu { height: 350px;}
#life .inner { height: 350px; width:500px; margin: 20px 25px;}
#life_sections, #life .article { width: 310px; }


/* habitat */
#habitat .article_menu { height: 260px;}
#habitat .inner { height: 260px;  margin: 10px 25px;}
#habitat_sections, #habitat .article { width: 235px; }


/* history */
#history .article_menu { height: 260px;}
#history .inner { height: 260px;; width:500px; margin: 10px 25px;}
#history_sections, #history .article { width: 310px; }


/* job */
#job .article_menu { height: 260px;}
#job .inner { height: 260px;  margin: 10px 25px;}
#job_sections, #job .article { width: 235px; }



/* thumbs */
img.thumbs { width: 75px; border: 3px solid white; clear: both; }
a img.thumbs:hover { border-color: rgb(159,55,32); }


/* credits */

div#credits { display: none; border: 0.10em solid rgb(159,55,32); background-color: rgba(0, 0, 0, 0.95); position: absolute; top: 50%; left: 50%; margin-top: -1.0em; margin-left: -3.1em; width: 5em; height: 2em;  }
div#credits h2 { padding: 10px 0 0 20px; margin: 0; font-size: 18px;}
div#credits p { font-size: 13px; color: white; margin:0; padding: 10px 0 0 20px; letter-spacing: 0.1em; line-height: 0.9em; }

div#erika { position: absolute; width: 100px; height: 186px; background: url(../images/layout/erika.png) no-repeat; overflow: hidden; top: 50%; left: 50%; margin-top: -2.28em; left: 4.4em; z-index: 999; }

div#bob { position: absolute; width: 90px; height: 219px; background: url(../images/layout/bob.png) no-repeat; overflow: hidden; top: 50%; left: 50%; margin-top: -2.30em; left: 3.45em; z-index: 999; }

div#lara { position: absolute; width: 200px; height: 219px; background: url(../images/layout/lara.png) no-repeat; overflow: hidden; top: 50%; left: 50%; margin-top: -1.91em; left: 1.65em; z-index: 999; }


/* offset */
#offset_right, #offset_right2 { position: absolute; overflow: hidden; }
#offset_right {  top: 10000px; width: 1em; height: 1em;  background-color: black; z-index: 1000000; left: 10000px; }
#offset_right2 { top: 200px; left: -10000px; display: block; z-index: 2000; width: 4.9em; height: 0.1em; }


/* dimensioni e posizione aree contenuti */
.content {border: 0.13em solid #fff; margin: 0 auto; position: absolute; top: 50%; left: 50%; background-color: rgba(0, 0, 0, 0.95); }
#bsquared .content { height:2.1em; margin-left:-2.7em; margin-top:-1.45em; width:4.6em; }
#university .content, #square .content, #life .content { height: 3.8em; width: 5.63em; margin-top: -2.5em; margin-left: -3.21em;  }
#square .content {margin-left: -3.41em; height: 4.5em; min-height: 4.5em; width: 6.4em; }
#life .content {height: 4.2em; width: 5.63em;}
#habitat .content,  #history .content,  #job .content { height: 2.91em; width: 4.63em; margin-top: -1.85em; margin-left: -2.85em; min-height: 2.91em;}
#history .content { width: 5.63em; margin-left: -2.815em; }
#history .content { margin-left: -3.00em}
#university .content, #life .content {height: 4.0em; min-height: 4.0em;}


/* posizione blocchi aperture (da->verso) */
#bsquared div.square {top: 2.10em; left:1.98em;}
#bsquared div.square {top: 2.10em; left:1.98em;}
#university div.square {top: 1.715em; left: 5.63em;}
#university div.habitat {top: 4.0em; left: 2.1em;}
#square div.bsquared {top: -0.13em; left: 2.70em;}
#square div.university {top: 2.0em; left: -0.13em; }
#square div.life {top: 2.0em; left: 6.40em; }
#square div.history {top: 4.5em; left: 2.70em; }
#life div.square {top: 1.715em; left: -0.13em; }
#life div.job {top: 4.0em; left: 2.1em;}
#habitat div.history {left: 4.630em; top:1em;}
#habitat div.university {top: -0.13em; left: 1.715em;}
#history div.habitat {left: -0.13em; top:1em;}
#history div.job {left:5.63em; top:1em;}
#history div.square {left: 2.25em; top: -0.13em;}
#job div.history {top: 1em; left: -0.1253em;}
#job div.life{top: -0.13em; left: 1.715em;}


/* aperture */
.nav  {position: absolute; background-color: rgb(159,55,32); height: 1em; width: 0.13em; line-height: 0;}


/* link aperture */
.nav div {width: 1em; height: 0.53em; margin: 0; position: relative; text-align: center; cursor: pointer; }
.nav ul { position: absolute; margin-top: -50px; top: 0; left: 0; width: 100px; font-size: 10px !important; background-color: rgb(159,55,32); display: none;}
#wrapper .nav ul a:link, #wrapper .nav ul a:visited, #wrapper .nav ul a:active {color: black;  height: 24px !important; width: auto; margin: 0; text-indent: 0; overflow: visible; line-height: 24px; white-space: nowrap;  font-size: 1.2em; }
#wrapper .nav ul a:hover {color: #fff;}


/* dimensione aperture orizzontali (da->verso) */
#bsquared div.square,  #square div.bsquared,  #square div.history, #history div.square, #university div.habitat, #habitat div.university, #life div.job, #job div.life {width: 1em; height: 0.13em; } 


/* dimensione link aperture verticali (da->verso) */
#square div.nav.life div, #square div.nav.university div, #university div.nav.square div, #life div.nav.square div, #habitat div.nav.history div, #history div.nav.habitat div, #history div.nav.job div, #job div.nav.history div  { width: 0.1em; height: 1em; }
 

/* posizione e padding link aperture (da->verso) */
#bsquared div.square ul {top: 5.3em; padding: 10px 0;}
#square div.bsquared ul {top: 1em; padding: 10px 0;} 
#square div.university ul { left: -98px; top: 50px; padding: 38px 0; }
#square div.life ul {top: 50px; padding: 40px 0;} 
#square div.history ul {top: 6.0em; padding: 10px 0;} 
#history div.square ul {top: 1em; padding: 10px 0;} 
#history div.habitat ul {left: -98px; top: 50px; padding: 38px 0;}
#history div.job ul {top: 50px; padding: 38px 0;}  
#habitat div.university ul {top: 1em; padding: 10px 0;} 
#habitat div.history ul {top: 50px; padding: 26px 0;} 
#job div.life ul {top: 1em; padding: 10px 0;}
#job div.history ul { left: -98px; top: 50px; padding: 26px 0; }
#life div.square ul  { left: -98px; top: 50px; padding: 26px 0; }
#life div.job ul {top: 6.0em; padding: 10px 0;}
#university div.square ul {top: 50px; padding: 26px 0;}
#university div.habitat ul {top: 6.0em; padding: 10px 0;}