@charset "utf-8";
/* CSS Document */

        @media (min-width: 769px) {
            .ui-page.complete {
                width: 950px !important;
                margin: 0 auto !important;
                position: relative !important;
            }
            .ui-page {
                width: 100% !important;
                margin: 0 auto !important;
                position: relative !important;
            }
			
			.max700 {
				width: 700px !important;
				margin: 0 auto !important;
                position: relative !important;
			}

			.max720 {
				width: 720px !important;
				margin: 0 auto !important;
                position: relative !important;
				padding:20px !important;
			}

			.max950 {
				width: 950px !important;
				margin: 0 auto !important;
                position: relative !important;
			}
			
			.top50 {
				margin-top:50px !important;
			}
			
			.left250 {
				margin-left:250px;
			}
			
			.float-left {
				float:left;
			}
			
			.show-mobile {
				display:none;
			}
	
			.ui-input-text {
				width: 550px !important;
				margin:0.5em auto;
			}
        }
		

 /* smartphones */
@media (max-width: 768px) { 
.mobile-padding { padding:1em !important; }
.show-desktop { display:none; } 
.top50 { margin-top:50px !important; }
.mobile-img { display:block !important; float:none !important; max-width:70% !important; margin:0 auto !important; }
.mobile-no-float { float:none !important; }
div.subtitle { padding:5px !important;	font-size:1em !important; }
} 

.no-padding {
	padding:0 !important;
}

hr {
	border:1px solid #ddd;
}

.center {
	text-align:center;
}
.logo {
	position:absolute;
	max-width:180px;
	top:0;
	right:20px;
}

.header-line {
	max-height:50px;
	padding:5px;
	left:0;
	width:100%;
}

.header-grey-line {
	background:none repeat scroll 0 0 #ebebeb;
    background: -webkit-linear-gradient(#ebebeb, #ebebeb); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#ebebeb, #ebebeb); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#ebebeb, #ebebeb); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#ebebeb, #ebebeb); /* Standard syntax */
	max-height:50px;
	padding:5px;
	position:absolute;
	left:0;
	width:100%;
}

div.progress {
	position:relative;
}
progress {
   width:100%;
   height:2em;
   margin:10px 0;
   border:1px solid #e6e6e6;
   background:#e6e6e6;
}	
	
.progresslabel {
    font-family: "Arial";
    position:absolute;
	top:18%;
    left:43%;
    font-size:medium;
	color:#ffffff;
	text-shadow: 0px 1px #ccc;
}

h1.title {
	font-family:'Open Sans Condensed', sans-serif;
	font-weight:normal !important;
	color:#777;
	font-size:3em;
	margin:0;
	padding:0;
	line-height:0 !important;
}

div.subtitle {
	padding:10px;
	font-size:1.5em;
}

div.title-done {
	font-family:'Open Sans Condensed', sans-serif;
	font-weight:normal !important;
	color:#000;
	font-size:5em;
}

.padding-top50 {
	padding-top:50px !important;
}
.padding-bottom50 {
	padding-bottom:50px !important;
}

div.subtitle-done {
	font-family:'Open Sans Condensed', sans-serif;
	font-weight:normal !important;
	color:#000;
	font-size:3em;
}

h2 {
	font-family:'Open Sans Condensed', sans-serif;
	font-weight:normal !important;
	color:#777;
	font-size:2em;
}
.bullets {
	margin:10px auto;
	max-width:500px;
}
.bullets.aff-custom {
	margin:10px auto;
	max-width:650px;
}
.bullets > ul {
	padding:0;
	margin:0;
	float:left;
	margin-right:30px;
	margin-left:20px;
}
ul.list {
	padding-left:20px;
}
ul.list li {
	margin-bottom:10px;
}
ul.blist {
	list-style-type: none;
}
ul.blist li {
	background:url('http://theworkoutquiz.com/images/list-style-image.png') no-repeat 0 0;;
	margin-bottom:7px;
	padding-left:35px;
}
.highlight {
	background:#FFFF42;
	padding:1px 2px;
}
.white {
	background:#FFFFFF !important;
}
.text-red {
	color:#dd1817;
}
.text-grey {
	color:#777;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 20px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
}
.error{
color: #D8000C;
background-color: #FFBABA;
}
.validation{
color: #D63301;
background-color: #FFCCBA;
} 

blockquote {
  background: #f9f9f9;
  color:#555;
  border-left: 10px solid #ccc;
  margin: 1.5em 0;
  padding: 0.9em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: "\201C";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  
}
blockquote p {
  display: inline;
}
blockquote p.author {
  display:block;
  color:#999;
  text-align:right;
}

.terms {
	float:left;
	margin:5px;
	color:#c0c0c0; !important;
	font-size:0.9em !important;
	font-weight:normal !important;
}
.terms a {
	color:#c0c0c0; !important;
	font-size:0.9em !important;
	font-weight:normal !important;
}
.terms a:visited {
    color:#c0c0c0; !important;
}

.footer {
    color: #969696;
    font-size: 0.9em !important;
    font-weight: normal !important;
    margin: 5px;
    text-align: center;
}
.footer a {
    color: #969696;
    font-size: 0.9em !important;
    font-weight: normal !important;
}
.footer a:visited {
    color: #969696;
}

label.ui-radio-on {
	background:#bde2ff !important;
}
label.ui-btn {
	border:none !important;
	font-weight:normal !important;
}
a.ui-btn.start, div.done, .ui-input-btn.ui-icon-check {
	background:#0064b4 !important;
	color:#FFFFFF !important;
	text-shadow:none !important;
	border:none !important;
}

a.ui-btn.learn {
	background:#F93 !important;
	color:#333 !important;
	text-shadow:none !important;
	font-size:26px !important;
}

.ui-footer {
    border-width: 1px 0 0 0 !important;
	background:none !important;
}

/* Moving on to the styling, we'll start with the main progress bar first and then the value part of it. After that, we'll do some experiments :D */
progress {
	display: block;
	/* Important Thing */
	-webkit-appearance: none;
	border: none;
}

/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
    border:1px solid #e6e6e6;
    background:#e6e6e6;
}

/* Now the value part */
progress::-webkit-progress-value {
	background: #0064b4;	
}


/*Custom Responsive Blocks*/
/* Basic styles */
.rwd-example .ui-body {
    text-align: left;
    border-color: #ddd;
}
.rwd-example p {
    color: #777;
    line-height: 140%
}
/* Stack all blocks to start */
.rwd-example .ui-block-a,
.rwd-example .ui-block-b,
.rwd-example .ui-block-c {
    width: 100%;
    float: none;
}
/* Collapsing borders */
.rwd-example > div + div .ui-body {
    border-top-width: 0;
}
/* 1st breakpoint - Float B and C, leave A full width on top */
@media all and (min-width: 42em) {
    .rwd-example {
        overflow: hidden; /* Use this or a "clearfix" to give the container height */
    }
    .rwd-example .ui-body {
       min-height: 1em;
    }
    .rwd-example .ui-block-b,
    .rwd-example .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .rwd-example .ui-block-d {
      float: left;
      width: 65.95%;
    }
    .rwd-example .ui-block-e {
      float: left;
      width: 32.95%;
    }
    .rwd-example .ui-block-b p,
    .rwd-example .ui-block-c p {
      font-size: .8em;
    }
    .rwd-example > div + div .ui-body {
        border-top-width: 1px;
    }
    .rwd-example > div:first-child .ui-body {
        border-bottom-width: 0;
    }
    .rwd-example > div:last-child .ui-body {
        border-left-width: 0;
    }
}
/* 2nd breakpoint - Float all, 50/25/25 */
@media all and (min-width: 55em) {
    .rwd-example .ui-body {
       min-height: 1em;
    }
    .rwd-example .ui-block-a,
    .rwd-example .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .rwd-example .ui-block-b,
    .rwd-example .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .rwd-example .ui-block-d {
      float: left;
      width: 65.95%;
    }
    .rwd-example .ui-block-e {
      float: left;
      width: 32.95%;
    }

    .rwd-example > div:first-child .ui-body {
        border-bottom-width: 1px;
    }
    .rwd-example > div + div .ui-body {
        border-left-width: 0;
    }
}
/* 3rd breakpoint - Bump up font size at very wide screens */
@media all and (min-width: 75em) {
    .rwd-example .ui-body {
      font-size: 105%;
    }
    .rwd-example .ui-block-a,
    .rwd-example .ui-block-b {
      float: left;
      width: 49.95%;
    }
    .rwd-example .ui-block-c {
      float: left;
      width: 49.95%;
    }

    .rwd-example .ui-block-d {
      float: left;
      width: 65.95%;
    }
    .rwd-example .ui-block-e {
      float: left;
      width: 32.95%;
    }


}