﻿/* *****************  Navigation   *****************  */
div.leftside {
	position : fixed;
	margin-top: -3em;
	top : 1em;
	left : 1%;
	width : 15em;
	z-index : 1;
	padding : 0em;
/*	border: 1px solid #0000ff;		*/
}
/* ***** Start nav menu ******** */
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-corner-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.

With modifications!!!!  jde

=================================================================== */
.menuHolder {
	width: 100px;
	height: 100px;
	margin: 50px 0 250px 10px;
	position: relative;
	z-index: 100;
}
.menuHolder ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
}
.menuHolder ul li {
	border-radius: 0 0 300px 0;
	width: 0;
	height: 0;
}
.menuHolder ul li a {
	color: #000;
	text-decoration: none;
	font: bold 13px/30px arial, sans-serif;
	text-align: center;
	box-shadow: -5px 5px 5px rgba(0,0,0,0.4);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}
.menuHolder ul.p1 li {
	position: absolute;
	left: 0;
	top: 0;
}
.menuHolder ul.p2 {
	z-index: -1;
}
.menuHolder ul.p3 {
	z-index: -1;
}
.menuHolder li.s1 > a {
	position: absolute;
	display: block;
	width: 100px;
	height: 100px;
	background: #c8c8c8;
	border-radius: 0 0 100px 0;
}
.menuHolder li.s2 > a {
	position: absolute;
	display: block;
	width: 100px;
	padding-left: 100px;
	height: 200px;
	background: #ddd;
	border-radius: 0 0 200px 0;
}
.menuHolder ul.p3 li a {
	position: absolute;
	display: block;
	width: 100px;
	padding-left: 200px;
	height: 300px;
	background: #999;
	border-radius: 0 0 300px 0;
}
.menuHolder ul ul {
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotateZ(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
}
.menuHolder li.s2:nth-of-type(8) > a {background:#666;
-webkit-transform:rotate(77deg);
-moz-transform:rotateZ(77deg);
-ms-transform:rotate(77deg);
-o-transform:rotate(77deg);
transform:rotate(77deg);
}
.menuHolder li.s2:nth-of-type(7) > a {background:#777;
-webkit-transform:rotate(66deg);
-moz-transform:rotateZ(66deg);
-ms-transform:rotate(66deg);
-o-transform:rotate(66deg);
transform:rotate(66deg);
}
.menuHolder li.s2:nth-of-type(6) > a {background:#888;
-webkit-transform:rotate(55deg);
-moz-transform:rotateZ(55deg);
-ms-transform:rotate(55deg);
-o-transform:rotate(55deg);
transform:rotate(55deg);
}
.menuHolder li.s2:nth-of-type(5) > a {background:#999;
-webkit-transform:rotate(44deg);
-moz-transform:rotateZ(44deg);
-ms-transform:rotate(44deg);
-o-transform:rotate(44deg);
transform:rotate(44deg);
}
.menuHolder li.s2:nth-of-type(4) > a {background:#aaa;
-webkit-transform:rotate(33deg);
-moz-transform:rotateZ(33deg);
-ms-transform:rotate(33deg);
-o-transform:rotate(33deg);
transform:rotate(33deg);
}
.menuHolder li.s2:nth-of-type(3) > a {background:#bbb;
-webkit-transform:rotate(22deg);
-moz-transform:rotateZ(22deg);
-ms-transform:rotate(22deg);
-o-transform:rotate(22deg);
transform:rotate(22deg);
}
.menuHolder li.s2:nth-of-type(2) > a {background:#ccc;
-webkit-transform:rotate(11deg);
-moz-transform:rotateZ(11deg);
-ms-transform:rotate(11deg);
-o-transform:rotate(11deg);
transform:rotate(11deg);
}


.menuHolder .a11 li:nth-of-type(11) > a {background:#333;
-webkit-transform:rotate(80deg);
-moz-transform:rotateZ(80deg);
-ms-transform:rotate(80deg);
-o-transform:rotate(80deg);
transform:rotate(80deg);
}
.menuHolder .a11 li:nth-of-type(10) > a {background:#444;
-webkit-transform:rotate(72deg);
-moz-transform:rotateZ(72deg);
-ms-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
.menuHolder .a11 li:nth-of-type(9) > a {background:#555;
-webkit-transform:rotate(64deg);
-moz-transform:rotateZ(64deg);
-ms-transform:rotate(64deg);
-o-transform:rotate(64deg);
transform:rotate(64deg);
}
.menuHolder .a11 li:nth-of-type(8) > a {background:#666;
-webkit-transform:rotate(56deg);
-moz-transform:rotateZ(56deg);
-ms-transform:rotate(56deg);
-o-transform:rotate(56deg);
transform:rotate(56deg);
}
.menuHolder .a11 li:nth-of-type(7) > a {background:#777;
-webkit-transform:rotate(48deg);
-moz-transform:rotateZ(48deg);
-ms-transform:rotate(48deg);
-o-transform:rotate(48deg);
transform:rotate(48deg);
}
.menuHolder .a11 li:nth-of-type(6) > a {background:#888;
-webkit-transform:rotate(40deg);
-moz-transform:rotateZ(40deg);
-ms-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
}
.menuHolder .a11 li:nth-of-type(5) > a {background:#999;
-webkit-transform:rotate(32deg);
-moz-transform:rotateZ(32deg);
-ms-transform:rotate(32deg);
-o-transform:rotate(32deg);
transform:rotate(32deg);
}
.menuHolder .a11 li:nth-of-type(4) > a {background:#aaa;
-webkit-transform:rotate(24deg);
-moz-transform:rotateZ(24deg);
-ms-transform:rotate(24deg);
-o-transform:rotate(24deg);
transform:rotate(24deg);
}
.menuHolder .a11 li:nth-of-type(3) > a {background:#bbb;
-webkit-transform:rotate(16deg);
-moz-transform:rotateZ(16deg);
-ms-transform:rotate(16deg);
-o-transform:rotate(16deg);
transform:rotate(16deg);
}
.menuHolder .a11 li:nth-of-type(2) > a {background:#ccc;
-webkit-transform:rotate(8deg);
-moz-transform:rotateZ(8deg);
-ms-transform:rotate(8deg);
-o-transform:rotate(8deg);
transform:rotate(deg);
}






.menuHolder .a6 li:nth-of-type(6) > a {background:#444;
-webkit-transform:rotate(75deg);
-moz-transform:rotateZ(75deg);
-ms-transform:rotate(75deg);
-o-transform:rotate(75deg);
transform:rotate(75deg);
}
.menuHolder .a6 li:nth-of-type(5) > a {background:#555;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a6 li:nth-of-type(4) > a {background:#666;
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder .a6 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder .a6 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(15deg);
-moz-transform:rotateZ(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
transform:rotate(15deg);
}
.menuHolder .a5 li:nth-of-type(5) > a {background:#555;
-webkit-transform:rotate(72deg);
-moz-transform:rotateZ(72deg);
-ms-transform:rotate(72deg);
-o-transform:rotate(72deg);
transform:rotate(72deg);
}
.menuHolder .a5 li:nth-of-type(4) > a {background:#666;
-webkit-transform:rotate(54deg);
-moz-transform:rotateZ(54deg);
-ms-transform:rotate(54deg);
-o-transform:rotate(54deg);
transform:rotate(54deg);
}
.menuHolder .a5 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(36deg);
-moz-transform:rotateZ(36deg);
-ms-transform:rotate(36deg);
-o-transform:rotate(36deg);
transform:rotate(36deg);
}
.menuHolder .a5 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(18deg);
-moz-transform:rotateZ(18deg);
-ms-transform:rotate(18deg);
-o-transform:rotate(18deg);
transform:rotate(18deg);
}


.menuHolder .a4 li:nth-of-type(4) > a {background:#666;
-webkit-transform:rotate(67deg);
-moz-transform:rotateZ(67deg);
-ms-transform:rotate(67deg);
-o-transform:rotate(67deg);
transform:rotate(67deg);
}
.menuHolder .a4 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(45deg);
-moz-transform:rotateZ(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.menuHolder .a4 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(22deg);
-moz-transform:rotateZ(22deg);
-ms-transform:rotate(22deg);
-o-transform:rotate(22deg);
transform:rotate(22deg);
}


.menuHolder .a3 li:nth-of-type(3) > a {background:#777;
-webkit-transform:rotate(60deg);
-moz-transform:rotateZ(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.menuHolder .a3 li:nth-of-type(2) > a {background:#888;
-webkit-transform:rotate(30deg);
-moz-transform:rotateZ(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
.menuHolder li.s1:hover ul.p2 {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotateZ(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.menuHolder li.s2:hover ul.p3 {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotateZ(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.menuHolder ul li:hover > a {
	background: #c00;
	color: #fff;
}
.menuHolder li.s2:hover > a {
	background: #c00;
	color: #fff;
}
.menuHolder .a6 li:hover > a {
	background: #c00;
	color: #fff;
}
.menuHolder .a5 li:hover > a {
	background: #c00;
	color: #fff;
}
.menuHolder .a4 li:hover > a {
	background: #c00;
	color: #fff;
}
.menuHolder .a11 li:hover > a {
	background: #c00;
	color: #fff;
}
.menuHolder .a3 li:hover > a {
	background: #c00;
	color: #fff;
}
.menuWindow {
	width: 110px;
	height: 110px;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
	-webkit-transition: 0s 1s;
	-moz-transition: 0s 1s;
	-ms-transition: 0s 1s;
	-o-transition: 0s 1s;
	transition: 0s 1s;
}
.menuHolder:hover .menuWindow {
	width: 310px;
	height: 310px;
	-webkit-transition: 0s 0s;
	-moz-transition: 0s 0s;
	-ms-transition: 0s 0s;
	-o-transition: 0s 0s;
	transition: 0s 0s;
}
.menuHolder span {
	display: block;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotateZ(5deg);
	-ms-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	transform: rotate(5deg);
}
.menuHolder ~ img.close {width:0; height:0; position:fixed; z-index:-1; left:0; top:0;}
.menuHolder:hover ~ img.close {width:100%; height:100%;}
/*  End nav menu  */
