/*------ CSS for GAD-7 and PHQ-9 -----/*

        016 - Accordion
        076 - Animation
        087 - Button
        180 - Elements
        270 - Focus
        279 - Form
        340 - Icons
        349 - IE Specific
        356 - Layout table
        400 - PHQ table

/*----------- Accordion --------------*/

.accordion {
    width:98%;
    margin:auto;
    max-width:920px;
    font-size:1.0em;
    line-height:1.5em;
    font-family:inherit;
}
.accordion .section {
    border:solid #DDD 2px;
    border-radius:5px;
    background:#FFF;
    margin:1em;
}
.accordion .section-header {
    margin:-2px 2px 0 -2px;
    border:3px solid #DDD;
    padding:0.3em 0.5em;
    border-radius:5px;
    background:#DDD;
    width:200px;
}
.accordion .section-header a {
    font-family:'DroidSans', Geneva, sans-serif;
    text-shadow:1px 1px 0 #FFF;
    padding:2px 25px 2px 15px;
    text-decoration:none;
    cursor:pointer;
    display:block;
    color:#444;
    font:bold;
}
.accordion .section-header a:hover {
    color:#FF8000;
}
.accordion .section .section-content {
    padding:0.5em;
    display:none;
}
.accordion .section:target .section-content {
    -webkit-animation:fadeIn 2s;
    -ms-animation:fadeIn 2s;
    animation:fadeIn 2s;
    display:block;
    padding:0.5em;
}
.accordion .section:target {
    border:solid #DDD 2px;
}
.accordion .section:target .section-header a {
    cursor:default;
    color:#444;
}
.accordion .section-header a:before {
    content:"\25BA\0000a0"
}
.accordion .section:target .section-header a:before {
    content:"\25BC\0000a0"
}

/*------------- Animation ------------*/

@-webkit-keyframes fadeIn { 
    from { opacity:0 }
    to { opacity:1 }
}
@keyframes fadeIn { 
    from { opacity:0 }
    to { opacity:1 }
}

/* -------------- Button ------------ */

.btn {
    font-family:'DroidSans', Geneva, sans-serif;
    text-shadow:1px 1px 0 #FFF;
    border-style:solid;
    border-width:1px;
    cursor:pointer;
    font-size:16px;
    height:52px;
    color:#444;
    padding:0;
    display:inline-block;
    position:relative;
    outline:none;
    width:100%;
    max-width:250px;
    background:#FC6;
    margin:0 auto;
    line-height:50px;
    -moz-transition:all 0.1s;
    -ms-transition:all 0.1s;
    transition:all 0.1s;
    border-bottom-color:#AAA;
    border-right-color:#AAA;
    border-left-color:#DDD;
    border-top-color:#DDD;
    border-radius:3px;
}
.btn:before {
    position:relative;
    font-family:'icons';
    text-shadow:1px 1px 0 #FFF;
}

/* -------------- BTN-5 ------------- */

.btn-5 {
    overflow:hidden;
    margin:auto;
}
.btn-5 span {
    transition:all 0.3s ease-in-out;
    -webkit-animation:fadeIn 2s;
    -ms-animation:fadeIn 2s;
    display:inline-block;
    animation:fadeIn 2s;
    height:100%;
    width:100%;
}
.btn-5:before {
    width:100%;
    height:100%;
    font-size:150%;
    line-height:50px;
    position:absolute;
    -webkit-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.btn-5:active {
    border-bottom-color:#DDD;
    border-right-color:#DDD;
    border-left-color:#DDD;
    border-top-color:#AAA;
    background:#FFC44D;
}
.btn-5:active:before {
	color:#C0C0C0;
}

/* -------------- BTN-5a ------------ */

.btn-5a:before {
    left:0;
    top:-100px;
}
.btn-5a:hover span {
    -webkit-transform:translate(500%,0);
    -moz-transform:translate(500%,0);
    -ms-transform:translate(500%,0);
    -o-transform:translate(500%,0);
    transform:translate(500%,0);
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}
.btn-5a:hover:before {
    left:0;
    top:0;
}

/* ------------- Elements ----------- */

@font-face {
    font-family:'DroidSans';
    src:local('DroidSans'), url(http://serene.me.uk/fonts/droid-sans.woff) format('woff');
}
@font-face {
    font-family:'icons';
    src:local('icons'), url(http://serene.me.uk/fonts/icons.woff) format('woff');
}
body {
    background:url(http://serene.me.uk/images/back-cf2.png) repeat fixed top left;
    font:1.2em/1.7 'DroidSans', Geneva, sans-serif;
    color:#333;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
}
.container {
    max-width:900px;
    margin:auto;
    width:90%;
    z-index:1;
}
#intro {
    width:97%;
    color:#333;
    padding:10px;
    max-width:900px;
    margin:30px auto;
    border-radius:10px;
    background:#F9F9F9;
    text-align:justify;
    border:solid #DDD 2px;
}
#intro img, #intro img a {
    float:left;
    border:none;
    margin:5px 0 0 0;
}
#intro p { 
	margin:25px 30px 25px 25px
}
div.topLink, div.topLink a {
    font:normal 14px/20px Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    text-decoration:none;
    text-align:right;
    margin:5px 10px;
    float:right;
    width:80px;
    color:#FC6;
}
div.topLink:hover {
    -webkit-transform:translate(0,-3px);
    -moz-transform:translate(0,-3px);
    -ms-transform:translate(0,-3px);
    -o-transform:translate(0,-3px);
    transform:translate(0,-3px);
    -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -ms-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
}
div.topLink a:before {
	content:"\25B2";
}
::selection {
    background:#F660AB;
    color:#FFF;
    text-shadow:none;
}
::-moz-selection {
    background:#F660AB;
    text-shadow:none;
    color:#FFF;
}
strong { 
	font-weight:bold;
}
noscript {
    text-align:center;
    font-size:18px;
    margin:auto;
    color:#F30;
}
#clip {
	cursor:help;
}

/* -------------- Focus --------------*/

.bloc select:focus {
	background:#FF9;
}
.bloc select:active {
	background:#E9F6F9;
}

/* --------------- Form ------------- */

textarea {
    resize:none;
    margin:auto;
    padding:10px;
    overflow:auto;
    font-size:1.0em;
    line-height:1.5em;
    background:#FDFDF0;
    font-family:inherit;
    border:solid #888 1px;
}
.output {
    height:525px;
    width:97.5%;
    cursor:help;
}
.score {
    width:98.5%;
    height:30px;
    text-align:center;
    vertical-align:middle;
}
div.rights {
    padding:0;
    color:#CCC;
    clear:both;
    width:300px;
    height:40px;
    float:right;
    border:none;
    font-size:14px;
    text-align:right;
    margin:0 20px 0 0;
    font-weight:normal;
    vertical-align:middle;
    background:url(http://serene.me.uk/images/html-5-icon-32-orange.png) no-repeat 25px 0;
}
.bloc {
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
    border:solid #888 1px;
}
.bloc select {
    width:230px;
    padding:15px;
    min-width:230px;
    background:#FDFDF0;
    margin:-5px -35px -10px -5px;
    font:0.8em/1.8 'DroidSans', Geneva, sans-serif;
}
.zeroclipboard-is-active #summary {
	background-color:#E9F6F9;
}
.zeroclipboard-is-hover #summary {
    cursor:help;
    border-color:#3399CC;
}

/* -------------- Icons ------------- */

.icon-remove:before {
	content:"\e00f";
}
.icon-remove-2:before {
	content:"\e005";
}

/* -------- IE specific Hacks ------- */

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { 
#last { padding-bottom:10px }		/* IE10 hack */
}
#last { padding-bottom:10px \9 } 	/* IE9 hack */

/* ---------- Layout Table ---------- */

.layoutTable {
    border-radius:10px;
    box-shadow:0 0 2px 2px #666;
    background-clip:border-box;
    table-layout:fixed;
    background:#F2F2F2;
    margin:30px auto;
    overflow:hidden;
    width:100%;
    padding:0;
}
.layoutTable table {
    border-collapse:collapse;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.layoutTable tr td:first-child {
    /* 1st column */
    width:78%;
}
.layoutTable tr td:first-child +td {
    /* 2nd column */
    width:22%;
}
.layoutTable tr:nth-child(even) {
    /* Even rows */
    background:#F6F6F6;
}
.layoutTable td {
    vertical-align:middle;
    padding:3px 10px;
}
.layoutTable tr:first-child td {
    /* First row */
    background:#707070;
    text-align:center;
    padding:8px;
    color:#FFF;
}

/* ------------- PHQ Table ---------- */

.phq table {
    font-family:Arial, Helvetica, sans-serif;
    box-shadow:0 1px 2px #D1D1D1;
    text-shadow:1px 1px 0 #FFF;
    border-collapse:separate;
    border:#CCC 1px solid;
    background:#F2F2F2;
    border-radius:5px;
    border-spacing:0;
    font-size:14px;
    margin:auto;
    color:#666;
}
.phq table th {
    padding:15px;
    min-width:60px;
    text-align:center;
    background:#EDEDED;
    border-top:1px solid #FAFAFA;
    border-bottom:1px solid #E0E0E0;
}
.phq table th:first-child {
	text-align:center;
}
.phq table tr:first-child th:first-child {
	border-top-left-radius:5px;
}
.phq table tr:first-child th:last-child {
	border-top-right-radius:5px;
}
.phq table tr {
	text-align:left;
	padding-left:15px;
}
.phq table tr td:first-child {
    text-align:center;
    padding-left:15px;
    border-left:0;
}
.phq table tr td {
    padding:15px;
    border-top:1px solid #FFF;
    border-left:1px solid #E0E0E0;
    border-bottom:1px solid #E0E0E0;
}
.phq table tr:nth-child(2n) td {
	background:#F6F6F6;
}
.phq table th:nth-child(3):after,
.section-content p:nth-child(9):before {
    font-size:1.3em;
    margin:0 10px;
    content:"*";
    color:#FC6;
}
.section-content p:nth-child(9) {
    text-align:center;
    margin:15px 50px;
    font-size:0.8em;
}
.phq table tr:last-child td {
	border-bottom:0;
}
.phq table tr:last-child td:first-child {
	border-bottom-left-radius:5px;
}
.phq table tr:last-child td:last-child {
	border-bottom-right-radius:5px;
}