/* 
Project Name: Blank Template
Client: Your Client
Author: Dave Morison
Developer: Dave
*/


/******************************************
/* SETUP                   
/*******************************************/

/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

.alignright {
	float: right; 
	padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
	float: left; 
	padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

img {
     max-width: 100%;
}

/******************************************
/* BASE STYLES                   
/*******************************************/

body {
     background-image: url('images/bg-chapter.gif');
     color: #525252;
     font-size: 12pt;
     line-height: 1.6;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

@font-face {
    font-family: 'EngraversGothicBTRegular';
    src: url('images/engrgotn-webfont.eot');
    src: url('images/engrgotn-webfont.eot?#iefix') format('embedded-opentype'),
         url('images/engrgotn-webfont.woff') format('woff'),
         url('images/engrgotn-webfont.ttf') format('truetype'),
         url('images/engrgotn-webfont.svg#EngraversGothicBTRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
     font-family: EngraversGothicBTRegular;
     font-size: 54px;
     color: #29a1d8;
     text-align: center;
     text-transform: uppercase;
}

h2 {
     font-family: EngraversGothicBTRegular;
     font-size: 34px;
     color: #10466e;
     text-align: center;
     text-transform: uppercase;
     margin-bottom: 0px;
}

h3 {
     margin-top: 0px;
}

/******************************************
/* HEADER                   
/*******************************************/

header {

}

/******************************************
/* ADDITIONAL STYLES                   
/*******************************************/

#scalegenerator {
     width: 70%;
     /*background-color: #29a1d8;*/
     /*color: #000;*/
     padding: 20px;
     margin: 20px auto;
     border:1px solid #ffffff;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     -moz-box-shadow: 1px 1px 4px #888888;
     -webkit-box-shadow: 1px 1px 4px #888888;
     box-shadow: 1px 1px 4px #888888;
     /* For IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555')";
     /* For IE 5.5 - 7 */
     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#555555');
     background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#dadada));
     background: -moz-linear-gradient(top,  #f7f7f7,  #dadada);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#dadada');
}

#innergenerator {
     width: 80%;
     margin: 0px auto;
}

#howtouse {
     width: 100%;
     padding: 20px;
     background: #fff;
     margin-bottom: 15px;
}

form {
     width: 55%;
     margin: 0px auto;
}

table {
     width: 100%;
     background: #fff;
     border-collapse: collapse;
     margin: 15px 0px;
}

tr {
     border-top: 1px dotted #ccc;
}

tr:first-child {
     border-top: none;
}

td {
     padding: 10px;
}

tr td:first-child {
     width: 120px;
}

#scoring {
     display: none;
}

#rating {
     width: 181px;
     margin: 6px auto;
}

#scoring #rating a {
     width: 30px;
     float: left;
     display: block;
     padding: 5px;
     margin: 3px;
     color: #fff;
     background-color: #29a1d8;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
}

#scoring #rating a:hover {
     color: #29a1d8;
     background-color: #fff;
}

.active {
     color: #29a1d8 !important;
     background-color: #fff !important;
}

#scoring a {
     width: 200px;
     display: block;
     margin: 6px auto;
     color: #fff;
     background-color: #29a1d8;
     padding: 6px;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
}

#scoring a:hover {
     color: #29a1d8;
     background-color: #fff;
}

#submitGrade {
     float: left;
     width: 150px;
     display: inline-block;
     margin-left: 8px;
     color: #fff;
     background-color: #29a1d8;
     padding: 6px;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
     border: none;
}

#submitGrade:hover {
     color: #29a1d8;
     background-color: #fff;
     border: none;
}

#tryagain {
     width: 200px;
     display: none;
     margin: 6px auto;
     color: #fff;
     background-color: #29a1d8;
     padding: 6px;
     text-decoration: none;
     font-weight: bold;
     text-align: center;
}

#tryagain:hover {
     color: #29a1d8;
     background-color: #fff;
}

#endresults {
     width: 100%;
     height: 100%;
     display: none;
     position: absolute;
     /*top: 686px;*/
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.7);
     z-index: 1;
}

#results_inner {
     width: 50%;
     padding: 12px;
     background-color: #fff;
     border: 1px solid #ddd;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
     margin: 30px auto;
}

/******************************************
/* FOOTER                   
/*******************************************/

footer {

}