/* Define font families */

/*
@font-face {
    font-family: 'InfusionIcons';
    src: url('../js/infusion/fonts/InfusionIcons-UIOptions.ttf'),
         url('../js/infusion/fonts/InfusionIcons-UIOptions.eot');
}

@font-face {
  font-family: Lato;
  src: url('../js/infusion/fonts/Lato-Regular.ttf');
}

@font-face {
  font-family: LatoLight;
  src: url('../js/infusion/fonts/Lato-Light.ttf');
}

@font-face {
  font-family: LatoLightItalic;
  src: url('../js/infusion/fonts/Lato-LightItalic.ttf');
}
@font-face {
  font-family: LatoBlack;
  src: url('../js/infusion/fonts/Lato-Black.ttf');
}
@font-face {
  font-family: LatoRegular;
  src: url('../js/infusion/fonts/Lato-Regular.ttf');
}
*/
/*
@font-face {
  font-family: LoveYaLikeASister;
  src: url(../js/infusion/fonts/LoveYaLikeASister.ttf);
}
*/

body {
    font-family: Helvetica, Tahoma, Verdana, sans-serif;
}
img {
    margin-bottom: 10px;
}
.content h2 {
    margin-bottom: 0.5em;
    font-weight: normal;
    font-size: 1.6em;
}
.header,
.instructions {
    font-size: 1.3em;
}
.header h1 {
    font-family: LoveYaLikeASister, "Courier New, Courier", monospace;
    font-size: 3em;
    margin-bottom: 20px;
}
.header .tagline {
    font-family: LatoLightItalic, Helvetica, Tahoma, Verdana, sans-serif;
    font-size: 1.3em;
    font-style: italic;
}
.header .disp-pref {
    font-weight: bold;
}
.instructions h2 {
    font-family: LatoBlack, Helvetica, Tahoma, Verdana, sans-serif;
    font-weight: normal;
    margin-bottom: 0.5em;
}
.instructions ol {
    margin-left: 1.5em;
    margin-top: 0px;
}
.instructions li {
    font-size: 1.25em;
    margin-bottom: 1em;
}
.instructions .instruction-comment {
    font-size: 0.8em;
}
.disp-opts-buttons {
    margin-top: 40px;
}
.disp-opts-button-container {
    padding: 10px;
    margin-top: 15px;
    padding-right: 25px;
}
.disp-opts-button {
    font-family: "Myriad Pro", Helvetica, Tahoma, Verdana, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    padding-right: 25px;
    border-style: none none;
    padding-left: 0;
}
.disp-opts-button a {
    text-decoration: none;
}
.disp-opts-button .preview {
    font-size: 0.8em;
    font-weight: normal;
}
.content {
    margin-top: 1em;
    padding: 10px 0;
    border-top: dashed 1px #426088;
}
.feedback-form input,
.feedback-form textarea {
    width: 95%;
    padding: 5px;
    margin: 5px 0 10px 0;
}
.feedback-form textarea {
    height: 8em;
}
.feedback-form label {
    font-family: LatoRegular, Helvetica, Tahoma, Verdana, sans-serif;
}
.feedback-form .optional {
    font-style: italic;
}


/* Scoped colours for theme swapping */
/*
    Font color: #3E606F
    Button blue: #0071BC
 */
.uio-demo-theme {
    color: #222;
    background-image: url("/templates/idrc_theme/js/infusion/components/uiOptions/images/background_texture.png");
    background-position: left top;
    background-repeat: repeat;
}
.uio-demo-theme a {
    color: #3E606F;
}
.uio-demo-theme .disp-opts-button-container {
    background-color: #0071BC;
    background-image: url("/templates/idrc_theme/js/infusion/components/uiOptions/images/arrow_right.png");
    background-repeat: no-repeat;
    background-position: right; 
}
.uio-demo-theme .disp-opts-button {
    color: white;
    background-color: #0071BC;
}
.uio-demo-theme .disp-opts-button a {
    color: white;
}
.uio-demo-theme .feedback-form input,
.uio-demo-theme .feedback-form textarea {
    color: grey;
}

/* Overriding some of the default Fat Panel UI Options colours */
.uio-demo-theme .fl-uiOptions-fatPanel .fl-panelBar .fl-uio-tabs {
    background-color: #0071BC;
}
.fl-uiOptions-fatPanel .fl-panelBar button {
    font-family: "Myriad Pro", Helvetica, Tahoma, Verdana, sans-serif;
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: bold;
}

.uio-demo-theme .fl-uiOptions-fatPanel .fl-uiOptions-showHide,
.uio-demo-theme .fl-uiOptions-fatPanel .fl-uiOptions-reset  {
    background-color: #0071BC;
    color: white;
}

.uio-demo-theme .fl-uiOptions-fatPanel .fl-uiOptions-reset  {
    border-right: 1px solid #fff;
}

.fl-uiOptions-fatPanel .fl-panelBar .fl-uiOptions-reset  {
    border-right: 1px solid #fff;
}
.fl-uiOptions-fatPanel .fl-panelBar .fl-uio-tabs {
    background-color: blue;
    border-bottom: 1px solid #CCCCCC;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #CCCCCC;
    box-shadow: 2px 2px 3px 0 #6F6F6F;
    display: block;
    float: none;
    
    clear:both;
    margin-left: 55%;
    min-height: 2em;
    width:30em;
}
.uio-demo-theme .fl-uiOptions-fatPanel .fl-uiOptions-showHide, .uio-demo-theme .fl-uiOptions-fatPanel .fl-uiOptions-reset {
    background-color: #0071BC;
    color: white;
}
.fl-uiOptions-fatPanel .fl-panelBar {
    background-color: #FFFFFF;
    border-bottom: none;
    width: 100%;
}

.toc ul.flc-toc-levels-level2{
    margin-bottom:-.7em;

}
.toc ul.flc-toc-levels-level3{
    margin-top:0;
}
.toc li.flc-toc-levels-items4{

}
.toc .flc-toc-levels-link2{
    margin-top:.3em !important;
}
#left-col{
    width:17em;
    margin-right:.5em;
    max-width:340px;
}
.blog-featured{
    width:98%;
}
.fl-col-mixed-250 .fl-col-fixed {
    width: 17.5em;
    max-width:340px;
}