/*
 ** Based on MediaWiki 'monobook' style sheet for CSS2-capable browsers.
 ** Copyright Gabriel Wicke - http://wikidev.net/
 ** License: GPL (http://www.gnu.org/copyleft/gpl.html)
 **
 ** Loosely based on http://www.positioniseverything.net/ordered-floats.html by Big John
 ** and the Plone 2.0 styles, see http://plone.org/ (Alexander Limi,Joe Geldart & Tom Croucher,
 ** Michael Zeltner and Geir Bækholt)
 ** All you guys rock :)
 ** Munged for the CHPC User database - Inus Scheepers
 */


a:visited {
        color: inherited;
}

a:hover {
        display: inline;
        /* text-decoration: none */;
        background-color: White;
        color: Blue;
        /* background-size: 100%; */
}

#column-content {
        width: 100%;
        float: right;
        margin: 0 0 .6em -12.2em;
        padding: 0;
}

#content {
        margin: 2.8em 0 0 12.2em;
        padding: 0 1em 1em 1em;
        position: relative;
        z-index: 2;
}

#column-one {
        padding-top: 160px;
}

#content {
        background: white;
        color: black;
        border: 1px solid #aaa;
        border-right: none;
        line-height: 1.5em;
}


body {
        font: small sans-serif;
        /*	background: #f9f9f9 url(chpclogo.jpg) 600 20 no-repeat; */
        background: rgb(10, 10, 10);
        color: #ccc;
        margin: 1em;
        padding: 1em 1em 0em 2em;
}

td {
        border: none;
        vertical-align: top;
}

th { /* Normal table headers for all table */
        vertical-align: top;
        border: none;
        color: rgb(10, 10, 10);
        background: #ee9f60;
        font-size: 1.2em;
        padding: 0.25em;
        text-align: left;
        font-weight: 200;
        white-space: nowrap;
}



/* Alternating light/darker grey row backgrounds for non-people */
#striped tr:nth-of-type(odd) {background: LightGray }
#striped tr:nth-of-type(even) {background: Silver }

/* Doing the above as a class */
.striped tr:nth-of-type(odd) {background: LightGray }
.striped tr:nth-of-type(even) {background: Silver }


table {
        border:none;
        width:100%;
        font-size: 100%;
        color: black;
        /* we don't want the bottom borders of <h2>s to be visible through
        floated tables */
/*	background-color: white; */

}

fieldset table {
        /* but keep table layouts in forms clean... */
        background: none;
}

a {
        text-decoration: none;
        color: #002bb8;
        background: none;
}

a:visited {
        color: inherited; /* #F00; */
        background: white;
}

a:active {
        color: Tomato;
        background: none;
}


a.stub {
        color: #772233;
}
a.new, #p-personal a.new {
        color: #ba0000;
}

a.button {
        font-size: small;
        font-weight: normal;
        display: inline;
        width: 17.5%;
        background: #ee9f60 none repeat scroll 0% 0%;
        background-color: #ee9f60;
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: 0% 0%;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: auto auto;
        padding: 2px;
        float: right;
        text-align: center;
        border-radius: 5px;
        color: #FFF;
}

a.button:hover {
        background: #2C4C79 none repeat scroll 0% 0%;
        background-color: #2C4C79;
        background-image: none;
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: 0% 0%;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: auto auto;
}


img {
        border: none;
        vertical-align: middle;
}
p {
        margin: .4em 0 .5em 0;
        line-height: 1.5em;
}
p img {
        margin: 0;
}

hr {
        height: 1px;
        color: #aaa;
        background-color: #aaa;
        border: 0;
        margin: .2em 0 .2em 0;
}

h1, h2, h3, h4, h5, h6 {
        color: #222;
        background: none;
        font-weight: normal;
        margin: 0;
        padding-top: .5em;
        padding-bottom: .17em;
        /*	border-bottom: 1px solid #aaa; */
}
h1 { font-size: 188%; }
h1 .editsection { font-size: 66.7%; }
h2 { font-size: 150%; }
h2 .editsection { font-size: 83.3%; }
h3, h4, h5, h6 {
        border-bottom: none;
        font-weight: bold;
}
h3 { font-size: 132%; }
h3 .editsection { font-size: 94.1%; }
h4 { font-size: 116%; }
h4 .editsection { font-size: 97.0%; }
h5 { font-size: 100%; }
h5 .editsection { font-size: 100%; }
h6 { font-size: 80%;  }
h6 .editsection { font-size: 105.3%; }

ul {
        line-height: 1.5em;
        list-style-type: square;
        /*margin: .3em 0 0 1.5em; */
        margin: auto;
        padding: 0;
        list-style-type: none;
}
ol {
        line-height: 1.5em;
        margin: .3em 0 0 3.2em;
        padding: 0;
        list-style-image: none;
}
li {
        margin-bottom: .1em;
}
dt {
        font-weight: bold;
        margin-bottom: .1em;
}
dl {
        margin-top: .2em;
        margin-bottom: .5em;
}
dd {
        line-height: 1.5em;
        margin-left: 1em;
        margin-bottom: .1em;
}

fieldset {
        border: 1px solid #2f6fab;
        margin: 1em 0 1em 0;
        padding: 0 1em 1em;
        line-height: 1.5em;
}
fieldset.nested {
        margin: 0 0 0.5em 0;
        padding: 0 0.5em 0.5em;
}
legend {
        padding: .5em;
        font-size: 95%;
}
form {
        border: none;
        margin: 0;
}

textarea {
        width: 100%;
        padding: .1em;
}

select {
        vertical-align: top;
}
abbr, acronym, .explain {
        border-bottom: 1px dotted black;
        color: black;
        background: none;
        cursor: help;
}
q {
        font-family: Times, "Times New Roman", serif;
        font-style: italic;
}
/* disabled for now
blockquote {
font-family: Times, "Times New Roman", serif;
font-style: italic;
}*/

oldcode {
        background-color: #f9f9f9;
}
pre {
        padding: 1em;
        border: 1px dashed #2f6fab;
        color: black;
        background-color: #f9f9f9;
        line-height: 1.1em;
}

/*
 ** the main content area
 */

#siteSub {
        display: none;
}
#jump-to-nav {
        display: none;
}

#contentSub, #contentSub2 {
        font-size: 84%;
        line-height: 1.2em;
        margin: 0 0 1.4em 1em;
        color: #7d7d7d;
        width: auto;
}
span.subpages {
        display: block;
}

/* Some space under the headers in the content area */
#bodyContent h1, #bodyContent h2 {
        margin-bottom: .6em;
}
#bodyContent h3, #bodyContent h4, #bodyContent h5 {
        margin-bottom: .3em;
}
#firstHeading {
        margin-bottom: .1em;
        /* These two rules hack around bug 2013 (fix for more limited bug 11325).
        When bug 2013 is fixed properly, they should be removed. */
line-height: 1.2em;
padding-bottom: 0;
}

.catlinks {
        border: 1px solid #aaa;
        background-color: #f9f9f9;
        padding: 5px;
        margin-top: 1em;
        clear: both;
}

/* emulate center */
.center {
        width: 100%;
        text-align: center;
}
*.center * {
        margin-left: auto;
        margin-right: auto;
}
/* small for tables and similar */
.small, .small * {
        font-size: 94%;
}
table.small {
        font-size: 100%;
}

/*
 ** content styles
 */

.hide {
        font-size: 100%;
}


/* images */
div.floatright, table.floatright {
        clear: right;
        float: right;
        position: relative;
        margin: 0 0 .5em .5em;
        border: 0;
        /*
        border: .5em solid white;
        border-width: .5em 0 .8em 1.4em;
         */
}
div.floatright p { font-style: italic; }
div.floatleft, table.floatleft {
        float: left;
        clear: left;
        position: relative;
        margin: 0 .5em .5em 0;
        border: 0;
        /*
        margin: .3em .5em .5em 0;
        border: .5em solid white;
        border-width: .5em 1.4em .8em 0;
         */
}
div.floatleft p { font-style: italic; }
/* thumbnails */
div.thumb {
        margin-bottom: .5em;
        border-style: solid;
        border-color: white;
        width: auto;
}
div.thumbinner {
        border: 1px solid #ccc;
        padding: 3px !important;
        background-color: #f9f9f9;
        font-size: 94%;
        text-align: center;
        overflow: hidden;
}
html .thumbimage {
        border: 1px solid #ccc;
}
html .thumbcaption {
        border: none;
        text-align: left;
        line-height: 1.4em;
        padding: 3px !important;
        font-size: 94%;
}
div.magnify {
        float: right;
        border: none !important;
        background: none !important;
}
div.magnify a, div.magnify img {
        display: block;
        border: none !important;
        background: none !important;
}
div.tright {
        clear: right;
        float: right;
        border-width: .5em 0 .8em 1.4em;
}
div.tleft {
        float: left;
        clear: left;
        margin-right: .5em;
        border-width: .5em 1.4em .8em 0;
}
img.thumbborder {
        border: 1px solid #dddddd;
}
.hiddenStructure {
        display: none;
}

/*
 ** classes for special content elements like town boxes
 ** intended to be referenced directly from the wiki src
 */

/*
 ** User styles
 */

/*
 ** edit views etc
 */
.special li {
        line-height: 1.4em;
        margin: 0;
        padding: 0;
}



/* Unbulleted lists */
ul.plain {
        line-height: inherit;
        list-style: none none;
        margin: .3em 0 0 1.5em;
        padding: 0;
}

.plain li {
        margin-bottom: 0;
}

/* Unbulleted indentet list item  */
ul.plainind {
        line-height: inherit;
        list-style: none none;
        margin: .3em 0 0 1.7em;
        padding: 0;
}

.plainind li {
        margin-bottom: 0;
}

/* CHPC User Database specific */
div#banner {
        /* height: 85px; */
        margin: auto;
        text-align:center;
        border:1px LightGray;
        border-radius: 10px;
        background: #F9F9F9;
}

div.pagination {
        /* background: white; */
        font-weight: bold;
        display: inline;
        /* height: 85px; */
        margin: auto;
        text-align:center;
        border:3px dotted white;
        border-radius: 20px;
        background: #F9F9F9;
}

div.pagination {
        background: white;
        font-weight: 400;
        display: inline;
}

td.footer {
        border: solid #ddd 1px;
        border-radius: 20px;
        text-align: right;
        padding-right: 10px;
        background: #888;
}

table.user_project_detail {
        margin-top: 6px;
        margin-bottom: 6px;
        background: #aaa ; /* #143461; */
        border-style: dotted;
        padding: 10px;
        color: white;
        border: 1px solid blue;
        width: 100%;
        border-radius: 10px;
}

table.user_project_detail a {
        color: white;
}

table.user_project_detail a:hover {
        color: blue;
        display: block;
}

table.user_project_detail th {
        /* background: #444; */
        padding: 2px;
        color: white;
}

/* Chequerboard table : all 4 */
/* Columns */
table#check {
        background: white;
        border-collapse: collapse;
        border-spacing: 0;
        border: 0px;
        padding: none;
}
/* table#check td:nth-of-type(odd) {
        background:rgba(96,96,128,0.25);
}
table#check td:nth-of-type(even){
        background:rgba(128,128,128,0.25);
} */
/* Rows */
/* table#check tr:nth-of-type(odd) {
        background:rgba(96,96,128,0.25);
}
table#check tr:nth-of-type(even){
        background:rgba(128,128,128,0.25);
} */

table.booking_detail_table {
        background: #ccc;
        padding: 5px;
        width: 100%;
}

table#light_bg {
        width: 100%;
        padding: 10px;
        border-radius: 20px;
        background: LightSteelBlue;
}

form#booking_bg {
        width: 100%;
        padding: 10px;
        border-radius: 20px;
        background: LightSteelBlue;
}

ul.errorlist {
        background: MistyRose;
        color: Black;

        display: inline-block;
}


.light_bg  td {
        padding: 10px;
}

div#light_bg {
        padding: 10px;
        border-radius: 20px;
        background: LightSteelBlue;
}

.loginbuttonwrapper {
        text-align: center;
}

.loginbutton {
        position: absolute;
        top: 50%;
}

#chpclogin input[type="submit"]  {
        display: table;
        /* width: 40px; height: 40px; */
        color: white;
        background: #ee9f60; /* 143461 */
        border: none; /* solid 1px blue;  */
        border-radius: 20px;
        padding: 5px 5px;
        cursor: pointer;
        vertical-align: center;
}

#chpclogin input[type="submit"]:hover {
        background: #143461;
        color: white;
        font-weight: 800;
}

#chpclogin input[type="submit"]:active {
        background: orange;
}

form#chpclogin {
        background: #94B4E1;
        border-radius:12px;
        padding: 6px;
        color: #143461 ;
}


form#search {
        background: #888;
        border-radius:12px;
        text-align: left;
        padding: 6px;
        color: #143461 ;
}


div#project_form table   {
        /* background: LightSteelBlue; */
        border-radius:10px;
        padding: 10px;
        margin: 10px;
}

/* table#project_form  table {
        background: #888;
        border-radius:6px;
        text-align: left;
        padding: 10px;
        color: #143461 ;
} */

th#project_form   {
        margin: 10px;
}

table#project_form {
        /* background: #ccc; */
        border-radius: 10px;
        margin: 5px;
        padding: 5px;
        border: solid 1px black;
        text-align: left;
        width: auto;
}

div#project_form  {
        background:#FFF;
        border-radius:10px;
        padding: 10px;
}

#project_form input[type="submit"]  {
        display: block;
        color: white;
        background: #ee9f60;
        padding: 5px 5px;
        cursor: pointer;
        margin: auto;
        float: center;
        border-radius:10px;
}

#project_form input[type="submit"]:hover {
        background: #143461;
        color: white;
}


#project_form select {
        width: 100%;
}

#project_form  td {
        padding: 5px;
        text-align: left;
}

#project_form th {
        background: #ee9f60;
        border: 1px solid black;
        color: white;
}

table#infotable {
        border-radius:20px;
        padding: 10px;
        margin: 10px;
}


table#project_form th {
        background: #ee9f60;
        border: 1px solid black;
        border-radius:6px;
        color: whitesmoke;
        font-weight: 100;
        /* 	text-align: right; */
}

form#page_len   {
        margin: 5px;
        color: white;
        background: #ee9f60; /* 143461 */
        border: none; /* solid 1px blue;  */
        padding: 5px;
        border-radius: 5px;
}

input[type="text"]#page_len   {
        width: 3em; height: 1em;
        color: 143461;
        background: white;
        border: none; /* solid 1px blue;  */
        border-radius: 2px;
        padding: 2px 2px;
}

div#meeting table   {
        background: LightSteelBlue;
        border-radius:10px;
        padding: 10px;
}

table#meeting  table {
        background: #888;
        border-radius:6px;
        text-align: left;
        padding: 10px;
        color: #143461 ;
}

table#meeting {
        background: #ccc;
        border-radius:20px;
        padding: 10px;

}

td#meeting  td {
        padding: 10px;
        text-align: left;
        border-radius:10px;
}

table#meeting th {
        background: #ee9f60;
        border-radius: 15px;
        color: white;
        padding: 10px;
}


.page_bg  {
        width: 100%;
        background: #eeeeee;
        border-radius: 20px;
        padding: 10px;
}

body {
        background: #eef;
        border-radius: 20px;
        padding: 10px;
}

/*
@keyframes breathe {
        from { stroke-width: 10; }
        to { stroke-width: 60; }
}

@keyframes pulse {
        from { r: 1; }
        to { r: 10%; }

}
*/

/* svg circle:hover  {
        stroke-width: 5px;
        /* fill: white; */
        /* opacity: ; */
        /* transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); */ /* easeInOutBack */
        /* z-index: +1; */
        /* animation: pulse 0.5s cubic-bezier(0.840, -0.360, 0.560, 1.580); */ /* http://matthewlein.com/ceaser/ */ 
/*} */

/* svg line:hover   {
        opacity: 1.0;
        /* stroke-width: */
        /* animation: breathe 2s ease infinite; */
/*        transition: fill 1s ease-out;
        z-index: 100;

}*/

/*
svg {
        border: solid white 1px;
        margin: none;
        object-fill: contain;
        width: 100%;
        height: auto;
}
*/
/* GENERAL STYLES */

/*
body {
background-color: #bad0b8;
background-image: -webkit-linear-gradient(left, #2ba7b1, #bad0b8);
background-image: -moz-linear-gradient(left, #2ba7b1, #bad0b8);
background-image: -o-linear-gradient(left, #2ba7b1, #bad0b8);
background-image: -ms-linear-gradient(left, #2ba7b1, #bad0b8);
background-image: linear-gradient(left, #2ba7b1, #bad0b8);
}

        #daynight body {
        background-color: #bad0b8;
        background-image: -webkit-linear-gradient(left, #2ba7b1, #bad0b8);
        background-image: -moz-linear-gradient(left, #2ba7b1, #bad0b8);
        background-image: -o-linear-gradient(left, #2ba7b1, #bad0b8);
        background-image: -ms-linear-gradient(left, #2ba7b1, #bad0b8);
        background-image: linear-gradient(left, #2ba7b1, #bad0b8);
}
 */
#grad {
        background-image: -webkit-linear-gradient(left, #444, #777, #555 );
}

table#searchresults {
        background-color: #111;
        color:lightseagreen;
        font-family:Arial;
        font-size: 12pt;
        /* border-radius: 10px; */
        padding: 10px;
        margin: 10px;
}

div#search {
        background: #ddd;
        margin: 10px;
        padding: 5px;
        /* border-radius: 10px; */
        width: 240px;
}


#searchform  {
        background: #ee9f60;
        /* border-radius: 15px; */
        color: white;
        padding: 10px;
        /* 	text-align: right; */
}


#booking_notice {
        color: red;
        background: Lightsteelblue;
        padding: 10px;
        border-radius: 10px;
}


#quicket_notice {
        color: #FF0F0F;
        font-weight: 500;
        background: Lightsteelblue;
        padding: 10px;
        width: 80%;
        text-align: right;
        border-radius: 10px;
}


#person_detail_form a.button  {

        vertical-align: top;
        background: #ccc;
        color: #143461;
        padding: 10px;
        margin: auto;
        text-align: center;
}


.searchbutton {
        padding: 0px;
        margin: 0;
        width: 180px;
        height: 20px;
        line-height: 80%;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        background: #eee;
}


#searchform  {
        background: #ee9f60; /*#94b4e1;*/
        /* border-radius: 15px; */
        padding: 6px;
}


*{
        margin:0px;
        padding:0px;
}

html{
        background:#dddddd;/* #94b4e1;*/
        padding: 10px;
}

.wrapper {
        margin: 3px;
        padding: 3px;
        /* width: 600px; */
}

.toggle_radio{
        position: relative;
        background: rgba(255,255,255,.3);
        margin: auto;
        overflow: hidden;
        padding: 0 !important;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        position: relative;
        height: 20px;
        vertical-align: middle;
}
.toggle_radio > * {
        float: left;
}

.toggle_radio input[type=radio] {
        display: none;
        vertical-align: top;
        background: #ccc;
        color: #143461;
        padding: 10px;
        margin: auto;
        text-align: center;
        /*
        text-align: right;
         */
}


.searchbutton {
        padding: 0px;
        margin: 0;
        width: 180px;
        height: 20px;
        line-height: 80%;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        background: #eee;
}


#searchform  {
        background:#ee9f60;/* #84a4d1;*/ /*#94b4e1;*/
        /* border-radius: 15px; */
        padding: 6px;
}


*{
        margin:0px;
        padding:0px;
}

html{
        background:#ee9f60;/* #94b4e1;*/
        padding: 10px;
}

.wrapper {
        margin: 3px;
        padding: 3px;
        /* width: 600px; */
}

.toggle_radio{
        position: relative;
        background: rgba(255,255,255,.3);
        margin: auto;
        overflow: hidden;
        padding: 0 !important;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        position: relative;
        height: 20px;
        vertical-align: middle;
}
.toggle_radio > * {
        float: left;
}

.toggle_radio input[type=radio] {
        display: none;
}


.toggle_radio input[type=radio]:checked {
        z-index: 10;
        background: white;
        position: fixed;
}

.toggle_radio label{
        /* font-weight: bold; *//* 90%/1.618 "Source Sans Pro"; */
        /* background: #EEE;  */
        padding: 2px;
        background: rgba(255,255,255,0.5);
        text-align: center;
        color: rgba(0,0,0,.9);
        z-index: 0;
        display: block;
        width: 40px; /* radiobutton width */
        height: auto;
        margin: 0px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        cursor: pointer;
        z-index: 1;
        /*margin: 0 2px;*/
        /* LightSteelBlue;*/  /*make it blue*/
}


.toggle_option_slider{
        /*display: none;*/
        /*background: red;*/
        width: 40px; /* slider=radiobutton */
        height: 20px;
        position: absolute;
        top: 3px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
}

input:checked + label {
        font-weight: bold;
        background: rgba(255,255,255,1);
        /* left: 605px; */
}


span .option_label {
        padding: 3px;
        vertical-align: text-bottom;
}

span input[type=radio]:checked {
        background: red;
}

input#id_search {
        border-radius: 10px;
        padding-left: 5px;
}

#page-links  {
        width: auto;
}

#page-button {
        border-radius: 20px;
        width: 30px;
        background: white;
}

.pagination table {
        background: white;
        border-radius: 10px;
        text-align: center;
}

.userjobs {
        /* background:#999; */
        width:100%;
        padding:5px;
}

/*select.yellow_bg {
background-color : #FFFFA7;
}

        input.yellow_bg {
        background-color : #FFFFA7;
} */

div.agreement {
        background: #EEE;
        font-size: 16pt;
        line-height: 2em;
}

:required  {
        background: mistyrose;
        border: 2px red solid;
}

input.error_bg, select.error_bg {
        /* background: deeppink; */
        border: 2px red solid;
}

/*input.errorlist, select.errorlist {
border: 2px red solid;
}
 */

ul.errorlist + * {
        background: mistyrose;
        background-color: mistyrose;
        border: 2px red solid;
}

input#savebutton  {
        background: orange;
        width: 100px; height:100px;
        border-radius: 50px;
        float: center;
}


span.error_message {
        color: red;
        font-weight: bold;
}

span.error_message:before {
        content: "\25c0" ;
        text-shadow:  1px 2px 2px #AAAAAA;
        width: 2em;
}

div.error_field > input{
        /* box-shadow: 0 0  4px 4px #888;*/
        background: mistyrose;
}

div.error_field > textarea {
        background: mistyrose;
}

div.error_field > select  {
        background: mistyrose;
}

* select {
        width: auto;
}

.menu-v li.no-link a:hover {
        background: white;
}

ul.menu-v li.no-link a {
        background: white;
        color: black;
        font: bold;
  }

  div#status {
          float: right;
          background: whitesmoke;
          color: #111;
}

a.sort_arrows {
        color: whitesmoke;
}

div#chpclinks  {
        background-color: LightSteelBlue;
        color: white;
        border-radius: 20px;
        padding: 0 0 10px 20px;  /* top right bottom left */
}


div#loginform {
        /* border-radius: 0px; */
        padding: 0;
        margin: auto;
        /* display: inline-block; */
        width: 230px;

        margin-left: auto ;
        margin-right: auto ;

        /* text-align: center; */
        /* left: 25%;
        top: 0%; */
/*              transform: translate( 15%, 100%) ; */
/* position: relative; */
/* float: center; */
}


div#attention {
        background: whitesmoke;
        /* color:white; */
        border-radius: 20px;
        padding: 20px;
        width: 80%;
        text-align: justify;
        margin-left: auto ;
        margin-right: auto ;
        /* left: 15%;
        top: 10%; */
/* transform: translate( 15%, 100%) ; */
position: relative;
}

div.summary {
        background: Silver;
        color:black;
        border-radius: 15px;
        padding: 5px;
        width: 95%;
        text-align: justify;
        margin-left: auto;
        margin-right: auto;
        position: relative;
}

div#funding {
        background: whitesmoke;
        /*  color:white; */
        border-radius: 20px;
        padding: 15px;
        width: 70%;
        margin: 20px;
        line-height: 1.8em;
        margin-left: auto ;
        margin-right: auto ;

        text-align: justify;
        /* left: 15%;
        top: 10%; */
position: relative;
}


div#specific_procedures {
        background: LightSteelBlue;
        /* color:white; */
        border-radius: 20px; padding: 30px;
        /* width: 60%; */
        text-align: justify;
        /*left: 15%;
        top: 10%; */
position: relative;
}

div.details div {
        line-height: 1.5em;
 }

 div.category {
         background: LightGray;
         border-radius: 15px;
         padding: 10px;
 }


 div.summary {
         background: #A8A8A8;
         /* color:white; */
         border-radius: 20px; padding: 15px;
         width: 60%;
         text-align: justify;
         /*left: 15%;
         top: 10%; */
position: relative;
}

/* summary slider form styling */

input[type="range"]{
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -webkit-range-progress{background-color: #5082e0;} ;
    -moz-range-track {   background-color: #5082e0;} ;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
   width:30px;
   height:15px;
   background: #6677ff;
   border-radius: 8px;
   cursor: -moz-grab;
   cursor: -webkit-grab;
}



input[type="range"]::-moz-range-thumb{
   width:30px;
   height:15px;
   background: #6677ff;
   border-radius: 8px;
   cursor: -moz-grab;
   cursor: -webkit-grab;
}

input[type=range]::-moz-range-track {
/*     width: 720px; */
    height: 15px;
     background: whitesmoke; 
    border: 1px solid black;
    border-radius: 8px;
}



.thumbwidth20  input[type=range]::-webkit-slider-thumb {
   width: {{ thumbwidth }}px;
} 

.thumbwidth60 input[type=range]::-webkit-slider-thumb {
   width: 60px;
}

.thumbwidth200 input[type=range]::-webkit-slider-thumb {
   width: 200px;
}

.thumbwidth20 input[type=range]::-moz-range-thumb {
   width: {{ thumbwidth }}px;
}

.thumbwidth60 input[type=range]::-moz-range-thumb {
   width: 60px;
}

.thumbwidth200 input[type=range]::-moz-range-thumb {
   width: 200px;
}


input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-webkit-slider-runnable-track {
    background: whitesmoke;
    border-radius: 8px;
    border: solid black 1px;
}


input[type=range]:focus::-moz-range-track {
    border: solid black 1px;  
} 

/*input[type=range]::-moz-range-progress {
  background-color: #6677ff;
  height: 15px; 
}
 */