/*********************************/
 /*  styling the coloured squares */
 /*********************************/
 .mainMenu div{
	display: inline-block;
	
	margin: 0 2%;
 }

 .mainMenu a{
	color: #000;
 }
 
 
 .greenSquare div{
	width: 14px;
	height: 14px;
	
	background: #93c200;
 }
 
 .yellowSquare div{
	width: 14px;
	height: 14px;
	
	background: #f8cf03;
 }
 
 .orangeSquare div{
	width: 14px;
	height: 14px;
	
	background: #e06e0d;
 }
 
 .pinkSquare div{
	width: 14px;
	height: 14px;
	
	background: #c61654;
 }
 
 .dkblueSquare div{
	width: 14px;
	height: 14px;
	
	background: #0563a3;
 }
 
 .ltblueSquare div{
	width: 14px;
	height: 14px;
	
	background: #27b7da;
 }
 
 
 
 /**************************
 /**  Main Navigation
 **************************/
.mainContent nav{
	display: inline-block;
	float: left;
	padding: 0;
	width: 25%;
}

.mainMenu{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.mainMenu li > a:link, .mainMenu li > a:visited{
	display: inline-block;
	width: 80%;
	padding: 4% 10%;
	color: #000;
	
	background: #fff;
	
	-moz-transition: background 0.15s;
	-webkit-transition: background 0.15s;
	-o-transition: background 0.15s;
	transition: background 0.15s;
}

/* Hover effects */

/* green */
.mainMenu  li > .greenSquare:hover, .mainMenu li > .greenSquare:active, .mainMenu > li:hover > .greenSquare{
	background: #93c200;
}

.mainMenu li > .greenSquare:hover div, .mainMenu > li:hover .greenSquare div{
	background: #5c7a00;; 
}

/* yellow */
.mainMenu  li > .yellowSquare:hover, .mainMenu li > .yellowSquare:active{
	background: #f8cf03;
}

.mainMenu li > .yellowSquare:hover div{
	background: #e89f03;; 
}

/* orange */
.mainMenu  li > .orangeSquare:hover, .mainMenu li > .orangeSquare:active, .mainMenu > li:hover > .orangeSquare{
	background: #e06e0d;
}

.mainMenu li > .orangeSquare:hover div, .mainMenu > li:hover .orangeSquare div{
	background: #b3580a;; 
}

/* pink */
.mainMenu  li > .pinkSquare:hover, .mainMenu li > .pinkSquare:active, .mainMenu > li:hover > .pinkSquare{
	background: #c61654;
}

.mainMenu li > .pinkSquare:hover div, .mainMenu > li:hover .pinkSquare div{
	background: #93103f;; 
}

/* dkblue */
.mainMenu  li > .dkblueSquare:hover, .mainMenu li > .dkblueSquare:active{
	background: #0563a3;
}

.mainMenu li > .dkblueSquare:hover div{
	background: #03416c;; 
}

/* ltblue */
.mainMenu  li > .ltblueSquare:hover, .mainMenu li > .ltblueSquare:active{
	background: #27b7da;
}

.mainMenu li > .ltblueSquare:hover div{
	background: #1a7991;; 
}



.mainMenu li:hover{
	position: relative;
}

.mainMenu li:hover > ul{
	display: block;
}


 /**************************
 /**  Subnavigation
 **************************/
 .subMenu{
	display: none;
	list-style: none;
	margin: 0px;
	padding: 0px;
	
	position: absolute;
	top: 0px;
	left: 100%;
 }

 .subMenu li > a:link, .subMenu li > a:visited{
	display: inline-block;
	min-width: 200px;
	padding: 10px 20px;
	color: #000;
	background: #ddd;
	-moz-transition: background 0.15s;
	-webkit-transition: background 0.15s;
	-o-transition: background 0.15s;
	transition: background 0.15s;
 }
 
 .subMenu  li > a:hover, .subMenu li > a:active{
	background: #FFF;
	color: #000;
}