body
{
	height: 100%;
	width: auto;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
}

.title
{
	width: 70%;
	border: 3px;
	border-style: solid;
	font-size: 30px;
	padding: 15px;
	margin: 10px;
	margin-top: 0px;
	font-weight: bolder;
	border-color: #AAAAAA;
	color: #EEEEEE;
	background-color: #777777;
	vertical-align: middle;
	border-radius: 10px;
	text-shadow: 2px 2px 5px black;
	box-shadow: 4px 4px #444444;
	
}
.cell1, .cell2, .cell3
{
	border-radius: 10px;
	border: 3px;
	border-style: solid;
	margin: 10px;
	font-size: 30px;
	width: 90%;
	height: 90%;
	max-width: 90%;
	max-height: 90%;
	min-width: 90%;
	min-height: 90%;
	display: inline-block;
	padding: 10px;
	word-wrap: break-word;
}
.cell1
{
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	color: #888888;
	font-weight: bold;
	text-shadow: 2px 2px 5px black;	
	background-color: #444444;
	box-shadow: 4px 4px #222222;
	border-color: #777777;
}
.cell2
{
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	background-color: #444444;
	vertical-align: middle;	
	box-shadow: 4px 4px #222222;
	border-color: #777777;
	
}
.cell3
{
	background-color: #444444;
	box-shadow: 4px 4px #222222;
	border-color: #777777;
	transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	color: #888888;
	font-weight: bold;
	text-shadow: 2px 2px 5px black;		
}
.cell1:hover, .cell2:hover, .cell3:hover
{
	color: #CCCCCC;
	background-color: #777777;
	box-shadow: 4px 4px #363636;
	border-color: #AAAAAA;	
}
img:hover
{
	border-color: #CCCCCC;
}
.cell2:hover img
{
	border-color: #CCCCCC;
}
.cell3:active
{
	background-color: #AAAAAA;
	box-shadow: 4px 4px #555555;
	border-color: #DDDDDD;
	color: #FFFFFF;
}

.current
{
	border-bottom: 2px solid #AAAAAA;	
    display: block;
    background-color: #CCCCCC;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 2px 2px 5px black;	
}

img
{
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	border: 3px solid;
	border-radius: 10px;
	border-color: #666666;
	margin-left: auto;
    margin-right: auto;
}
a:link, a:visited, a:hover, a:active
{
    text-decoration: none;
	color: black;
}

ul 
{
	transition-duration: 0.6s;
	transition-timing-function: ease-in-out;
    margin: 0;
    padding: 0;
	width: 200px;
	border: 2px solid #888888;
	position: fixed;
	bottom: -156;
	right: 2;
	z-index: 10000;
}

ul:hover
{
	transition-duration: 0.6s;
	bottom: -4;
}

ul:active
{
	transition-duration: 1.1s;
	bottom: -4;
}

li 
{
	border-bottom: 2px solid;	
    display: block;
    background-color: #444444;
    padding: 8px 16px;
	color: #888888;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 2px 2px 5px black;	
	text-align: center;
}

li:hover
{
    background-color: #888888;
    color: white;
	border-color: #888888;
}
li:active
{
	background-color: #CCCCCC;
    color: white;
}


.current:hover
{
	border-bottom: 2px solid #CCCCCC;	
    display: block;
    background-color: #CCCCCC;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 2px 2px 5px black;	
}

.img_1_1, .img_1_2, .img_2_1, .img_2_2, .img_3_1, .img_3_2
{
	box-shadow: 4px 4px #222222;
	margin: 30px;
	position: absolute;	
}

.img_1_1:hover, .img_1_2:hover, .img_2_1:hover, .img_2_2:hover, .img_3_1:hover, .img_3_2:hover
{
	box-shadow: 4px 4px #444444;
}

.img_1_1
{
	left: 0;
	top: 0;
}
.img_1_2
{
	right: 0;
	top: 232;
}
.img_2_1
{
	left: 0;
	top: 0;
}
.img_2_2
{
	right: 0;
	top: 397;
}
.img_3_1
{
	right: 0;
	top: 0;
}
.img_3_2
{
	top:221;
	left: 0;
}
.text_1_1, .text_1_2, .text_1_3, .text_2_1, .text_2_2, .text_2_3, .text_3_1, .text_3_2, .text_3_3
{	
	position: absolute;
	height: 182px;
	border: 3px solid;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 2px 2px 5px black;
	padding: 10px;
	border-radius: 10px;
	margin: 30px;
	max-height: 182px;
	overflow: hidden;
	text-align: justify;
    text-justify: inter-word;	
	
	color: #888888;
	background-color: #444444;
	box-shadow: 4px 4px #222222;
	border-color: #777777;
}
.text_1_1:hover, .text_1_2:hover, .text_1_3:hover, .text_2_1:hover, .text_2_2:hover, .text_2_3:hover, .text_3_1:hover, .text_3_2:hover, .text_3_3:hover
{
	height: auto;
	transition-duration: 0.5s;
	max-height: 100000px;
	cursor: grab;
	color: #CCCCCC;
	background-color: #777777;
	box-shadow: 4px 4px #363636;
	border-color: #AAAAAA;	
}
.text_1_1:hover, .text_1_2:hover, .text_1_3:hover, .text_2_2:hover
{
	min-height: 182px;
}
.text_2_1:hover
{
	min-height: 115px;
}
.text_2_3:hover
{
	min-height: 191px;
}
.text_3_1:hover
{
	min-height: 168px;
}
.text_3_2:hover, .text_3_3:hover
{
	min-height: 130px;
}

.text_1_1
{
	z-index: 3;
	left: 393;	
}
.text_1_2
{
	z-index: 2;
	top: 232;
	right: 268;
}
.text_1_3
{
	z-index: 1;
	top: 464;
	right: 268;
}
.text_1_3_invisible
{
	position:absolute;
	height: 182px;
	border: 3px solid;
	font-weight: bold;
	font-size: 20px;
	padding: 10px;
	border-radius: 10px;
	margin: 30px;
	max-height: 182px;
	text-align: justify;
    text-justify: inter-word;
	top: 464;
	right: 268;
	visibility: hidden;
	margin-bottom: 100px;
}

.text_2_1
{
	z-index: 3;
	left: 505;
	height: 115px;
	max-height: 115px;
}
.text_2_2
{
	z-index: 2;
	left: 505;
	top: 165;
}
.text_2_3
{
	height: 190px;
	max-height: 190px;
	z-index: 1;
	right: 350;
	top: 397;
}
.text_2_3_invisible
{
	position:absolute;
	height: 182px;
	border: 3px solid;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 2px 2px 5px black;
	padding: 10px;
	border-radius: 10px;
	margin: 30px;
	max-height: 182px;
	text-align: justify;
    text-justify: inter-word;
	right: 350;
	top: 397;
	visibility: hidden;
	margin-bottom: 100px;
}
.text_3_1
{
	z-index: 3;
	right: 330;
	height: 168px;
	max-height: 168px;
	top: 0;
}
.text_3_2
{
	z-index: 2;
	top: 221;
	left: 617;
	height: 130px;
	max-height: 130px;
}
.text_3_3
{
	z-index: 1;
	top: 401;
	left: 617;
	height: 130px;
	max-height: 130px;
}
.text_3_3_invisible
{
	position:absolute;
	height: 130px;
	border: 3px solid;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 2px 2px 5px black;
	padding: 10px;
	border-radius: 10px;
	margin: 30px;
	max-height: 130px;
	text-align: justify;
    text-justify: inter-word;
	top: 401;
	left: 617;
	visibility: hidden;
	margin-bottom: 100px;
}