/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-v30-latin/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('/fonts/roboto-v30-latin/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/roboto-v30-latin/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/roboto-v30-latin/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/roboto-v30-latin/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
html{overflow-x:hidden}
body{margin:0;font-family:Verdana,sans-serif;font-size:15px;line-height:1.5;color:#000!important;background-color:#f1f1f1!important}
.mitra-pagecontainer{max-width:1400px;margin:auto;margin-top:16px!important}
.mitra-grid{padding:0 8px}
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
.mitra-grid:after,.mitra-grid:before{content:"";display:table;clear:both}
/* On home page navigation is 33%, inside category its 20%, on smaller screens they are one above the other */
/* See CategoryListOrItem.renderAndReplace and */
/** Deal with relative widths of left (mitra-third) and right (mitra-twothird) in different contexts */
/* On Mobiles */
.mitra-third,.mitra-twothird{float:left;width:100%;padding:0 8px}
.category .topmenu, .item .topmenu{display: none}
.mitra-third .mitra-display-container img {width:20%}
.mitra-imagecaption{position:absolute;left:20%;bottom:0;padding:0.01em 16px;color:#757575!important}
.mitra-imagecaption a{text-decoration: none; color: #757575!important}
/* TODO mobiles - shrink main image, place name to its right, and remove menu */
/* On Desktop - front page */
@media (min-width:601px){
    .mitra-third{width:33.33333%}.mitra-twothird{width:66.66666%}
    .mitra-third .mitra-display-container img {width:100%}
    .mitra-imagecaption{color:#FFFFFF!important}
    .mitra-imagecaption a{text-decoration: none; color: #FFFFFF!important}
}
/* On Desktop - other pages */
@media (min-width:601px){
    .category .mitra-third, .item .mitra-third {width:20%} .category .mitra-twothird, .item .mitra-twothird {width:80%}
}
@media (min-width:601px){.category .topmenu, .item .topmenu{display: block}}
/** End of Deal with relative widths of left and Right */
/* Which parts of display are only shown on home page, or only on others */
/* Importantly toponly will not be displayed during loading of page as "top" now set as it renders category-listoritem */
.category .toponly, .item .toponly, .loading .toponly{display:none}
.top .nottop{display:none}
.mitra-card{background-color:#fff!important;color:#757575!important;box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.mitra-display-container{position:relative}
.mitra-display-container:hover{display:block}
/* Next also in OneCategoryOnContentPageStyle in webcomponents.js */
.mitra-card2:after,.mitra-card2:before,.mitra-imagecaption:after,.mitra-imagecaption:before{content:"";display:table;clear:both}
/* End of those in OneCategoryOnContentPageStyle */
.mitra-card-brief-line{margin-right:16px!important;font-size:18px!important;color:#009688!important}
/* Next also in OneCategoryOnContentPageStyle in webcomponents.js */
.mitra-card2{padding:0.01em 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    color:#000!important;background-color:#fff!important;margin-bottom:16px!important}
.mitra-card2-head{color:#757575!important;padding-top:16px!important;padding-bottom:16px!important}
/* End of those in OneCategoryOnContentPageStyle */
.mitra-card2-head2{opacity:0.60;font-size:18px} /* Pick up size from default for h5*/
.mitra-card2-subhead2{color:#009688!important}
/* Next also in OneCategoryOnContentPageStyle in webcomponents.js */
.mitra-xxlarge-icon{margin-right:16px!important;font-size:36px!important;color:#009688!important}
.mitra-container{padding:0.01em 16px}
.mitra-footer:after,.mitra-footer:before,.mitra-container:after,.mitra-container:before{content:"";display:table;clear:both}
/* End of those in OneCategoryOnContentPageStyle */
.mitra-footer{padding:0.01em 16px;color:#fff!important;background-color:#009688!important;text-align:center!important;margin-top:16px!important}
.mitra-socialmedia:hover{opacity:0.60}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
h1,h2,h3,h4,h5,h6,.mitra-card2-head2{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
.mitra-card2-icon2{margin-right:16px!important}
.mitra-card2-subhead2-round{display:inline-block;padding-left:8px;padding-right:8px;text-align:center;
    color:#fff!important;background-color:#009688!important;border-radius:4px}
/* Next also in OneCategoryOnContentPageStyle in webcomponents.js */
.mitra-container div.hoveronly, .mitra-container span.hoveronly,.mitra-container i.hoveronly{display: none}
.mitra-container:active span.hoveronly,.mitra-container:active span.hoveronly,.mitra-container:hover span.hoveronly{display: inline}
.mitra-container:active i.hoveronly,.mitra-container:focus i.hoveronly,.mitra-container:hover i.hoveronly{display: inline-block}
.mitra-container:active div.hoveronly,.mitra-container:focus div.hoveronly,.mitra-container:hover div.hoveronly{display: block}
.mitra-container span.hoverclue{display: inline}
.mitra-container:active .hoverclue,.mitra-container:focus .hoverclue,.mitra-container:hover .hoverclue{display: none}
/* End of those in OneCategoryOnContentPageStyle */


.mitra-card2 .date{font-size: smaller; text-align: right}
.manyentries .onecategory .link{vertical-align: top}
.manyentries .onecategory .title{vertical-align: top}
.manyentries .onecategory .decription{vertical-align: top}
.manyentries .more{margin-bottom:15px}
.mitra-card2 .keys{font-style: italic; font-size: smaller}

/* Came from naturalinovation.org/templates/rhuk_milkyway/css/mitra.css */
/* TODO also check all elements on templates/rhuk_milkyway/css/*, probably not needed */
/* TODO - some of these, esp div.w480h289  will be replaced by video tag, run through and see if used */

/* Allow easy setting of style for img's inside stories */
/* TODO moving storyimage into webcomponents */
img.storyimagesmall, img.storyleadvert, img.storyimagevert, img.storylead, img.storyimage { border: 1px solid #996600;  margin: 0px 5px 5px 5px ; float: right; }
img.teamimage { border: 1px solid #996600;  margin: 0px 5px 5px 0px ; float: left; width: 20%; }
img.categoryimage { width: 46%; margin: 0px 10px 5px 5% ; float: right; }
/*#give an image a standard class and then overwrite */
img.storylead { width:66%; }
img.storyimage { width:50%; }
img.storyimagesmall { width: 33%; }
img.storyleadvert { width:38%; }
img.storyimagevert { width:38%; }

@media print {
    img.storylead { width:33%; }
    img.storyimage { width:33%; }
}
/* Use this to insert quoted HTML */
div.quote { padding-left: 30px;  border-left: 1px solid #CCC; }

/* experiment not fixed yet */
.boxleft, .boxright {
    width: 19em;
    color: #444444;
    background-color: #EEEEEE;
    margin: 10px;
    border-top: 1px solid #996600;
    border-right: 1px solid #996600;
    border-left: 1px solid #996600;
    border-bottom: 1px solid #996600;
    padding: 1em;
}
.boxright {
    float: right;
    clear: right;
}
.boxleft {
    float: left;
    clear: left;
}