/*  Body & header styles */
body{
/* Set an easy to read font */
font-family: helvetica, arial, sans-serif;
font-size: 11pt;
}

h1{
font-family: "comic sans";
font-size: 18pt;
font-weight: bold;
text-align: center;
padding-top: 10px;
padding-bottom: 5px;
/* Include this below risk insanity */
margin-top: 0px;
}

h2{
font-family: "comic sans";
font-size: 14pt;
font-weight: normal;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
/* End of body & header styles */

/* Without specific instructions the default paragraph settings will be used and these are not ideal */
p{
margin-top: 5px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 0px;
/* Text properties for any general paragraph are editable here */
font: Arial, sans-serif;
font-size: 12pt;
}

p.bold{
font-weight: bold;
}

p.italic{
font-style:italic
}

p.underline{
text-decoration: underline;
}
/* End of paragraph section */

/* Link Styles */ 
a:link{
color: blue;
text-decoration: none;
/* Fixes the unsightly borders; pink box showed it the worst */
border: none;
}

a:visited {
color:red;
text-decoration: none;
/* Fixes the unsightly borders; pink box showed it the worst */
border: none;
}
/* End of Link Styles */

#container{
top: 0px;
left: 0px;
height: 150px;
width: 100%;
position: absolute;
background-color: #fff;
}

/* + */
#widget {
height: 150px;
width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
/* Rounded is good */
border-radius:25px;
-moz-border-radius:25px; /* Firefox */
}

/* ++ */
#lft_btn{
height: 150px;
width: 100px;
float: left;
background-color: #ccc; /* Edit this colour; same as main */
/* Rounded is good */
-moz-border-radius: 18px 0 0 18px; /* Firefox */
border-radius:18px 0 0 18px;

}

a.lft_btn{
display: block;
height: 140px;
width: 95px;
background-color: #ececec; /* Edit this one for lft button */ 
background-image: url(../images/back.png);
margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 18px 0 0 18px; /* Firefox */
border-radius:18px 0 0 18px;
}

a.lft_btn:hover{
background-color: #fff;
margin-top: 5px;
margin-bottom: 5px;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 18px 0 0 18px; /* Firefox */
border-radius:18px 0 0 18px;
}

#main{
height: 150px;
width: 650px;
float: left; 
background-color: #ccc; /* Change backgound colour here */
}

#character{
height: 150px;
width: 150px;
float: left; 
background-color: #ccc; /* Change backgound colour here */
background-image: url(../images/char.png);
background-repeat: no-repeat;

}

#rgt_btn{
height: 150px;
width: 100px;
float: left;
background-color: #ccc; /* Edit this colour; same as main */
/* Rounded is good */
-moz-border-radius: 0 18px 18px 0; /* Firefox */
border-radius: 0 18px 18px 0;
}

a.rgt_btn{
display: block;
height: 140px;
width: 95px;
background-color: #ececec; /* Edit this one for rgt button */ 
background-image: url(../images/next.png);
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 0 18px 18px 0; /* Firefox */
border-radius: 0 18px 18px 0;
}

a.rgt_btn:hover{
background-color: #fff;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 0 18px 18px 0; /* Firefox */
border-radius: 0 18px 18px 0;
}

/*Alternative for open resource mode */
#rgt_btn_openresource{
height: 150px;
width: 100px;
float: left;
background-color: #ccc; /* Edit this colour; same as main */
/* Rounded is good */
-moz-border-radius: 0 18px 18px 0; /* Firefox */
border-radius: 0 18px 18px 0;
}

a.rgt_btn_openresource{
display: block;
height: 140px;
width: 95px;
background-color: #ececec; /* Edit this one for rgt button */ 
background-image: url(../images/map_icon.png);
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 0 18px 18px 0; /* Firefox */
border-radius: 0 18px 18px 0;
}

a.rgt_btn_openresource:hover{
background-color: #fff;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 0 18px 18px 0; /* Firefox */
border-radius: 0 18px 18px 0;
}

/* +++ */
#default_theme{
display: block;
height: 20px;
width: 95px;
float: left; 
text-align: center;
/* colour choices */
background-color: #ccc;
/* Creates seperation around these elements */
margin-left: 10px;
margin-right: 10px;
/* This code rounds the bottom left and right corners */
-moz-border-radius: 0 0 5px 5px; /* Firefox */
border-radius: 0 0 5px 5px;
}

a.default_theme{
display: block;
height: 20px;
width: 95px;
color: black;
}

#pink_theme{
height: 20px;
width: 90px;
float: left; 
text-align: center;
/* colour choices */
background-color: #ecc7f0;
margin-right: 10px;
/* This code rounds the bottom left and right corners */
-moz-border-radius: 0 0 5px 5px; /* Firefox */
border-radius: 0 0 5px 5px;
}

a.pink_theme{
display: block;
height: 20px;
width: 90px;
color: #fff;
}

#blue_theme{
height: 20px;
width: 90px;
float: left;
text-align: center;
/* colour choices */
background-color: #0066cb;
margin-right: 10px;
/* This code rounds the bottom left and right corners */
-moz-border-radius: 0 0 5px 5px; /* Firefox */
border-radius: 0 0 5px 5px;
}

a.blue_theme{
display: block;
height: 20px;
width: 90px;
color: black;
}

#high_contrast_theme{
height: 20px;
width: 135px;
float: left;
color: yellow;
text-align: center;
/* colour choices */
background-color: #000;
margin-right: 10px;
/* This code rounds the bottom left and right corners */
-moz-border-radius: 0 0 5px 5px; /* Firefox */
border-radius: 0 0 5px 5px;
}

a.high_contrast_theme{
display: block;
height: 20px;
width: 135px;
color: yellow;
}

/* Place after high div id="high_contrast_theme" */
/* Start of improvements based final cycle */
#home_button{
height: 20px;
width: 60px;
float: left;
text-align: right;
padding-right: 5px;
margin-right: 10px;
/* This code rounds the bottom left and right corners */
-moz-border-radius: 0 0 3px 3px; /* Firefox */
border-radius: 0 0 3px 3px;
}

a.home_button{
display: block;
height: 20px;
width: 60px;
padding-right: 5px;
/* New image added */
background-image: url(../images/home_icon.jpg);
background-repeat: no-repeat;
/* New style */
color: #000;
background-color: #fff;
}

a.home_button:hover{
color: #fff;
background-color: #000;
}

#glossary_button{
height: 20px;
width: 80px;
float: left;
color: black;
text-align: right;
padding-right: 5px;
/* This code rounds the bottom left and right corners */
-moz-border-radius: 0 0 3px 3px; /* Firefox */
border-radius: 0 0 3px 3px;
}
/* End of improvements based on final cycle */

a.glossary_button{
display: block;
height: 20px;
width: 80px;
padding-right: 5px;
/* New style */
color: #000;
background-color: #fff;
}

a.glossary_button:hover{
color: #fff;
background-color: #000;
}
/* End of improvements */

#instructions{
height: 74px;
width: 624px;
float: left;
/* Border declaration based upon the new designs */
border: solid 3px #fff;
background-color: #fff;
/* Margins to provide adequate seperation of content as instructions appears on a new line */
margin-left: 10px;
margin-top: 10px;
/* Rounded is good */
-moz-border-radius:8px; /* Firefox */
border-radius:8px;
}

#instruction_btn{
height: 30px;
width: 310px;
float: left;
margin-left: 10px;
margin-top: 10px;
/* Rounded is good */
-moz-border-radius: 3px 3px 0 0; /* Firefox */
border-radius: 3px 3px 0 0;
}

a.instruction_btn{
display: block;
height: 30px;
width: 310px;
color: #fff;
background-color: #999; /* <-- Edit here */ 
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
 /* Firefox */
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;

}

a.instruction_btn:hover{
background-color: #fff;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 3px 3px 0 0; /* Firefox */
border-radius: 3px 3px 0 0;
}

#hints{
height: 30px;
width: 310px;
float: left;
margin-left: 10px;
margin-top: 10px;
/* Rounded is good */
-moz-border-radius: 3px 3px 0 0; /* Firefox */
border-radius: 3px 3px 0 0;
}

a.hints_btn{
display: block;
height: 30px;
width: 310px;
color: #fff;
background-color: #999; /* <-- Edit here */ 
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 3px 3px 0 0; /* Firefox */
border-radius: 3px 3px 0 0;
}

a.hints_btn:hover{
color: #000;
background-color: #fff;
/** Text properties **/
font-size: 12pt;
text-align: center;
/* Rounded is good */
-moz-border-radius: 3px 3px 0 0; /* Firefox */
border-radius: 3px 3px 0 0;
}

/* Start of special paragraph settings for popup text */ 
p.popup{
margin-top: 5px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 0px;
/* Text properties for any general paragraph are editable here */
font: Arial, sans-serif;
font-size: 12pt;
}

p.popup_bold{
margin-top: 5px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 0px;
/* Text properties for any general paragraph are editable here */
font: Arial, sans-serif;
font-size: 12pt;
font-weight: bold;
}
/* End of special paragraph settings for popup text */ 

/** Below lies the CCS that controls the hints popups **/
/** Some divisions have to be renamed to prevent design issues due same div id been replicated **/
/* + */
#instruction_popup_container{
top: 0px;
left: 0px;
height: 500px;
width: 500px;
position: absolute;
background-color: #ccc; /* primary background colour */
/* Rounded is good */
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}

/* ++ */ 
#instruction_popup_title{
height: 44px;
width: 494px;
position: relative;
background-color: #999; /* Instructions/hints colour */
margin: 3px;
/* Rounded is good */
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}

#instruction_popup_instructions{
height: 444px;
width: 494px;
position: relative;
background-color: #ececec; /* Same as next and back */
margin-left: 3px;
margin-right: 3px;
margin-bottom: 6px;
/* Rounded is good */
-moz-border-radius: 25px 25px 25px 25px;
border-radius:25px 25px 25px 25px;
}

/** Below lies the CCS that controls the hints popup **/
/** Some divisions have to be renamed to prevent design issues due same div id been replicated **/
/* + */
#hints_popup_container{
top: 0px;
left: 0px;
height: 590px;
width: 650px;
position: absolute;
background-color: #ccc; /* primary background colour */
/* Rounded is good */
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}

/* ++ */ 
#hints_popup_title{
height: 44px;
width: 644px;
position: relative;
background-color: #999; /* Instructions/hints colour */
margin: 3px;
/* Rounded is good */
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}

#hints_popup_literal_hint{
height: 100px;
width: 644px;
position: relative;
background-color: #ececec; /* Same as next and back */
margin-left: 3px;
margin-right: 3px;
/* Rounded is good */
-moz-border-radius: 25px 25px 0 0;
border-radius:25px 25px 0 0;
}

#hints_popup_video{
height: 430px;
/* Height boosted +10px to ensure the video fits neatly. */
width: 644px;
position: relative;
text-align: center;
background-color: #ececec; /* Same as next and back */
margin-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
/* Rounded is good */
-moz-border-radius: 0 0 25px 25px;
border-radius: 0 0 25px 25px;
}