/*
	File: style.css
	Purpose: to style Household Management System
	Author: David Whimpey
	Date Created: 14/07/2014
	Last updated: 15/07/2014
*/

body{
	font-family: Arial, Garamond, sans-serif;
	background-color: #180773;
	min-width:1028px;
	max-width:1028px;
	margin: 0 auto;
}

footer{
	margin-top: 1%;
	width: 100%;
	font-size: 80%;
	display: inline-block;
}

header{
	width: 100%;
	clear: both;
	float: left;
}

#container{
	position: relative;
	background-color: #6A94D4;
}

h1{
	color: #052F6D;
}

p{
	padding: 0%;
	margin: 1%;
}

img{
	margin: 0px;
	padding: 0px;
}

hr{
	margin: 0%;
	padding:0px;
}

table{
	position: relative;
	width:62%;
	margin: 0%;
	float:left;
}

td{
	width: 105px;
	height: 105px;
	margin:0px;
	padding:0px;
	background-position: 5px 5px;
	background-size: 90px 90px;
    background-repeat: no-repeat;
}

.cuecard{
	position: absolute;
	top:0px;
	left:0px;
	width: 60px;
	height: 60px;
	padding: 0px;
	margin: 0px;
	z-index:2;
}

.expand, .contract, .menu, .closeMenu, .plus, .minus{
	position: absolute;
	right:0%;
	background-color: #CCCCCC;
	color: #666666;
	border: thin solid #666666;
	margin: 0px;
	padding: 1px 1px 1px 1px;
	width: 10px;
	line-height: 80%;
	height: 12px;
	border-radius:3px;
}

.menu:hover, .expand:hover, .contract:hover, .plus:hover, .minus:hover{
	border: thin solid yellow;
}

.closeMenu:hover{
	border: 2px solid #BE0B0B;
}

.expand, .closeMenu{
	top: 0%;
}

.plus{
	background-color: #4373D5;	
	bottom: -16px;
	border: thin solid #2A4580;	
	border-radius: 0px;	
}

.minus{
	background-color: #4373D5;	
	bottom: -16px;
	left: 0px;
	border: thin solid #2A4580;		
	border-radius: 0px;
}

.closeMenu{
	width:20px;
	height:20px;
	border: 2px solid #666666;	
}

.menu{
	top: 1%;
}

.score{
	position: absolute;
	width: 30px;
	height: 12px;
	background-color: #4373D5;
	bottom: -16px;
	left:14px;
	margin: 0px;
	padding: 1px 1px 1px 1px;
	border-bottom: thin solid #2A4580;
	border-top: thin solid #2A4580;
	line-height: 90%;
	color:#2A4580;
	font-size: 75%;
	z-index:0;
}

#displayInstructions{
	right:1%;
}

#settings{
	right:3%;
}

#mainMenu{
	right:5%;
}
	
.contract{
	bottom: 0%;
	line-height: 50%;
}

.menu{
	top: 1%;
	right: 1%;
	color: blue;
	height: 16px;
	width:12px;
	text-align:center;
}

#p1zone, #p2zone{
	position: relative;
	background-color: #FFA100;
	width: 13%;
	height: 30px;
	margin: 0% 1.5% 0% 1.5%;
	padding: 1%;
	border: 2px solid #006561;
	border-radius: 5px;
	float:left;
	clear:none;
}

#p1zone{
	border: 2px solid #A66E00;
}
	
#p2zone{
	background-color: #00A383;
}

#p1, #p2{
	color: #2A4580;
	font-variant: small-caps;
	font-weight: bold;
	margin-bottom: 10px;
}

#p1{
	background-color: yellow;
	border-radius: 3px;
}

#ccBank{
	position: relative;
	width: 39%;
	padding: 2.5% 11% 1% 10%;
	margin: 1% 19% 1% 19%;
	background-color: #2A4580;
	border: thin solid #06276F;
	border-radius: 5px;
	text-align: center;	
}

#ccBankHeading{
	position: absolute;
	top: 1%;
	left: 40%;
	margin:0%;
	padding: 0%;
	color: #CCCCCC;
	font-variant: small-caps;
	font-size: 90%;
}

#cuecardsection{
	position: relative;
	padding: 1.5% 1% 1% 0%;
	width: 59%;
	margin: 1% 19% 1% 19%;
	border: thin solid #052F6D;
	border-radius: 5px;
	background-color: #4373D5;
	display: inline-block;
	text-align: center;
}

.dropzone, .cardBank{
	position: relative;
	width: 60px;
	height: 60px;
	margin: 4px 4px 0px 4px;
	padding:0px;
	background-image: url('images/dropZoneBkgrd.jpg');
	background-color: lightBlue;
	border-radius:5px;
	display: inline-block;
}

.center{
	text-align: center;
}

.matchedTile{
	width: 60px;
	height: 60px;
	border: thin solid black;
	margin: 0px 1px 0px 1px;
	padding:0px;
}

.displayMenu{
	position: absolute;
	left:0;
	top:0;
	margin: 10% 14% 10% 14%;
	padding: 3%;
	width: 70%;
	background-color: #5ED1BA;
	border: thin solid #006A55;
	border-radius: 5px;
	z-index: 11;
}

.filter{
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	background-color:#EEEEEE;
	opacity: 0.3;
	width:100%;
	height:100%;
}

.setting:hover, .setting1:hover{
	border: thin solid yellow;
}

.setting{
	border: thin solid #5ED1BA;
	margin-bottom: 2%;
}

.setting1{
	border: thin solid #5ED1BA;
	margin: 4% 2% 2% 0%;
}

#scoringOn, #levelBeginner, #settingsOk{
	margin-left:2%;
}

#settingsOk{
	margin-left:4%;
}

#rubbishBin{
	position: absolute;
	width: 60px;
	height: 60px;
	bottom: 14px;
	right: 25px;
}

.not{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:3;
	width:60px;
	height:60px;
}

.whatLike, .howDoing{
	position: absolute;
	top: -15px;
	left: 5px;
	z-index:1;
	width:60px;
	height:60px;
}