/* CSS Document */
/* 	--------------------------------
	Product: 	North Coast Merchandising Games
	File: 		default.css 
	Version: 	2.0
	Date: 		April 2013
	Developer: 	Ricoshae Pty Ltd
				Chris Richter
	--------------------------------
*/

/* CSS Background */
body {
	background-image: url(../sizing/images/bkgd-1_seamless.png);
	background-repeat: repeat;
	background-position: center center;
	/* [disabled]min-height: 100%; */
	font-family: Arial;
	text-align: center;
	margin: 0px;
	min-height:33em;
	min-width:40em;
	/* [disabled]width: 100%; */
	/* [disabled]height: 100%; */
	/* [disabled]padding: 8px; */
}
.wrap
{
	margin: 0 auto;
	text-align: center;
	/* [disabled]position: absolute; */
	/* [disabled]left: 10px; */
	top: 10px;
	/* [disabled]right: 10px; */
	max-width: 70em;
	
	/* [disabled]bottom: 10px; */
	/* [disabled]height: 80em; */
}
/* fix max width */
/* content for iPad */
.content {


	/* [disabled]position: absolute; */
	/* [disabled]top: 50px; */
	left: auto;
	right: auto;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

h1
{
	font-family: "FFF_Tusj", "FFF_TusjIE";
    font-size: 2.5em;
    color: #666;
	margin-top:0px;
	margin-bottom:5px;
}
h2
{
	font-family: "georgia", "georgiaIE";
	color: #CF7058;
	font-size: 1.4em;
	font-weight: bold;
	margin: 0;
    padding-top: 10px;
}

.activity
{
}

/* panel */
.panel
{
	display: block;
	position: relative;
}
/* pointer display for dragging objects */
.pointer
{
	cursor:pointer;
}
/* other box for main screen */
.mainbox
{
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #FFF;
	border: 1px solid #999;
	right: 20px;
	left: 10px;
	bottom: 110px;
	right: 10px;
	text-align: left;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	margin-top: 14px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	/* [disabled]height: 502px; */
	top: 10px;
	min-height:36em;
	
}
/* highlight */
.highlight
{
	border: 1px solid rgb(0,153,0);
}
/* highlight drop colour */
.highlightdrop
{
    background-color : #090;
}

/* bottom menu */
.bottommenu
{
	width: 100%;
	margin-right: 10px;
	padding-right: 10px;
	text-align: center;
}

/* user instructions box */
.instructions
{
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #EFEFEF;
	padding: 10px;
	border: 1px none #999;
	text-align: center;
	color: #666666;
}
/* msgbox for interactive instructions */
.msgbox .info
{
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #EFEFEF;
	padding: 10px;
	border: 1px none #999;
	text-align: center;
	width: 100%;
	height: 100%;
	color: #666666;
	font-size: 0.7em;
}
/* msg box outer */
.msgbox
{
	width: 190px;
	height: 100px;
	float: right;
	text-align: center;
	vertical-align: middle;
	padding-right:20px;
}
.msgboxmini
{
	width: 190px;
	height: 60px;
	float: right;
	text-align: center;
	vertical-align: middle;
	padding-right:20px;
}
.msgboxmini .info
{
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #EFEFEF;
	padding: 10px;
	border: 1px none #999;
	text-align: center;
	width: 100%;
	height: 100%;
	color: #666666;
	font-size: 0.7em;
}
/* align content left */
.left
{
	text-align: left;
}
/* force image to float right */
.imgright
{
	text-align: left;
	padding: 20px;
	float: right;
}

/* licence font size */
.licence
{
	font-size: 0.6em;
	color:rgb(102,102,102);
}
/* alternate licence  */
.bottomlicence
{
	/* [disabled]position: absolute; */
	/* [disabled]bottom: 4px; */
	/* [disabled]width: 1014px; */
	/* [disabled]padding-right: 20px; */
	/* [disabled]text-align: center; */
}
/* centre content */
.w124
{
	width: 124px;	
}
.w154
{
	width: 154px;	
}
.h60
{
	height: 60px;	
}
.h124
{
	height: 124px;
}
.h155
{
	height: 155px;
}
.h205
{
	height: 205px;
}
.w200
{
	width: 150px;
}
.centre
{
	margin: 0 auto;
	text-align: center;
}
.center
{
	margin: 0 auto;
	text-align: center;
}
/* BOXES */
/* rounded box for content */
.box {
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #FFF;
	margin: 10px;
	border: 1px solid #999;
	right: 20px;
	left: 10px;
	bottom: 20px;
	right: 10px;
	text-align: left;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
.popupbox {
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #CAFFC4;
	border: 1px solid #999;
	top: 0px;
	right: 20px;
	left: 20px;
	display: none;
	text-align: center;
}

/* start buttons */
#btn_previous {
	bottom: 60px;
	float: left;
	padding-left: 60px;
	cursor: pointer;
}
#btn_next {
	cursor: pointer;
	bottom: 60px;
	float: right;
	padding-right: 60px;
}
#btn_home {
	cursor: pointer;
	/* [disabled]margin-left: auto; */
	/* [disabled]margin-right: auto; */
	/* [disabled]margin-top: -100px; */
	/* [disabled]position: absolute; */
	/* [disabled]left: auto; */
	/* [disabled]right: auto; */
	bottom: 10px;
}
#btn_enter {
	cursor: pointer;
	bottom: 60px;
	/* [disabled]float: right; */
}
/* end buttons */

/* position small logo */
#img_logo_sm {
	bottom: 60px;
}

/* main headings */
.mh1
{
   
}
.activity
{
	font-family: "FFF_Tusj", "FFF_TusjIE";
	font-size: 2.5em;
	color: rgb(77,147,140);
}
.ch1 {
    font-family: "georgia", "georgiaIE";
	color: #CF7058;
	font-size: 3em;
}


/* custom activity 1 css */
#act1 li img {
	cursor: pointer;
}
#act1 li span {
	position: absolute;
	margin-left: -1.3em;
}
/* activity reorder css styles */
.reorderlist
{
	list-style-type: none;
}
.reorderlist li
{
	float: left;
	font-size: 1.4em;
	/* [disabled]height: 154px; */
	width: 138px;
	margin-top: 0;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
}
.reorderlist li img {
	cursor: pointer;
}
.reorderlist li span {
	position: absolute;
	/* [disabled]margin-left: -1.3em; */
}
.reorderlist2
{
	list-style-type: none;
}
.reorderlist2 li
{
	float: left;
	font-size: 1.4em;
	/* [disabled]height: 154px; */
	/* [disabled]width: 138px; */
	margin-top: 0;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
}
.reorderlist2 li img {
	cursor: pointer;
}
.reorderlist2 li span {
	position: absolute;
	/* [disabled]margin-left: -1.3em; */
}
.reorderlist9
{
	list-style-type: none;
}
.reorderlist9 li
{
	float: left;
	font-size: 1.4em;
	/* [disabled]height: 154px; */
	margin-top: 0;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
}
.reorderlist9 li img {
	cursor: pointer;
}
.reorderlist9 li span {
	position: absolute;
	/* [disabled]margin-left: -1.3em; */
}
#act1 {
	list-style-type: none;
}
#act1 li {
	float: left;
	font-size: 1.4em;
	height: 154px;
	width: 138px;
	margin-top: 0;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
}

/* activity 7 css */
#act7 li img {
	cursor: pointer;
}
#act7 li span {
	position: absolute;
	margin-left: -1.3em;
}
#act7 {
	list-style-type: none;
	padding: 0;
	/* [disabled]display:inline-block; */
	/* [disabled]padding-top: 0; */
	/* [disabled]padding-right: 0; */
	/* [disabled]padding-bottom: 0; */
	/* [disabled]padding-left: 0; */
	width: 100%;
	/* [disabled]float: left; */
}
#act7 li {
	float: left;
	font-size: 1.4em;
	width: 150px;
	margin-top: 0;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
}
/* centre content of div */
.centre {
	text-align: center;
}

/* --------------- */
/* general css */
table {
	/* [disabled]width: 100%; */
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
td {
	/* [disabled]text-align: center; */
}
img {
	max-width: 100%;
	max-height: 100%;
	/* [disabled]-ms-interpolation-mode: bicubic; */
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.imgbox {
	width: 100%;
	/* [disabled]height:100%; */
}
.redbox
{
	width: 420px;
	border: 2px solid rgb(255,0,0);
	padding: 6px;
}

.dropbox
{
	height: 138px;
	border: 1px dashed #999;
}
#title
{
	float: left;
	font-size: .7em;
	color: #C00;
	padding-left: 20px;
}
#slideid
{
	float: right;
	font-size: .7em;
	color: #666;
	padding-right: 20px;
}
/* ------------- */
/* fonts */
@font-face{
font-family: FFF_Tusj;
src: url('../font/fff_tusj.ttf');
}

@font-face{
font-family: FFF_TusjIE;
src: url('../font/fff_tusj.eot');
}

@font-face{
font-family: georgia;
src: url('../font/georgia.ttf');
}

@font-face{
font-family: georgiaIE;
src: url('../font/georgia.eot');
}


.ph-act1
{
}


.colour-act6
{
	height:300px;  padding-left:70px; background-image:url(../colour/images/act6_rack.png); background-repeat:no-repeat;
}


.colour-act7
{
	height:300px; padding-left:70px; background-image:url(../colour/images/act7_rack.png); background-repeat:no-repeat;
}
.colour-act8
{
	height:300px; background-image:url(../colour/images/merch_05_rack.png); background-repeat:no-repeat;
}
.colour-act9
{
	height:300px; background-image:url(../colour/images/merch_06_rack.png); background-repeat:no-repeat;
}
.planograms-cell
{
	width: 300px;	
}
.planograms-act1
{
	display: inline-table;
}
.planograms-act2
{
	display: inline-table;
}
.sizing-act8
{
	height: 300px;
	background-image: url(../sizing/images/rack_8.png);
	background-repeat: no-repeat;
}
.sizing-act9
{
	height:300px; background-image:url(../sizing/images/act9_rack.png); background-repeat:no-repeat;
}

#spinbox
{
	height: 250px;	
}

.colourwheel-green
{
	position: absolute; left: 49px; top: 179px; width: 128px; height: 96px;
}

.colourwheel-blue
{
	position: absolute; left: 94px; top: 216px; width: 128px; height: 96px;
}

.colourwheel-purple
{
	position: absolute; left: 141px; top: 222px; width: 128px; height: 96px;
}

.colourwheel-red
{
	position: absolute; left: 174px; top: 177px; width: 128px; height: 96px;
}

.colourwheel-orange
{
	position: absolute; left: 143px; top: 136px; width: 128px; height: 96px;
}
.colourwheel-yellow
{
	position: absolute; left: 82px; top: 127px; width: 128px; height: 96px;
}

a:hover {
    text-decoration: none;
}

.a
{
	background-image: url(../images/a.fw.png);
	background-repeat: no-repeat;
	background-position: center -10px;
	width: 40px;
	height: 40px;
	z-index: 1;
	top: 1px;
	overflow: visible;
}
#btn_previous:hover
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgb(102,102,102);
}
#btn_next:hover
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgb(102,102,102);
}
#homeimg:hover
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgb(102,102,102);
}
#btn_enter:hover
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgb(102,102,102);
}