/*
Theme Name: 	University of Southamton - Voice Administered Questionnaire.
Author: 		Simon James Ward Ltd.
Author URI:     http://simonjamesward.com
Description: 	Custom build.
Version: 		1.1
text-domain:	suqol
*/

@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}

* { 	
	margin:			0;
	padding:		0;
}
html {	
	height:			100%;
}
body {	
	height:			100%; 
	background:		#f4f4f4;
	font:			normal normal 500 100% 'Open Sans', sans-serif;
	line-height:	130%;
	color:			#303030;
	cursor:			default;
}

#ug_main_wrap { 
	position:		relative;
	width:			100%;
	min-height:		100%;
	min-width:		280px;
}

div.align-C,
div.align-L,
div.align-R {
	position:		relative; 
	max-width:		1140px;
	overflow:		visible; 
}
div.align-C { 
	margin:			0 auto;
}
div.align-L {
	margin:			0 0 0 auto; 
}
div.align-R {
	margin:			0 auto 0 0; 
}


@media only screen and ( min-width: 960px ) and ( max-width: 1229px ) {
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		880px;
	}
}
@media only screen and ( min-width: 768px ) and ( max-width: 959px ) {
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		708px;
	}
}
@media only screen and ( min-width: 611px ) and ( max-width: 767px ) {
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		550px;
	}
}
@media only screen and ( max-width: 610px ) {
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		420px;
        padding-left:   15px;
        padding-right:  10px;
	}
}


/* Columns
------------------------------ */
div.pairs,
div.thirds {
	position:		relative;
	max-width:		100%;
}
	div.pairs > div {
		position:		relative;
		width:			48%;
	}
	div.pairs > div:first-child {
		float:			left;
	}
	div.pairs > div:last-child {
		float:			right;
	}

	div.thirds > div {
		width:			28%;
		float:			left;
		margin-bottom:	50px;
	}
	div.thirds > div:first-child {
		margin-right:	8%;
	}
	div.thirds > div:last-child {
		float:			right;
	}

@media only screen and ( min-width: 611px ) and ( max-width: 767px ) {
	div.pairs > div	{
		float:			none;
		width:			100%;
	}
	div.thirds > div {
		float:			none;
		width:			100%;
		padding-bottom:	20px;
	}
	div.thirds > div:first-child {
		margin-right:	0;
	}
}
@media only screen and ( min-width: 481px ) and ( max-width: 610px ) {
	div.pairs > div {
		float:			none;
		width:			100%;
	}
	div.thirds > div {
		float:			none;
		width:			100%;
		padding-bottom:	20px;
	}
	div.thirds > div:first-child {
		margin-right:	0;
	}
}
@media only screen and ( max-width: 480px ) {
	div.pairs > div {
		float:			none;
		width:			100%;
	}
	div.thirds > div {
		float:			none;
		width:			100%;
		padding-bottom:	20px;
	}
	div.thirds > div:first-child {
		margin-right:	0;
	}
}


/* Fonts
--------------------------------- */
p, ul, ol, table { 
	font:				normal normal 400 17px 'Open Sans', sans-serif; 
	color:				#303030; 
}
p { 
	text-align:			left; 
	margin-bottom:		20px;
	line-height:		145%;
}
ul { 
	list-style: 		none inside none; 
	margin:				0 0 20px 0px;
}
ol { 
	list-style-position:	outside;
	margin:				0 0 20px 20px;
}
li {
	line-height:		132%;
	padding:			0 0 14px 0;
}
h1, h2, h3, h4, h5 { 
	margin:				0 0  20px 0; 
	font-family: 		'Open Sans', sans-serif;
	color:				#202020;
    line-height:        120%;
}
h1 { 
	font-size:			36px;
	font-weight:		300;
}
h2 { 
	font-size:			26px;
	font-weight:		400;
}
h3 { 
	font-size:			22px;
	font-weight:		400;
}
h4 { 
	font-size:			18px;
    margin:				0 0  10px 0;
	font-weight:		400;	
}
h5 { 
	font-size:			18px; 
	font-weight:		400;
}
fieldset {
	border:				0;
}
a { 
	color:				#00A2C5;
	text-decoration:	none; 
	outline:			none; 
	cursor:				pointer;
}
a:hover	{ 
	color:				#00A2C5; 
	text-decoration:	none; 
}
p a {
	text-decoration:	underline; 
}
strong {
	font-weight:		600;
}
article {
	position:			relative;
}


hr {
	border:			1px solid #d0d0d0;
	border-bottom:	1px solid #fff;
}

input[type="submit"] {
	padding:		10px;
}
select {
    padding:		6px;
}
textarea {
    padding:        10px;
    border:         1px solid #ddd;
    border-radius:  2px;
    width:          90%;
    height:         200px;
}



/* Header
--------------------------------- */
header.ug-header {
    position:			relative;
	width:				100%;
	background-color: 	#fff;
	padding:			15px 0;
    border-bottom:      1px solid #aaa
}
	div.site-logo {
		position:		relative;
		float:			right;
		width:			150px;
		height:			auto;
		margin: 		0 0px 0 0;
		padding:		12px 0 0 0;
	}
		div.site-logo img {
			display:		block;
			width:			100%;
			height:			auto;
			margin:			0;
			padding:		0;
			outline:		none;
		}
	
	div.site-header-text {
		position:		relative;
		float:			left;
	}
	div.site-title {
		position:		relative;
		font-size:		31px;
		font-weight:	400;
		margin:			0;
		padding:		0px 0 4px 0;
		text-align:		left;
		color:			#505050;
		line-height: 	110%;
	}
    div.site-sub-title {
        font-size:      16px;
    }    
    #load_indicator {
        display:        inline-block;
        width:          9px;
        height:         9px;
        border-radius:  50%;
        border:         1px solid #c0c0c0;
        margin-right:   7px;
        margin-left:    3px;
    }
    #load_indicator.load-complete {
        background:     #0c0;
        border:         1px solid #0a0;
    }

@media only screen and ( min-width: 960px ) and ( max-width: 1229px ) {
    div.site-title {
		font-size:		29px;
    }
}
@media only screen and ( min-width: 768px ) and ( max-width: 959px ) {
    div.site-title {
		font-size:		27px;
    }
    div.site-logo {
		width:			110px;
	}
}
@media only screen and ( min-width: 611px ) and ( max-width: 767px ) {
    div.site-title {
		font-size:		27px;
    }
    div.site-logo {
		width:			80px;
	}
	div.site-sub-title {
        font-size:      15px;
    }
    #load_indicator {
        width:          7px;
        height:         7px;
    }
}
@media only screen and ( max-width: 610px ) {
    div.site-title {
		font-size:		27px;
    }
    div.site-logo {
		display:	    none;
	}
    div.site-sub-title {
        font-size:      14px;
    }
    #load_indicator {
        width:          7px;
        height:         7px;
    }
}
    

	

    
/* Footer
--------------------------------- */
footer.ug-footer {
	position:		relative;
	width:			100%;
	padding:		30px 0;
	background: 	#282828;
}		
		

		
/* Copyright
--------------------------------- */
div.ug-copyright {
	position:		relative;
	width:			100%;
	padding:		20px 0 20px 0;
	background: 	#282828;
}			
	div.ug-copyright p {
		color:			#ddd;
		text-align:		right;
		font-size:		12px;
		font-weight:	300;
		margin:			0;
	}

@media only screen and ( max-width: 767px ) {
	div.ug-copyright p {
		text-align:		center;
	}
}




/* CTP su_questionnaire general template stuff
-------------------------------------------------- */
.survey-screen {
    padding:    30px 0;
    margin-bottom:  40px;
}

/* --- Agreement screen --- */
#participant_agrees_feedback {
}
.agree-text {
    font-size: 20px;
    display: inline-block;
    padding-top: 4px;
}

#participant_agrees_checkbox {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 1px;
    box-sizing: border-box;
    position: relative;
    width: 30px;
    height: 30px;
    border-width: 0;
    transition: all .3s linear;
    float: left;
    margin: 0 7px 0 0;
}
#participant_agrees_checkbox:before {
    content: 		"\f096";
	font-family: 	FontAwesome;
	color:			#606060;
	font-size:		30px;
}

#participant_agrees_checkbox:checked {
}
#participant_agrees_checkbox:checked:before {
    content: 		"\f046";
	font-family: 	FontAwesome;
	color:			#606060;
	font-size:		30px;
}

#participant_agrees_checkbox:focus {
  outline: 0 none;
  box-shadow: none;
}


/* --- Participant Info screen --- */
.field-box {
    border:         1px solid #445a6a;
    padding:        20px;
    margin:         0 0 20px 0;
}
    .field-box p {
        font-size:  18px;
    }

.fat-input {
    padding:            8px;
    font-size:          16px;
    width:              300px;
    color:              #222;
    max-width:          90%;
}
.section-header {
    background-color:           #a1adb6;
    color:                      #fff;
    padding:                    3px 3px 3px 10px;
    font-weight:                bold;
    font-size:                  120%;
    margin:                     5px 0;
}
.feedback-wrap {
    padding:            10px;
    border-radius:      3px;
    border:             2px solid #f4f4f4;
}

@media only screen and ( max-width: 959px ) {
    .field-box p {
        font-size:  18px;
    }

}


/* --- Intro screen --- */
.intro-wrap {
    max-width:          600px;
    padding:            50px 40px 50px 60px;
    border:             2px solid #444;
    background:         #efe3e8;
    border-radius:      3px;
    position:           relative;
    margin:             0 auto;
}
.intro-text p {
    font-size:          22px;
    font-weight:        500;
    color:              #444;
    margin:             0 0 40px 0;
}


/* --- Buttons --- */
.continue-button {
    display:            inline-block;
    border-top:         2px #669999 solid;
    border-right:       2px #669999 solid;
    border-bottom:      2px #009900 solid;
    border-left:        2px #009900 solid;
    background-color:   #E1FBE4;
    padding:            14px 18px;
    border-radius:      3px;
    text-align:         center;
    color:              #008800;
    font-weight:        600;
    font-size:          19px;
}
.continue-button:hover {
    color:			#003300;
}
.continue-button:after {
    content: 		"\f0a9";
	font-family: 	FontAwesome;
	color:			#006600;
	font-size:		22px;
	padding:        5px 0 0 10px;
}   

@media only screen and ( max-width: 959px ) {
    .continue-button {
        font-size:          22px;
        padding:            16px 22px;
    }
}


/* --- Thank you screen --- */
div.thankyou-wrap {
    position:       relative;
    width:          595px;
    margin:         0 auto;
    height:         auto;
}
div.thankyou-wrap img {
    width:          100%;
    height:         100%;
    position:       relative;
    display:        block;
}
div.thankyou-wrap .thankyou-text {
    position:       absolute;
    top:            80px;
    left:           0;
    width:          100%;
    text-align:     center;
    font-size:      86px;
    color:          #c30;
    text-shadow:    1px 1px 2px black;    
    font-family:    "Comic Sans MS", cursive, sans-serif;
    line-height:    120%;
}

@media only screen and ( min-width: 960px ) and ( max-width: 1229px ) {

}
@media only screen and ( min-width: 768px ) and ( max-width: 959px ) {

}
@media only screen and ( min-width: 611px ) and ( max-width: 767px ) {
    div.thankyou-wrap {
        width:          100%;
    }
    div.thankyou-wrap .thankyou-text {
        font-size: 60px;
        top:            20%;
    }
}
@media only screen and ( max-width: 610px ) {
    div.thankyou-wrap {
        width:          100%;
    }
    div.thankyou-wrap .thankyou-text {
        font-size: 50px;
        top:            20%;
    }
}






/* --- Feedback boxes --- */
div.feedback {
	position: 		relative;
	padding:		10px 50px 10px 10px;
	margin:			0 0 10px 0;
	border-radius:	3px;
	-moz-border-radius:	3px;
	-webkit-border-radius:	3px;
}

.error {
	background:		#fcc;
	color:			#800;
	border-color:   #f00;
}

.success {
	background:		#cfc;
	color:			#080; 
	border:			1px solid #080;
}

.feedbackCloser {
	position:		absolute;
	top:			0;
	bottom:			0;
	right:			0;
	width:			27px;
	background:		none;
	padding:		12px 0 0 15px;
	font-size:		18px;
}

div.feedback.success .feedbackCloser:hover {
	color:			#3c3;
}

div.feedback.error .feedbackCloser:hover {
	color:			#c33;
}



/* Misc
--------------------------------- */	
.edit {
	display:		inline-block;
	padding:		10px;
	border:			1px solid #00A2C5;
	border-radius:	2px;
    font-size:      15px;
}
	

.button-primary {
    background-color:   #307DAE;
    color:              #f6f6f6;
    text-decoration:    none;
    border-radius:      2px;
    padding:            5px 10px;
}
.button-primary:hover {
    background-image:   linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    color:              #fff;
    text-decoration:    none;
}
	
.button-secondary {
    background-color:   #d8d8d8;
    color:              #444;
    text-decoration:    none;
    border-radius:      2px;
    padding:            5px 10px;
}
.button-secondary:hover {
    background-image:   linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    color:              #111;
    text-decoration:    none;
}


/* Helpers
--------------------------------- */
.unselectable,
.unselectable * {
   -moz-user-select: 	-moz-none;
   -khtml-user-select: 	none;
   -webkit-user-select: none;
   -ms-user-select: 	none;
   user-select: 		none;
}

.clearB {
	width:	auto;
	height:	0;
	clear:	both;
}

.clearL {
	width:	auto;
	height:	0;
	clear:	left;
}

.clearR {
	width:	auto;
	height:	0;
	clear:	right;
}

.fL {
	float:		left;
}

.fR {
	float:		right;
}

.c {
    text-align:     center;
}

.bl {
    display:     block;
}

img.auto-size {
	width:		100%;
	height:		auto;
	display:	block;
}

.desktop-only {
	display:		block;
}

.mobile-only {
	display:		none;
}

.accel {
    -webkit-transform: 	translateZ(0);
    -moz-transform: 	translateZ(0);
    -ms-transform: 		translateZ(0);
    -o-transform: 		translateZ(0);
    transform: 			translateZ(0);
    -webkit-backface-visibility: 	hidden;
    -webkit-perspective: 			1000;
}



@media only screen and ( max-width: 767px ) {
	.desktop-only {
		display:		none;
	}
	.mobile-only {
		display:		block;
	}
}









/*---*/

@media only screen and ( min-width: 960px ) and ( max-width: 1229px ) {

}
@media only screen and ( min-width: 768px ) and ( max-width: 959px ) {

}
@media only screen and ( min-width: 611px ) and ( max-width: 767px ) {

}
@media only screen and ( max-width: 610px ) {

}