/*------------------------------------*\
	GUTS4LIFE
	SYMPTOM CHECKER
	
	By Simon Wiffen
	NORTHERN CONTRAST LTD
	
	http://www.northerncontrast.com
\*------------------------------------*/




/*------------------------------------*\
	TOOL AREA
\*------------------------------------*/
.tool{
	background:#fbfdff;
	color:#616161;
	margin-bottom:20px;
	margin-right:4px;
	padding:15px;
	position:relative;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.15);
	box-shadow:3px 3px 3px rgba(0, 0, 0, 0.15);
}





/*------------------------------------*\
	PROGRESS INDICATOR
\*------------------------------------*/
.tool ol.progress{
	list-style:none;
	margin:0 0 30px 0;
	left:0;
	font-family: 'SketchBlockBold';
	font-size:1.07em;
	font-weight:normal;
	color:#c4c3c4;
	display:table;
	width:100%;
}
.tool ol.progress li{
	display:table-cell;
	vertical-align:middle;
	background-color:#9f9c9c;	
	background-image:url(../img/icons/progress01.png);
	background-repeat:no-repeat;
	background-position:right center;
}
.tool ol.progress li span{
	display:block;
	padding:10px 30px;
	background-image:url(../img/icons/progress02.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.tool ol.progress li:first-of-type{
	-moz-border-radius:5px 0px 0px 5px;
	-webkit-border-radius:5px 0px 0px 5px;
	border-radius:5px 0px 0px 5px;
}
.tool ol.progress li:first-of-type span{
	background-image:none;
}
.tool ol.progress li:last-of-type{
	background-image:none;
	
	-moz-border-radius:0px 3px 3px 0px;
	-webkit-border-radius:0px 3px 3px 0px;
	border-radius:0px 3px 3px 0px;
}
.tool ol.progress li.inactive{
	background-color:#cecece;
	color:#f5f7f8;
}
.tool ol.progress li.current{
	background-color:#f07517;
	color:#f9e2d1;
}
.tool ol.progress li.complete{
	background-color:#9f9c9c;
	color:#c4c3c4;
}





/*------------------------------------*\
	HIDE/SHOW STEPS
\*------------------------------------*/
.tool .step02,
.tool .step03,
.tool .step04,
.tool .step05,
.tool .exit,
.tool .result,
.tool .dialog{
	display:none;
}
/* Temporarily show all steps */
/*.tool .step02,
.tool .step03,
.tool .step04,
.tool .step05,
.tool .exit,
.tool .result{
	display:block;
}*/




/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/
.tool h2{
	font-size:1.47em;
	font-weight:bold;
	padding-bottom:13px;
	background:url("../img/title-fadeline.png") bottom left no-repeat;
	margin-bottom:20px;
}
.tool .result-unlikely .note{
	font-size:0.8em;
}
.tool .result-similar .note{
	font-size:0.8em;
}
.tool .intro{
	color:#31688e;
}





/*------------------------------------*\
	COLS
\*------------------------------------*/
.tool-cols{
	overflow:hidden;
	margin-left:-3%;
}
.tool-cols .tool-col{
	width:47%;
	float:left;
	margin-left:3%;
}





/*------------------------------------*\
	FORM ELEMENTS
\*------------------------------------*/
.tool .form-item{
	border-bottom:1px dashed #d4cdd4;
	margin-bottom:20px;
}
.tool form-item label,
.tool fieldset legend{
	font-size:1.07em;
	color:#34678a;
	padding-bottom:15px;
}
.tool .form-item .note{
	font-size:0.8em;
	color:#616161;
	margin:10px 0 20px 0;
}
.tool .check-item legend{
	margin-bottom:25px;
}
.tool .check-item label{
	font-size:1em;
	color:#616161;
}





/*------------------------------------*\
	FORM VALIDATION
\*------------------------------------*/
.validation{
	color:#f07517;
	border-top:1px solid #f07517;
	border-bottom:1px solid #f07517;
	padding:10px 0;
	font-size:0.8em;
	font-weight:bold;
	line-height:1em;
	text-transform:uppercase;
	display:none;
}



/*------------------------------------*\
	BUTTONS
\*------------------------------------*/
.tool .buttons{
	text-align:right;
}
.tool a.button{
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight:normal;
	font-size:0.95em;
	text-transform:uppercase;
	display:inline-block;
	background-color:#4aa39c;
	background-position:left center;
	background-repeat:no-repeat;
	padding:10px 0 10px 15px;
	color:#cbebea;
	
	background:-moz-linear-gradient(top,  #4aa39c 0%, #43948e 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4aa39c), color-stop(100%,#43948e)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #4aa39c 0%,#43948e 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #4aa39c 0%,#43948e 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #4aa39c 0%,#43948e 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #4aa39c 0%,#43948e 100%); /* W3C */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.tool a.button span{
	display:block;
	background:url(../img/icons/next-arrow.png) right center no-repeat;
	margin-right:15px;
	padding-right:17px;
}
.tool a.button:hover,
.tool a.button:focus{
	color:#fff;
}
.tool a.btn-back{
	margin-right:10px;
	background-color:#e5e3e3;
	color:#868b8b;
	
	background:-moz-linear-gradient(top,  #e5e3e3 0%, #d0cfcf 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e3e3), color-stop(100%,#d0cfcf)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #e5e3e3 0%,#d0cfcf 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #e5e3e3 0%,#d0cfcf 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #e5e3e3 0%,#d0cfcf 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #e5e3e3 0%,#d0cfcf 100%); /* W3C */
}
.tool a.btn-back span{
	background:url(../img/icons/back-arrow.png) left center no-repeat;
	padding-left:17px;
	margin-right:0;
}
.tool a.btn-back:hover,
.tool a.btn-back:focus{
	color:#555;
}
.tool a.btn-close span{
	background:url(../img/icons/close.png) right center no-repeat;
	padding-right:20px;
}






/*------------------------------------*\
	ILLUSTRATIONS
\*------------------------------------*/
.tool .image{
	background-repeat:no-repeat;
	background-position:0px 0px;
}
.tool .step01 .image{
	width:240px;
	height:390px;
	background-image:url(../img/step01.png);
}
.tool .step02 .image{
	width:244px;
	height:301px;
	background-image:url(../img/step02-male.png);
	position:relative;
}
.tool .step02 .image .upper{
	position:absolute;
	top:156px;
	left:67px;
	width:115px;
	height:73px;
	cursor:pointer;
}
.tool .step02 .image .lower{
	position:absolute;
	top:229px;
	left:67px;
	width:115px;
	height:40px;
	cursor:pointer;
}

/* Selection styles */
.tool .step02 .upper-selected{
	background-position:-244px 0px;
}
.tool .step02 .lower-selected{
	background-position:-488px 0px;
}

/* Rollover styles */
.tool .step02 .upper{
	background-position:-244px 0px;
}
.tool .step02 .lower{
	background-position:-488px 0px;
}

.tool .step02 .img-female{
	width:244px;
	height:301px;
	background-image:url(../img/step02-female.png);
}
.tool .step04 .image{
	width:255px;
	height:342px;
	background-image:url(../img/step04-male.png);
}
.tool .step04 .img-female{
	width:255px;
	height:342px;
	background-image:url(../img/step04-female.png);
}
.tool .result-seek-attention .image{
	width:219px;
	height:219px;
	background-image:url(../img/result-seek-attention.png);
	margin:40px auto 30px auto;
}
.tool .exit .image{
	width:229px;
	height:229px;
	background-image:url(../img/result-healthcare-professional.png);
	margin:40px auto 30px auto;
}





/*------------------------------------*\
	STYLE SELECTS
\*------------------------------------*/
section.main .tool div.fixedWidth{
	width:250px;
}
section.main .tool div.selector span{
	width:240px;
}





/*------------------------------------*\
	OVERRIDE MAIN CHECK ITEM STYLES
\*------------------------------------*/
:root .tool input[type="radio"] + label:before,
:root .tool input[type="checkbox"] + label:before{
	display:block;
	position:absolute;
	top:0;
	left:0;
}
.tool .check-item label{
	display:block;
	position:relative;
	padding-left:30px;
}
:root .tool .step05 input[type="checkbox"] + label:before{
	top:10px;
}




/*------------------------------------*\
	SPECIFIC STEP STYLES
\*------------------------------------*/

/* Step 1 */
.tool #step01-age,
.tool #uniform-step01-age{
	margin-bottom:20px;
}
.tool .step01 .form-item .step01-age-message{
	margin-top:-10px;
	display:none;
}

/* Step 3 */
.step03 .form-item .check-item{
	width:30%;
	float:left;
	margin-left:3%;
	clear:none;
	position:relative;
}
/* Force break every 3 items (starting with the 4th item) */
.step03 .form-item .check-item:nth-child(3n+4){
	clear:both;
}
.step03 .form-item .check-item input{
	display:none;
}
.step03 .form-item .check-item label{
	display:block;
	text-align:center;
	font-size:0.93em;
	font-weight:bold;
	text-transform:uppercase;
	padding-top:110px;
	padding-left:0;
	cursor:pointer;
	position:relative;
	z-index:10;
}
:root .step03 input[type="checkbox"] + label:before{
	display:none;
}

/* Icons */
.step03 .form-item .check-item .icon{
	width:100px;
	height:100px;
	background-image:url(../img/step03.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	position:absolute;
	z-index:0;
	top:0;
	left:50%;
	margin-left:-50px;
}
.step03 .form-item .selected .icon{
	background-position:-100px 0px;
}
.step03 .form-item .crampy .icon{
	background-position:0px -100px;
}
.step03 .form-item .crampy.selected .icon{
	background-position:-100px -100px;
}
.step03 .form-item .dull .icon{
	background-position:0px -200px;
}
.step03 .form-item .dull.selected .icon{
	background-position:-100px -200px;
}
.step03 .form-item .gnawing .icon{
	background-position:0px -300px;
}
.step03 .form-item .gnawing.selected .icon{
	background-position:-100px -300px;
}
.step03 .form-item .intense .icon{
	background-position:0px -400px;
}
.step03 .form-item .intense.selected .icon{
	background-position:-100px -400px;
}
.step03 .form-item .sharp .icon{
	background-position:0px -500px;
}
.step03 .form-item .sharp.selected .icon{
	background-position:-100px -500px;
}

/* Step 5 */
.tool .step05 .form-item{
	border-bottom:none;
}
.step05 .form-item .check-item label{
	display:block;
	margin:0;
	padding:10px 10px 10px 30px;
	cursor:pointer;
}
.step05 .form-item .check-item{
	border-top:1px dashed #d5ced5;
	margin-bottom:0;	
}
.step05 .form-item .selected{	
	background:#fbd6b9;
	
	background:-moz-linear-gradient(top,  #fbd6b9 0%, #eac7ac 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbd6b9), color-stop(100%,#eac7ac)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #fbd6b9 0%,#eac7ac 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #fbd6b9 0%,#eac7ac 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #fbd6b9 0%,#eac7ac 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #fbd6b9 0%,#eac7ac 100%); /* W3C */
}
.step05 .form-item .note{
	border-top:1px dashed #d5ced5;
	padding:10px;
	margin:0;
}

/* Exit pages */
.tool h3{
	font-size:1.47em;
	font-weight:bold;
	color:#2b2741;
	text-transform:uppercase;
	margin-bottom:20px;
}

/* Result pages */
.tool .result-unlikely h3,
.tool .result-similar h3{
	font-size:1.35em;
	font-weight:normal;
	text-transform:none;
}
.tool .result-similar h4{
	font-size:1.33em;
	font-weight:bold;
	color:#f0771b;
	margin-bottom:20px;
	padding-left:110px;
}
.tool .result-unlikely ol{
	list-style:none;
	margin-left:0;
	left:0;
	border-top:1px dashed #d4cdd4;
}
.tool .result-similar ol{
	list-style:none;
	margin-left:110px;
	left:0;
}
.tool .result-unlikely ol li{
	font-size:1.33em;
	margin-bottom:15px;
	padding:20px 0 20px 110px;
	border-bottom:1px dashed #d4cdd4;
	position:relative;
}
.tool .result-similar ol li{
	font-size:1.33em;
	margin-bottom:15px;
	padding:15px 0;
	border-bottom:1px dashed #d4cdd4;
	position:relative;
}
.tool .result-unlikely ol li .icon,
.tool .result-similar ol li .icon{
	display:block;
	width:100px;
	height:95px;
	position:absolute;
	top:-15px;
	left:-110px;
}
.tool .result-unlikely ol li .icon{
	top:15px;
	left:0;
}
.tool .result-similar li.call .icon{
	background:url(../img/similar-call.png) top center no-repeat;	
}
.tool .result-unlikely li.download .icon,
.tool .result-similar li.download .icon{
	background:url(../img/similar-download.png) top center no-repeat;
}
.tool .result-similar li.learn-more .icon{
	background:url(../img/similar-learn-more.png) top center no-repeat;
	padding-bottom:0;
	border-bottom:none;
}
.tool .result-similar ol li span{
	display:block;
	margin-top:20px;
	font-size:0.8em;
}
.tool .result-similar ol li ul{
	list-style:none;
	margin-top:15px;
	left:0;
}
.tool .result-similar ol li ul li{
	font-size:0.8em;
	padding:0;
	border-bottom:none;
}

/* Survey */
.tool .survey{
	background:#f4f4f4;
	padding:15px;
	margin-top:30px;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:inset 0 0 10px 5px rgba(0,0,0,.1);
	-webkit-box-shadow:inset 0 0 10px 5px rgba(0,0,0,.1);
	box-shadow:inset 0 0 10px 5px rgba(0,0,0,.1);
}
.tool .survey h2,
.tool .survey h3{
	font-size:1.2em;
	color:#616161;
	padding-bottom:13px;
	background:url("../img/title-fadeline.png") bottom left no-repeat;
	margin-bottom:20px;
}
.tool .survey p{
	margin-bottom:20px;
}
.tool .survey .form-item{
	border-bottom:none;
	border-top:1px dashed #d4cdd4;
	padding-top:20px;
	margin-top:20px;
}
.tool .survey .form-item label{
	color:#616161;
	font-weight:bold;
}
.tool .exit-survey .survey h2{
	font-size:1.47em;
	color:#21939b;
}





/*------------------------------------*\
	CONFIRMATION DIALOG
\*------------------------------------*/
.tool .dialog{	
	position:absolute;
	z-index:50;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	background:rgba(0,0,0,0.5);
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.tool .dialog-box{
	width:50%;
	margin:100px auto;
	background:#fff;
	padding:15px;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.tool .dialog-box p{
	margin-bottom:20px;
}
.tool .dialog-box p.exit-link{
	margin:0;
	text-align:right;
}





/*------------------------------------------------------------*\
	RESPONSIVE LAYOUTS
\*------------------------------------------------------------*/
@media screen and (min-width: 811px){

/* Hover states  and inheritance  causes issues on 
tablet/mobile so we serve these only to large screen sizes */
.step03 .form-item .check-item:hover .icon,
.step03 .form-item .check-item:focus .icon,
.step03 .form-item .selected .icon{
	background-position:-100px 0px;
}
.step03 .form-item .crampy .icon{
	background-position:0px -100px;
}
.step03 .form-item .crampy:hover .icon,
.step03 .form-item .crampy:focus .icon,
.step03 .form-item .crampy.selected .icon{
	background-position:-100px -100px;
}
.step03 .form-item .dull .icon{
	background-position:0px -200px;
}
.step03 .form-item .dull:hover .icon,
.step03 .form-item .dull:focus .icon,
.step03 .form-item .dull.selected .icon{
	background-position:-100px -200px;
}
.step03 .form-item .gnawing .icon{
	background-position:0px -300px;
}
.step03 .form-item .gnawing:hover .icon,
.step03 .form-item .gnawing:focus .icon,
.step03 .form-item .gnawing.selected .icon{
	background-position:-100px -300px;
}
.step03 .form-item .intense .icon{
	background-position:0px -400px;
}
.step03 .form-item .intense:hover .icon,
.step03 .form-item .intense:focus .icon,
.step03 .form-item .intense.selected .icon{
	background-position:-100px -400px;
}
.step03 .form-item .sharp .icon{
	background-position:0px -500px;
}
.step03 .form-item .sharp:hover .icon,
.step03 .form-item .sharp:focus .icon,
.step03 .form-item .sharp.selected .icon{
	background-position:-100px -500px;
}

.step05 .form-item .check-item:hover,
.step05 .form-item .check-item:focus,
.step05 .form-item .selected{	
	background:#fbd6b9;
	
	background:-moz-linear-gradient(top,  #fbd6b9 0%, #eac7ac 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbd6b9), color-stop(100%,#eac7ac)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #fbd6b9 0%,#eac7ac 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #fbd6b9 0%,#eac7ac 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #fbd6b9 0%,#eac7ac 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #fbd6b9 0%,#eac7ac 100%); /* W3C */
}

}


@media screen and (max-width: 810px){

/* Resize selects */
section.main .tool div.fixedWidth{
	width:230px!important;
}
section.main .tool div.selector span{
	width:220px!important;
}


}



@media screen and (max-width: 480px){

/* Resize progress indicators */
.tool ol.progress{
	font-size:0.83em;
}
.tool ol.progress li span{
	padding:10px 15px 10px 18px;
}

/* Linearise columns */
.tool-cols{
	margin-left:0;
}
.tool-cols .tool-col{
	width:100%;
	float:none;
	margin:0 0 20px 0;
}
.tool .image{
	margin:0 auto;
}

/* Tweak symptoms to 2 column grid */
.step03 .form-item .check-item{
	width:45%!important;
}
/* Clear previous force beraks */
.step03 .form-item .check-item:nth-child(3n+4){
	clear:none;
}
/* Force break every 2 items (starting with the 3rd item) */
.step03 .form-item .check-item:nth-child(2n+3){
	clear:both;
}

/* Tweak similar symptoms screen */
.tool .result-similar ol{
	margin-left:0;
	left:0;
}
.tool .result-similar h4{
	padding-left:0;
}
.tool .result-unlikely ol li .icon,
.tool .result-similar ol li .icon{
	display:none;
}
.tool .result-unlikely ol li{
	padding-left:0;
}
.tool .result-similar ol li ul{
	left:0;
}


}