/* 
	This css has been designed by Rosella Gennari, 
		<gennari@inf.unibz.it>, and is 
		released under a Creative Commons License -
		http://creativecommons.org/licenses/by-nc-sa/1.0/  
*/


html {
	background-color: #ffffcc; 
}

html.popup {
	background-color: #ccccff; 
}


body {
	margin: 0;
	padding: 0; 
	font: normal 12pt/24pt Tahoma, Verdana, Arial, Georgia, sans-serif; 
	color:  #333366;  
	text-align: center;
	/* background: #ffff99; */
}

acronym {
	text-decoration: none;
	color: #d7661c;
	border-bottom: 1px dotted #cccccc;
	cursor: help;
}

h1, h2, h3, ul {
	margin-top: 1.3em;
	margin-bottom: 1.1em; 
}

p {
	margin-top: 1.1em;
	margin-bottom: 1.1em; 
}

h1 { 
	font-size: 200%; 
	font-weight: 400; 
	text-transform: uppercase; 
	letter-spacing: 2px;
}
h2 { 
	font-size: 150%; 
	font-weight: 400; 
	text-transform: uppercase; 
	letter-spacing: 1px;
}
h3 { 
	font-size: 135%; 
	font-weight: 400; 
	color: #999999;  
	text-transform: uppercase; 
	letter-spacing: 1px;
}



/* ------------------- three main layers */
#topbox {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 950px;
	height: 490px;
	border: 1px solid #cccccc;
	margin-top: 20px;
	margin-left: 20px;
	padding: 0;
	background: #ffff66;
	background-image: url('../Images/logo-bg.gif');
	background-repeat: no-repeat;
	background-position: center;
}

#main {
	width: 620px;
	height: 488px;
	margin: 0;
	padding: 0;
	text-align: center;
	float: left;
}

#explanation {
	width: 324px;
	height: 407px;
	border: 1px solid #333366;
	background: #333366;
	position: absolute;
	top: 0px;
	left: 622px;
}

#result {
	width: 324px;
	height: 405px;
	border: 1px solid #333366;
	background: #333366;
	position: absolute;
	top: 1px;
	left: 623px;
	text-align: center;
}
/* ------------------- three main layers */

div#storyTitles {
	text-align: left;
	width: 948px;
	height: 407px;
	font-size: 1.5em;
}

div#storyMenu {
	position: absolute;
	width: 650px;
	height: 100px;
	left: 200px;
	top: 200px;
}


/* ------------------- layers with the central content */
div#content {
	width: 618px;
	height: 407px;
	border: 1px solid #333366;
	background: #ffffff;
}

div#contentTransparent
{
	width: 618px;
	height: 407px;
	border: 1px solid transparent;
	text-align: left;
	vertical-align: middle;
}
/* ------------------- layers with the central content */



/* ------------------- layer with links on the bottom */
div#footer {
	margin-top: 0px;
	width: 620px;
	position: absolute;
	top: 409px;
	left: 0px;
}

div#pageNumber {
	margin: 0;
	width: 64px;
	height: 61px;
	font-size: 3em;
	position: absolute;
	top: 5px;
	left: 1px;
	border: 2px solid #444488;
}
/* ------------------- layer with links on the bottom */


/* ------------------- story layers */
div#storyText {
	height: 170px;
	margin: 2px 2px 2px 2px;
	padding: 8px 4px 0px 10px;
	background: #333366;
	font: comic sans;
	font-size: 170%;
	line-height: 130%;
	color: #ffffff;
	text-align: left;
	vertical-align: middle;
}

div#storyImage {
	margin-top: 25px;
	margin-bottom: 20px;
}
/* ------------------- story layers */



/* ------------------- layer for displaying a list (dicionario, esercizi) */
div#list {
	height: 401px;
	margin: 2px 2px 2px 2px;
	border: 1px solid #333366;
	background: #333366;
	font-size: 150%;
	color: #ffffff;
	text-align: left;
	vertical-align: middle;
}
/* ------------------- layer for displaying a list (dicionario, esercizi) */


/* ----------------------------exercises */
div#eserContent {
	width: 616px;
	height: 405px;
}

div#eserHeader {
	width: 616px;
	height: 84px;
	background: #333366;
	border: 1px solid #333366;
	text-align: center;
}

div#eserBody {
	width: 616px;
	height: 317px;
	background: #ffffff;
	border: 1px solid #333366;
    line-height: 120%;
    vertical-align: top;
}

div#leftColumn {
    width: 172px;
    height: 300px;
	position: absolute;
	top: 100px;
	left: 12px;
}

div#middleColumn {
    width: 210px;
    height: 300px;
   	position: absolute;
	top: 100px;
	left: 220px;
}

div#rightColumn {
	width: 172px;
	height: 300px;
	position: absolute;
	top: 100px;
	left: 435px;
}

div#fourTop {
	width: 616px;
	height: 150px;
	background: #ffffcc;
	border: 1px solid #333366;
	position: absolute;
	top: 89px;
	left: 1px;
}

div#fourBottom {
	width: 616px;
	height: 150px;
	background: #ffffcc;
	border: 1px solid #333366;
	position: absolute;
	top: 256px;
	left: 1px;
}

div.fourLeft {
    width: 200px;
	position: absolute;
	top: 10px;
	left: 0px;
	text-align: left;
}

div.fourRight {
    position: absolute;
	top: 10px;
	left: 216px;
}

div#wordsSpace {
	background: #9999ff;
	height: 171px;
}

div#phraseRow {
	position: absolute;
	top: 290px;
	left: 1px;
	margin-left: 1px;
}
/* ----------------------------exercises */


div#imageOver {
	position: absolute;
	top: 60px;
	left: 50px;
}

div#textUnder {
	position: absolute;
	top: 80px;
	left: 20px;
}

div#imageOnBottom, #imageOnBottom2 {
	position: absolute;
	top: 300px;
	left: 20px;
}

div#imageOnBottom2 {
	left: 2px;
}

div#imageOnTop {
}

div#count {
	position: absolute;
	top: 320px;
	left: 140px;
	font-size: 1.5em;
}

img.border {
	border: 1px solid #333366;
}

img {
	border: 2px solid #444488;
}

.submitBorder {
	border: 2px solid #444488;
}

img.textTop {
	vertical-align: top;
	border: 1px solid #333366;
}

img.noBorder {
	border: none;
}

a.storyMenu, .storyMenuTitle {
	color: #333366;
	text-decoration: none;
	border-bottom: no;
}

a.storyMenu:hover {
	color: #ff9900;
	text-decoration: none;
	border-bottom: none;
}

a.storyMenuTitle:hover {
	text-decoration: none;
	border-bottom: none;
	cursor: default;
}

a.dizionario {
	color: #ffff00;
	border-bottom: 1px solid #ffff00;
	border-top: 1px solid transparent;	
	text-decoration: none;
	padding-right: 1px;
	padding-left: 1px;
}

a.dizionario:hover {
	color: #ffffff;
    border: 1px solid #ffffff;
	text-decoration: none;
	padding-right: 0px;
	padding-left: 0px;	
}

a.alist {
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

a.alist:visited {
	text-decoration: none;
	color: #ff9900;
	border-bottom: 1px solid #ff9900;
}

.center {
	text-align: center;
}

.white {
	color: #ffffff;
}

.temporal {
	color: #ff9900;
}

.temporalB {
	color: #ff9900;
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.fontSmaller {
	font-size: 0.9em;
}

.marginAuto {
	margin: auto;
}

.noMargin {
	margin: 0;
}

p.marginSmaller {
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 1px;
}

p#links{
	margin-top: 5px;
	margin-bottom: 0px;
	margin-right: 1px;
	border-bottom: 0px;
	float: right;
}

.pSmall, .pSmallC {
	margin-top: 2px;
	margin-bottom: 1px; 
}

.pSmallC {
	text-align: center;
}

.pTD {
	margin-top: 0px;
	margin-bottom: 0px; 
	margin-left: 10px;
	line-height: 140%;
}

#pTDexercise {
	margin-top: 100px;
	margin-left: 10px;
}

p.title {
	text-align: center;
	font-size: 1.5em;
	margin-bottom: 20px;
	margin-top: 20px;
}

p.wordToExplain {
	margin: auto;
	padding-top: 40px;
	font-size: 1.5em;
	color: #ffffff;
}

p.wordExplanation {
	margin-left: 10px;
	margin-right: 10px;
	padding: 10px 10px 10px 10px;
	font-size: 1.1em;
	color: #333366;
	text-align: left;
	background: #ffffff;
}

p.correctPhrase {
	margin: auto;
	color: #ffffff;
	width: 280px;
	font-size: 1.1em;
}

p.incorrectPhrase {
	margin: auto;
	color: #ff0000;
	width: 280px;
	font-size: 1.1em;
}

p.storyTitle {
	color: #ffffff;
	font-size: 1.3em;
	margin-bottom: 0px;
}

.leftIndent {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 50px;
	font-size: 1.2em;
}

.listFirst {
	margin: 0;
	margin-top: 20px;
	padding-left: 50px;
}

.list {
	margin: 0;
	margin-top: 8px;
	padding-left: 50px;
}


/*Riordina storia*/
div#lyr3, #lyr4, #lyr0, #lyr1, #lyr2, #lyr5, #lyr6, #lyr7, #lyr8, #lyr9 { 
	position: absolute;
	top: 80px;
	width: 100px;
	height: 100px;
	background: red;
}
div#lyr5, #lyr6, #lyr7, #lyr8, #lyr9 {
	top: 230px;
} 
div#lyr3, #lyr5 { left: 50px; }   
div#lyr4, #lyr6 { left: 150px; }   
div#lyr0, #lyr7 { left: 250px; }    
div#lyr1, #lyr8 { left: 350px; }    
div#lyr2, #lyr9 { left: 450px; }     



/*Scrivi una frase*/
div#w1, #w2, #w3, #w4, #w5, #w6, #w7 {
	position: absolute;
	width: 119px;
	text-align: center;
	background: #ffff00;
	font-weight: bold;
} 
div#w1 { left: 20px;	top: 190px; }
div#w2 { left: 90px;	top: 230px; }
div#w3 { left: 160px;	top: 180px; }
div#w4 { left: 230px;	top: 240px; }
div#w5 { left: 350px;	top: 200px; }
div#w6 { left: 420px;	top: 170px; }
div#w7 { left: 490px;	top: 220px; }  

td.yellow {
	background: #ffff00;
	width: 119px;
	height: 40px;
}




/*Scrivi la tua storia*/
div#myTitle {
	position: absolute;
	left: 3px;
	top: 291px;
	width: 390px;
	background: #cccccc;
}

div#p1, #p2, #p3, #p4, #p5, #p6 {
	position: absolute;
	background: #333366;
	color: #ffffff;
	padding-left: 5px;
	padding-right: 5px;
	width: 180px;
}
div#p1 { left: 10px;	top: 95px; }
div#p2 { left: 90px;	top: 155px; }
div#p3 { left: 40px;	top: 125px; }
div#p4 { left: 145px;	top: 225px; }
div#p5 { left: 20px;	top: 190px; }
div#p6 { left: 45px;	top: 260px; }

div#t1, #t4, #t7, #t10, #t13, #t2, #t5, #t8, #t11, #t14, #t3, #t6, #t9, #t12, #t15 {
	position: absolute;
	background: #ff9900;
	padding-left: 5px;
	padding-right: 5px;
	width: 80px;
}
div#t1, #t4, #t7, #t10, #t13 {
	left: 305px; 	top: 100px;
}
div#t2, #t5, #t8, #t11, #t14 {
	left: 290px;	top: 170px;
}
div#t3, #t6, #t9, #t12, #t15 {
	left: 240px;	top: 130px;
}

div#phraseCol {
	position: absolute;
	top: 100px;
	left: 400px;
	margin-left: 1px;
}

div#event1, #event2, #event3, #event4, #event5, #event6 {
	border: 3px solid #333366;
	height: 22px;
	width: 200px;
	position: absolute;
	left: 400px;
}
div#event1 { top: 95px; }
div#event2 { top: 151px; }
div#event3 { top: 207px; }
div#event4 { top: 263px; }
div#event5 { top: 319px; }
div#event6 { top: 375px; }

div#temp1, #temp2, #temp3, #temp4, #temp5 {
	position: absolute;
	left: 450px;
	border: 3px solid #ff9900;
	height: 20px;
	width: 100px;
}
div#temp1 { top: 124px; }
div#temp2 { top: 180px; }
div#temp3 { top: 236px; }
div#temp4 { top: 292px; }
div#temp5 { top: 348px; }

td.event {
    border: 3px solid #cc00cc;
	height: 25px;
	width: 197px;
}

td.temporal {
    border: 3px solid #00cc00;
	height: 22px;
	width: 90px;
}