/*- Reset -*/
*,*:before,*:after{box-sizing:border-box;-moz-box-sizing:border-box;}
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}
.clearfix:after{clear:both;}
.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
a:focus{outline:thin dotted #666;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
a:hover,a:active{outline:0;}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
#map_canvas img,.google-maps img{max-width:none;}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;}
button,input{*overflow:visible;line-height:normal;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;}
label,select,button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer;}
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
input[type="number"] {-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
textarea,input,button,select{ font-family:inherit;font-size:inherit;}
nav ol,nav ul{margin:0;padding:0;}
nav li{list-style:none}
samp{font-family:inherit;font-size:inherit}
:is(a, .button, button, input, textarea, summary):focus-visible{outline:0;border-color:transparent;box-shadow:0 0 0 2px var(--color-blue-50);}

/*- Colours -*/
:root{
    /*- Defined Colours -*/
    --colour-blue:#065BA8;
    --colour-orange:#E96A41;
    --colour-white:#ffffff;
    --colour-offwhite:#E3ECF5;
    --colour-lightblue:#8CA8D0;
    --colour-darkblue:#054B8A;
    --colour-grey:#ACBDD9;
    --colour-darkgrey:#585858;
    --colour-black:#000;
    --colour-transparent:rgba(0,0,0,0);

    --color-blue-85:rgba(6,91 ,168,0.85);
    --color-blue-50:rgba(6,91 ,168,0.5);
    --color-orange-85:rgba(233,106,65,0.85);

    --colour-error-red:#E94141;
    --colour-error-yellow:#E8BD2E;
    --colour-error-green:#3AAD54;

    /*- Font Sizes -*/
    --content-size:1rem;
    --menu-size:1rem;
    --h1-size:2.2rem;
    --h2-size:2rem;
    --h3-size:1.75rem;
    --h4-size:1.5rem;
    --h5-size:1.125rem;
    --h6-size:1rem;

    --content-line-height:1.3;
    --menu-line-height:1.3;
    --heading-line-height:1.3;

    /*- Headings -*/
    --h1-colour:var(--colour-orange);
    --h2-colour:var(--colour-orange);
    --h3-colour:var(--colour-blue);
    --h4-colour:var(--colour-blue);
    --h5-colour:var(--colour-darkblue);
    --h6-colour:var(--colour-darkblue);

    
    /*- Menu -*/
    --menu-background:var(--colour-blue);
    --menu-item-border:var(--colour-darkblue);
    --menu-current-background:var(--colour-darkblue);
    --menu-text:var(--colour-white);
    --menu-links:var(--colour-white);
    
    /*- Content Area -*/
    --text-colour:var(--colour-darkgrey);
    --content-background:var(--colour-offwhite);
    --text-inverse-colour:var(--colour-white);
    --content-inverse-background:var(--colour-blue);

    /*- Links -*/
    --link-colour:var(--colour-orange);
    --link-colour-hover:var(--colour-blue);
    --link-colour-active:var(--colour-lightblue);
    
    /*- Buttons -*/
    --form-buttons-colour:var(--colour-white);
    --form-buttons-background:var(--colour-orange);

    --form-buttons-color-focus:var(--colour-white);
    --form-buttons-background-focus:var(--colour-orange);
    
    --form-buttons-color-disabled:var(--text-colour);
    --form-buttons-background-disabled:var(--colour-transparent);
    
    /*- Buttons / Radio Buttons / Checkboxes -*/
    --form-objects-colour:var(--text-colour);
    --form-objects-background:var(--colour-orange);

    --form-objects-color-focus:var(--text-colour);
    --form-objects-background-focus:var(--colour-orange);
    
    --form-objects-color-disabled:var(--text-colour);
    --form-objects-background-disabled:var(--colour-transparent);

    /*- Input Boxes / Select Boxes / Textareas -*/
    --form-inputs-colour:var(--text-colour);
    --form-inputs-background:var(--colour-white);
    
    --form-inputs-colour-focus:var(--text-colour);
    --form-inputs-background-focus:var(--colour-white);
    
    --form-inputs-colour-disabled:var(--text-colour);
    --form-inputs-background-disabled:var(--colour-transparent);
    
    /*- Tables -*/
    --table-row-header-background:var(--colour-blue);
    --table-row-footer-background:var(--colour-lightblue);
    --table-row-background:var(--colour-white);

    --table-row-header-colour:var(--colour-white);
    --table-row-footer-colour:var(--text-colour);
    --table-row-colour:var(--text-colour);

    --table-border-colour:var(--colour-lightblue);

    
}
/*- Layout -*/
body{font-size:1em;font-family:'Roboto',Arial, Helvetica, sans-serif;}
#container{display:grid;grid-template-rows:8rem auto 13rem}
body,#container{margin:0px;padding:0px;min-height:100vh;}
main#content{display:grid;grid-template-columns:15rem auto;}
#content-inner{padding:3rem 1rem;background:var(--content-background);color:var(--text-colour);}
@media (min-width:500px){
    #content-inner{padding:3rem 4rem;}
}
#container>header,#container>footer{background:var(--colour-white);color:var(--colour-blue);text-align:center}
#container>footer{color:var(--colour-darkgrey)}

/*- Content Generic -*/
.center,.text-center {text-align:center;}
.left,.text-left {text-align:left;}
.right,.text-right {text-align:right;}
.inline-block{display:inline-block;}.block{display:block;}
.flex{display:flex;flex-direction:row;gap:2rem}
.flex.pinline-gap{gap:2px;}
.even-flex>div{flex:1}
.nowrap{white-space:nowrap}
.bold{font-weight:500}

.blue{color:var(--colour-blue);} .blue-background{background-color:var(--colour-blue);}
.orange{color:var(--colour-orange);} .orange-background{background-color:var(--colour-orange);}
.white{color:var(--colour-white);} .white-background{background-color:var(--colour-white);}
.offwhite{color:var(--colour-offwhite);} .offwhite-background{background-color:var(--colour-offwhite);}
.lightblue{color:var(--colour-lightblue);} .lightblue-background{background-color:var(--colour-lightblue);}
.darkblue{color:var(--colour-darkblue);} .darkblue-background{background-color:var(--colour-darkblue);}
.darkgrey{color:var(--colour-darkgrey);} .darkgrey-background{background-color:var(--colour-darkgrey);}
.black{color:var(--colour-black);} .black-background{background-color:var(--colour-black);}

.m1px{margin:1px}.mx1px{margin-left:1px;margin-right:1px}.my1px{margin-top:1px;margin-bottom:1px}.mt1px{margin-top:1px}.mb1px{margin-bottom:1px}.ml1px{margin-left:1px}.mr1px{margin-right:1px}
.p1{padding:1rem}.px1{padding-left:1rem;padding-right:1rem}.py1{padding-top:1rem;padding-bottom:1rem}.pt1{padding-top:1rem}.pb1{padding-bottom:1rem}.pl1{padding-left:1rem}.pr1{padding-right:1rem}
.m1{margin:1rem}.mx1{margin-left:1rem;margin-right:1rem}.my1{margin-top:1rem;margin-bottom:1rem}.mt1{margin-top:1rem}.mb1{margin-bottom:1rem}.ml1{margin-left:1rem}.mr1{margin-right:1rem}
.p1-5{padding:1.5rem}.px1-5{padding-left:1.5rem;padding-right:1.5rem}.py1-5{padding-top:1.5rem;padding-bottom:1.5rem}.pt1-5{padding-top:1.5rem}.pb1-5{padding-bottom:1.5rem}.pl1-5{padding-left:1.5rem}.pr1-5{padding-right:1.5rem}
.m1-5{margin:1.5rem}.mx1-5{margin-left:1.5rem;margin-right:1.5rem}.my1-5{margin-top:1.5rem;margin-bottom:1.5rem}.mt1-5{margin-top:1.5rem}.mb1-5{margin-bottom:1.5rem}.ml1-5{margin-left:1.5rem}.mr1-5{margin-right:1.5rem}
.p2{padding:2rem}.px2{padding-left:2rem;padding-right:2rem}.py2{padding-top:2rem;padding-bottom:2rem}.pt2{padding-top:2rem}.pb2{padding-bottom:2rem}.pl2{padding-left:2rem}.pr2{padding-right:2rem}
.m2{margin:2rem}.mx2{margin-left:2rem;margin-right:2rem}.my2{margin-top:2rem;margin-bottom:2rem}.mt2{margin-top:2rem}.mb2{margin-bottom:2rem}.ml2{margin-left:2rem}.mr2{margin-right:2rem}
.p3{padding:3rem}.px3{padding-left:3rem;padding-right:3rem}.py3{padding-top:3rem;padding-bottom:3rem}.pt3{padding-top:3rem}.pb3{padding-bottom:3rem}.pl3{padding-left:3rem}.pr3{padding-right:3rem}
.m3{margin:3rem}.mx3{margin-left:3rem;margin-right:3rem}.my3{margin-top:3rem;margin-bottom:3rem}.mt3{margin-top:3rem}.mb3{margin-bottom:3rem}.ml3{margin-left:3rem}.mr3{margin-right:3rem}

.mw50{max-width:50vw;}
.mw75{max-width:75vw;}

.full-width{width:100%;}

hr{border:none;height:1px;background:var(--colour-lightblue);}
hr.gap{background:none;}
hr.small{margin:1rem 0}
hr.medium{margin:2rem 0}
hr.large{margin:4rem 0}

blockquote{border-left:2px solid var(--colour-grey);padding-left:1rem;margin-left:1rem}

a{display:inline-block;text-decoration:none;border-bottom:1px solid var(--link-colour);color:var(--link-colour);} 
a:hover{color:var(--link-colour-hover)}
a:active{color:var(--link-colour-active)}
a:visited{border-color:var(--link-colour-active)}
a:focus{border-color:var(--link-colour-hover)}

a.view-more{position:relative;display:inline-block;margin-right:1rem}
a.view-more::after{content:"";position:absolute;right:-1.25rem;bottom:30%;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--link-colour);transition:all 250ms;}
a.view-more.expanded::after{transform:rotate(180deg);}

.expand-hidden{height:0;overflow:hidden}
.expand-body{transition:all 250ms;}

/*- Header -*/
#header h1 a{border:none;}
#header h1 img{max-height:90px}
#header h1 span{position:relative;top:1rem;display:inline-block;color:var(--colour-white);background-color:var(--colour-orange);border-radius:30px;padding:.25em 1em;margin-left:2rem}

/*<h1><a href="/"><img src="images/pedro-logo.png" alt="PEDro Rating"></a></h1></header>*/

/*- Footer -*/
#container>footer a{border:none;}
footer>div{margin:3rem auto;}
#links-row>div{display:inline-block;}
#logo-row img{max-height:40px;margin:0 3rem}
.socials{margin-right:2rem}
.socials img{max-width:1.5rem;margin:0 .75rem}
.sitemap{margin-left:2rem}

/*- Headings -*/
#content h1,h2,h3,h4,h5,h6{line-height:var(--heading-line-height);font-weight:500}
#content h1 {font-size:var(--h1-size);color:var(--h1-colour);}
h2 {font-size:var(--h2-size);color:var(--h2-colour);}
h3 {font-size:var(--h3-size);color:var(--h3-colour);}
h4 {font-size:var(--h4-size);color:var(--h4-colour);}
h5 {font-size:var(--h5-size);color:var(--h5-colour);}
h6 {font-size:var(--h6-size);color:var(--h6-colour);}

/*- Login Specific -*/
#login-form{width:350px;max-width:100%}
#login main#content,#login main #content-inner{display:flex;width:100vw;}
#login main #content-inner{display:flex;flex-direction:column;width:100vw;justify-content:center;align-items:center;background:var(--content-inverse-background);color:var(--text-inverse-colour);}
#login #content h1,#login #content h2{color:var(--text-inverse-colour);}
.login-user,.login-pass{padding-left:48px;position:relative;margin:2rem 0;}
.login-user::before,.login-pass::before{content:" ";width:51px;height:51px;background:var(--colour-lightblue) url(../images/icon-login-username.png) 45% center no-repeat;background-size:25px;display:inline-block;position:absolute;left:0;top:0;border-radius:4px 0 0 4px!important;}
.login-pass::before{background-image:url(../images/icon-login-password.png)}
.login-user input,.login-pass input{border-radius:0 4px 4px 0!important;line-height:1rem;width:100%;}
.login-button{text-align:center;}


/*- Menu -*/
#page_nav{background:var(--menu-background);font-size:var(--menu-size);line-height:var(--menu-line-height);color:var(--menu-text);font-weight:500;}
#page_nav ul {list-style-type:none;margin:0px;padding:0px;width:100%;border-bottom:2px solid var(--menu-item-border);}
#page_nav li {display:block;padding:4px 0 0;border:2px solid var(--menu-item-border);border-width:2px 0;height:7rem;}
#page_nav li.active{background:var(--menu-current-background)}
#page_nav li a{position:relative;color:var(--menu-links);text-decoration:none;text-transform:uppercase;display:flex;height:100%;width:100%;justify-content:center;align-items:center;padding-left:0;border:none;}
#page_nav li a span {display:block;width:7em;margin-left:3rem;}
#page_nav li.icon-home a::before,#page_nav li.icon-ratable a::before,#page_nav li.icon-complete a::before,#page_nav li.icon-resources a::before,#page_nav li.icon-community a::before,#page_nav li.icon-email a::before{content:"";display:block;height:36px;width:36px;position:absolute;left:2.8rem;top:calc(50% - 17px);
background:transparent url(../images/icon-home.png) 0 0 no-repeat;background-size:30px;
}
#page_nav li.icon-ratable a::before{background-image:url(../images/icon-articlestoberated.png);background-size:26px;top:calc(50% - 18px)}
#page_nav li.icon-complete a::before{background-image:url(../images/icon-completedarticles.png);background-size:32px;top:calc(50% - 17px)}
#page_nav li.icon-resources a::before{background-image:url(../images/icon-resources.png);top:calc(50% - 12px)}
#page_nav li.icon-community a::before{background-image:url(../images/icon-community.png);top:calc(50% - 15px)}
#page_nav li.icon-email a::before{background-image:url(../images/icon-emailpedro.png);top:calc(50% - 12px)}
.nav_logout{display:block;margin:1rem auto;width:7.5em;text-align:center;}
body .button.nav_logout:active{background:var(--colour-offwhite);color:var(--colour-orange);}

/*- Forms -*/
.max-form{max-width:52rem}
input[type="text"], input[type="email"], input[type="password"], input[type="number"],textarea {font-size:1rem;font-weight:normal;padding:1rem;background:#fff;border:none;border-radius:4px;min-width:25rem}
input.small[type="text"], input.small[type="email"], input.small[type="password"], input[type="number"]{min-width:7rem;width:7rem}
input.big[type="number"]{min-width:25rem;width:auto}
input[type="text"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="number"]:disabled,textarea:disabled{background:var(--content-background);border:1px solid var(--colour-lightblue)}
button,.button,input[type=submit],input[type=reset],input[type=button]{border:none;padding:0.55rem 2rem;color:var(--form-buttons-colour);background:var(--form-buttons-background);border-radius:30px;font-weight:500;border:2px solid transparent}
a.button:hover,a.button:active,a.button:focus{color:var(--colour-white)}
button:disabled,body .button:disabled,input[type=submit]:disabled,input[type=reset]:disabled,input[type=button]:disabled{color:var(--form-buttons-color-disabled);background:var(--form-buttons-background-disabled);}
button:hover,body .button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{background:var(--color-orange-85)}
button:active,body .button:active,input[type=submit]:active,input[type=reset],input[type=button]:active{background:var(--colour-transparent);color:var(--form-buttons-background);border-color:var(--form-buttons-background)}
input[type=reset]:hover{color:var(--form-buttons-colour)}

label,samp{position:relative;color:var(--colour-darkgrey);}
label input::placeholder{}
label span, samp span{display:block;padding:0.5rem 0}
samp>span{padding-bottom:1.5rem}
samp label span{display:inline;padding:0} /* repurposed for pretending to be a label-heading-thingy */
.inline-title>span{position: absolute;left: 1rem;top:-.4rem;}
body .inline-title>input{padding-left:7rem;}
body input.article-id{width:15rem;min-width:auto}
.form-radio input[type=radio],.form-check input[type=checkbox]{opacity:0;position:absolute;z-index:0;}
.form-radio label span,.form-check label span{display:inline-block;padding-left:2em;position:relative;z-index:1;margin-right:0.5em}
.form-radio label span::before,.form-check label span::before{content:"";position:absolute;top:-1px;left:0;display:block;width:1.25em;height:1.25em;border:2px solid var(--colour-blue);z-index:2;border-radius:50%;}
.form-check label input:checked+span::after{content:"";position:absolute;top:calc(50% - .55rem);left:calc(50% + .2rem);display:block;width:0.4em;height:.9em;transform:rotate(45deg);border:2px solid var(--colour-white);border-top:none;border-left:none;z-index:3;}
.form-check label span::before{border-radius:25%}
/*.form-radio label input:checked+span::before,.form-check label input:checked+span::before{background:var(--colour-orange)}*/
.form-radio label input:checked+span::before,.form-check label input:checked+span::before{background:var(--colour-orange);border-color:var(--colour-orange)}
.form-radio input[type=radio]:focus-visible+span::before,.form-check input[type=checkbox]:focus-visible+span::before{outline:0;border-color:transparent;box-shadow:0 0 0 2px var(--color-blue-50);}
td.form-radio span::before,td.form-check span::before,td.form-check span::after{top:calc(50% - .6rem)}
td.form-check:not(.article-select):not(.code-select) span::after {left:.4rem!important;top:.6rem!important}


table :is(input[type=text],input[type=email], textarea){outline:0;border-color:transparent;box-shadow:0 0 0 2px var(--color-blue-50);}
table :is(input[type=text],input[type=email], textarea):focus-visible{outline:0;border-color:transparent;box-shadow:0 0 0 2px var(--color-blue-85);}

/*- Tables -*/
.tables-max90 table{max-width:90%;}
table{width:100%;border-radius:0.25rem}
table.natural{width:auto;}
table, th, td{border:1px solid var(--content-background);border-collapse:collapse;vertical-align:middle;font-weight:400}
th.vtop, td.vtop, .vtop td, .vtop th{vertical-align:top;}
th.vbottom, td.vbottom, .vbottom td, .vbottom th{vertical-align:bottom;}
thead{background:var(--table-row-header-background);color:var(--table-row-header-colour);border-radius:0.25rem 0.25rem 0 0}
tfoot{background:var(--table-row-footer-background);color:var(--table-row-footer-colour);border-radius:0 0 0.25rem 0.25rem}
tbody{background:var(--table-row-background);color:var(--table-row-colour);}
th,td{padding:1em 2rem}
th a{color:var(--colour-white)}
th a:hover{color:var(--colour-grey)}
th a:active{color:var(--colour-offwhite)}
td.blank-td{background:var(--content-background)}
td.article-select,td.code-select{position:relative;vertical-align:middle;padding:0 2rem}
td.article-select label,td.article-select label span,td.code-select label,td.code-select label span{position:absolute;top:0;left:0;right:0;bottom:0;}
td.article-select label span::before,td.code-select label span::before{left:calc(50% - 0.25em)!important;top:calc(50% - 0.625em)!important;}
td.code-select{width:2rem}
table.silent,table.silent td, table.silent th{border:none;}
table.flushleft tr td:first-of-type,table.flushleft tr td:first-of-type{padding-left:0}

.fixed15{width:15rem}.fixed20{width:20rem}.fixed25{width:25rem}

section.faux-table{background:var(--table-row-background);border-radius:0.25rem}
section.faux-table header, section.faux-table main{padding:1rem 2rem}
section.faux-table header{background:var(--table-row-header-background);color:var(--table-row-header-colour);border-radius:0.25rem 0.25rem 0 0 }
section.faux-table main{}

/*- Content Specific -*/
.pagination{width:18rem;display:block;margin:2rem auto;text-align:center;}
.pagination a{display:inline-block;border:2px solid transparent;/*border-right-width:0;*/padding:.5rem .75rem;background-color:var(--colour-orange);color:var(--colour-white);font-weight:500}
.pagination a:hover{background-color:var(--color-orange-85);}
.pagination a:focus{box-shadow:none;border-color:var(--color-blue-50)}
.pagination a:active{background:var(--colour-offwhite);color:var(--colour-orange);border-color:var(--color-orange)}
.pagination a:last-of-type{/*border-right-width:1px;*/border-radius:0 30px 30px 0;padding-right:1.25rem}
.pagination a:first-of-type{border-radius:30px 0 0 30px;padding-left:1.25rem}
.pagination>div{margin-top:.5rem}

.comparison-table textarea{min-width:auto;width:100%}

.display-box{border:1px solid var(--colour-darkgrey);padding:0.75rem 1rem;border-radius:0.25rem}
.display-box div{display:inline-block;margin-right:1.5rem}
.display-box span{color:var(--colour-orange)}

.highlight-person>*{display:block;}
.highlight-person strong{color:var(--colour-blue);text-transform:uppercase;font-size:1.5rem}
.highlight-person em{color:var(--colour-grey)}

.message{border:1px solid var(--colour-blue);border-radius:0.25rem;background:var(--colour-white);margin-bottom:1rem}
.message>div>*{padding:1rem 1.25rem;}
.message strong{display:block;background:var(--colour-blue);color:var(--colour-white)}
.message p{margin:0;}
.message.notify{border-color:var(--colour-error-green);}
.message.notify strong{background:var(--colour-error-green);}
.message.warning{border-color:var(--colour-error-yellow);}
.message.warning strong{background:var(--colour-error-yellow);}
.message.error{border-color:var(--colour-error-red);}
.message.error strong{background:var(--colour-error-red);}