﻿body, h1, h2, h3, h4, h5 {
    /*font-family: 'Myriad Pro', sans-serif;*/
    color: inherit;
    
}
body {
    font-size: 1.15em;
}

@media (max-width: 899px){
    body {
    font-size: 1em;
}

}

h1 {
    font-size: 160%;
    font-weight: 700;
}

h2 {
    font-size: 135%;
    
}
h3 {
    font-size: 110%;
}

a {
    color: #036396;
    font-weight: 600;
    /*border-bottom: 2px dotted;*/
    /*text-decoration: #FFCE00 underline;*/
    background-color: transparent;
}

.nodot a {
    border-bottom: none;
    text-decoration: none;
}

.row{
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 8px;
    padding-top: 5px;
}

.panel-default > .panel-heading {
    background-color: #0375B4;
    color: #fff;
    text-decoration: none;
     margin-bottom: 0px;
   /* border-bottom: 2px solid #e0e0e0; */
}

.panel-default > .panel-heading a{
    font-size: 70%;
    color: #fff;
    text-decoration: none;
  
}

.panel-heading:hover {
  background-color: rgba(0, 120, 73, 0.8) !important;
}

.panel-body{
    /* border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0; */
    padding: 3px 7px;
}





.style2 { /*gray secondary section*/
    background-color: #F7F9FB;
    color: #000;
    padding-top: 15px;
    border-bottom: 20px double #0375B4;
    border-top: 6px solid #FFCE00;
    padding-bottom: 20px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.style2 h3 {
    /* border-top: 1px solid #e0e0e0; */
    color: #fff;
    font-size: 1em;
    letter-spacing: -0.025em;
    padding: 3px 5px 7px 5px;
    margin: 0px 0px 2px 0px;
    /* margin: 0.75em 0 0;*/
    /* padding: 0.5em 0 0;  */
    position: relative;
    /* top: -0.5em; */
}

.style3 {/*for breaking up panels*/
    
    color: #000;
    padding-top: 15px;
    border-bottom: 20px double #0375B4;
    border-top: 6px solid #FFCE00;
    padding-bottom: 20px;
    
    

}
.style3faq {/*use inside of accordions*/
    color: #000;
    padding-top: 15px;
    border-top: 6px solid #FFCE00;
    padding-bottom: 20px;   
}

.style4 {/*tan color for submenus*/
    background-color: #F3F1EC;
    color: #000;
    padding: 10px 20px;
    border: 5px solid #336B80;


}

.style4 a {
    color: #065C69;
}

@media (min-width: 1181px) {
    h1.highlight {
        color: #065C69;
        /*background-color: #D6D5B8/*#efefef*/
        font-size: 2.5em;
        /*letter-spacing: -0.025em;*/
        margin: 0.25em 0 0.15em 0;
        padding: 0.35em;
        position: relative;
        top: -0.5em;
        font-weight: 800;
        border-bottom: 2px double #065C69;
        border-radius: 2px;
        text-align: left;
    }
}

@media (max-width: 1180px)  {
    h1.highlight {
    color: #065C69;
    /*background-color: #D6D5B8/*#efefef*/
    font-size: 1.75em;
    /*letter-spacing: -0.025em;*/
    margin: 0.75em 0 0.15em 0;
    padding: 0.35em;
    position: relative;
    top: -0.5em;
    font-weight:800;
    border-bottom: 2px double #065C69;
    border-radius: 2px;
    text-align: left;
    
}
}

h2.highlight {
  
    font-size: 120%/*1.25em*/;
    /*letter-spacing: -0.025em;*/
    margin: 0.75em 0 0.15em 0;
    padding: 0.3em .5em 0.2em 0;
    position: relative;
    top: -0.5em;
    font-weight:700;
    
    

}

h2.highlight2 {
    color: #fff;
     background-color: #297557;
    
    /*letter-spacing: -0.025em;*/
    margin: 1em 0 0.15em 0;
    padding: 0.3em .5em 0.2em;
    position: relative;
    top: -0.5em;
    font-weight:600;
    border-bottom: 2px solid #FFCE00;
    

}


h3.highlight {
    color: #000;
     background-color: #FFCE00;
    font-size: 110%/*1.25em*/;
    /*letter-spacing: -0.025em;*/
    margin: 0.75em 0 0.15em 0;
    padding: 0.3em .5em 0.2em 0;
    position: relative;
    top: -0.5em;
    font-weight:600;
    border-bottom: 2px solid #0375B4;
    

}



h3.highlight2 {
    color: #fff;
     background-color: #297557;
    font-size: 110%/*1.25em*/;
    /*letter-spacing: -0.025em;*/
    margin: 0.75em 0 0.15em 0;
    padding: 0.3em .5em 0.2em;
    position: relative;
    top: -0.5em;
    font-weight:600;
    border-bottom: 2px solid #FFCE00;
    

}




/*FOOTER*/

.footer {
    background-color: #007849;
			/*background-image: url("images/bg02.png"), url("images/bg03.png"), url("images/bg01.png");
			background-position: top left,						bottom left,					top left;
			background-size: 100% 6em,						100% 6em,						auto;
			background-repeat: no-repeat,						no-repeat,						repeat;*/
            color: #fff;
            padding: 7px 1px;
			/*text-align: center;*/
            /*margin-top: 1em;*/
            font-size: 0.85em;
            border-top: 15px double #FFCE00;
          
}

hr.footer {
 margin-top: 0px;
  margin-bottom: 10px;
  border: 0;
  border-top: 5px solid #F7F9FB;
}

.footer a, .footer a:visited {
color:#fff;
/*text-decoration: underline dotted;*/
background: none;
border: none;
padding: 2px;
transition: none;
border-radius: 2px;
}

.footer a:hover {
color: #FFCE00;
text-decoration: none;
background: #0375B4;
padding: 2px;
border: none;
transition: none;
border-radius: 2px;
}


.footer2 {
    background-color: #fff;
			/*background-image: url("images/bg02.png"), url("images/bg03.png"), url("images/bg01.png");
			background-position: top left,						bottom left,					top left;
			background-size: 100% 6em,						100% 6em,						auto;
			background-repeat: no-repeat,						no-repeat,						repeat;*/
            color: #000;
            /*padding: 15px 1px;*/
			text-align: center;
            padding: 1px 2px;
          
}

.footer3 {
    background-color: #0375B4;

            color: #FFF;
         
			text-align: center;
            padding: 1px 2px;
          
}

h4.footer {
    font-size: 0.85em;
background: none;
color: #ffffff;

}




hr.footer2 {
 margin-top: 0px;
  margin-bottom: 10px;
  border: 0;
  border-top: 5px solid #F7F9FB;
}

.footer2 a, .footer2 a:visited {
color:#fff;
text-decoration: underline dotted;
background: none;
border: none;
padding: 2px;
transition: none;
}

.footer2 a:hover {
color:#000;
text-decoration: none;
background: #fff;
padding: 2px;
border: none;
transition: none;
border-radius: 2px;
}

h4.footer2 {
text-decoration: underline;
}

/*.footerreturn a, .footerreturn a:visited {
color:#fff;
text-decoration: underline dotted;
background: #F7F9FB;
border: none;
padding: 2px;
transition: none;
border-radius: 2px;
}

.footerreturn a:hover {
color:#F7F9FB;
text-decoration: none;
background: #fff;
padding: 2px;
border: none;
transition: none;
border-radius: 2px;
}
*/

/* Youtube Video Embedding code */

.videoWrapperOuter {
  max-width:640px; 
  margin-left:auto;
  margin-right:auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*****EXTERNAL and APP LINK ICONS**********************************************************EXTERNAL and APP LINK ICONS**********************************************EXTERNAL and APP LINK ICONS***********************/


/* Add Icon to external links */
a[href^="https://"]:before,
a[href^="https://"]:before,
/*a[href$='.asp']:before,*/ /*For some reason, .asp and .aspx need their own declaration of rules*/
a[href$='.aspx']:before{
  content: url('../images/icons/global_sm.png');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  
}

/*Removes external link from in front of app links of pdf, word, excel, ppt ---- focuses on type of file instead
Also removes from VITA Banner
*/
a[href^="https://www.virginia.gov"]:before,
a[href$='.pdf']::before,
a[href$='.doc']::before,
a[href$='.docx']::before,
a[href$='.xls']::before,
a[href$='.xlsx']::before,
a[href$='.ppt']::before,
a[href$='.pptx']::before,
a[href$='.wmv']::before { 
  content: none;
}



/*Add PDF icon to any link that ends in .pdf*/
a[href$='.pdf']::after { 
  content: url('../images/icons/pdf.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: top;
}


/*Add Word icon to any link that ends in .doc, .docx*/
a[href$='.doc']::after,
a[href$='.docx']::after { 
  content: url('../images/icons/doc.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}

/*Add Excel icon to any link that ends in .xls, .xlsx*/
a[href$='.xls']::after,
a[href$='.xlsx']::after { 
  content: url('../images/icons/xls.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}

/*Add PPT icon to any link that ends in .ppt, .pptx*/
a[href$='.ppt']::after,
a[href$='.pptx']::after,
a[href$='.pps']::after { 
  content: url('../images/icons/ppt.gif');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}

/*Add Movie icon to any link that ends in .wmv*/
a[href$='.wmv']::after { 
  content: url('../images/icons/wmv.png');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}


/* Add Icon to email links */
a[href^=mailto]::before {
    content: url('../images/icons/mail_sm.png');
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    padding-right: 1px;
    padding-bottom: 5px;
    vertical-align:middle;

}

/* Add class to remove external link icon - currently used for footer and google directions link in VABOARD*/
.noext a[href^="https://"]:before,
.noext a[href^="https://"]:before{
    content: none;
}

/* Add class to remove PDF icon - currently used for footer*/
.noPDF a[href$='.pdf']::after { 
    content: none;
}

/* Add class to external links in menu. items need class="menuexit" added in the nav.htm include ONLY on text <li> that leave site NOT on images*/
.menuexit a[href^="https://"]:after,
.menuexit a[href^="https://"]:after {
  content: url('../images/icons/right-arrow15.png');
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
}


/*Formatting below is ONLY to be used in UL for large lists - need to add class to UL of "iconlist"* - Example: vaboard.org/links.htm ---- Need to double-check for hard-coded internal links*/

ul.iconlist a[href^="https://"]:not([href*="tstdesigns"]):before, /*THIS NEEDS TO BE CHANGED BEFORE LAUNCH AND FOR STAGING TO TEST*/
ul.iconlist a[href^="https://"]:not([href*="tstdesigns"]):before{
  content: url('../images/icons/global_sm.png'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /* This overrides the main external icon to allow for alignment with list items that do NOT have icons */
}

ul.iconlist a[href$='.pdf']:not(.owl-item)::after { /*This removes the PDF from the end of a line ONLY in the UL with class "ext"*/
    content: none;
}

ul.iconlist a[href$='.pdf']:not(.owl-item)::before {
  content: url('../images/icons/pdfList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}

ul.iconlist a[href$='.doc']:not(.owl-item)::after,
ul.iconlist a[href$='.docx']:not(.owl-item)::after
{ /*This removes the doc from the end of a line ONLY in the UL with class "ext"*/
  content: none;
  
}

ul.iconlist a[href$='.doc']:not(.owl-item)::before,
 ul.iconlist a[href$='.docx']:not(.owl-item)::before
{
  content: url('../images/icons/docList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}



ul.iconlist a[href$='.xls']:not(.owl-item)::after,
ul.iconlist a[href$='.xlsx']:not(.owl-item)::after,
{ /*This removes the xls from the end of a line ONLY in the UL with class "ext"*/
    content: none;
}

ul.iconlist a[href$='.xls']:not(.owl-item)::before {
  content: url('../images/icons/xlsList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}


ul.iconlist a[href$='.ppt']:not(.owl-item)::after,
ul.iconlist a[href$='.pptx']:not(.owl-item)::after,
{ /*This removes the ppt from the end of a line ONLY in the UL with class "ext"*/
    content: none;
}

ul.iconlist a[href$='.ppt']:not(.owl-item)::before {
  content: url('../images/icons/pptList.gif'); /*icon is 20x20, canvas is 25 wide, with icon left aligned*/
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  padding-left: 5px;
  vertical-align: middle;
  margin-left: -30px; /*Keeps icons and items without icon left-justified*/
  line-height: 20px; /*Keeps line spacing even if there is no icon*/
  
}





ul.pList {
    margin-bottom: /*10px*/0px;
    margin-top: 0;
    line-height:30px;
}



/*FANCY NAV/Header*/

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  /*margin: 0 auto -225px;*/
  /* Pad bottom by footer height */
  /*padding: 0 0 225px;*/
  margin-top: -30px;
}


/* Set the fixed height of the footer here */
#footer {
  /*height: 225px;*/
  background-color: #eeecec;
  margin-top:10px;
  padding-top:20px;
  padding-bottom:20px;
  color: #000;
  
}

    #footer h3 {
        background-color: rgb(107,201,202);
    padding: 3px;
    color: #000;
    border-bottom: 3px solid RGB(153, 204, 102);
    font-size: 1.5em;
    text-align:center;
}


  






.imgleft {
    float: left;
    margin-bottom: 0.5%;
    margin-right: 10px;
}


.imgright {
    float: right;
    margin-bottom: 0.5%;
    margin-left: 10px;
}




/*BREADCRUMB EDITS*/
/*change breadcrumb background color*/
.breadcrumb {
     background-color: rgb(250, 250, 250);
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     -o-border-radius: 0;
     
     padding: 2px 5px;
}
    .breadcrumb li {
        font-size: 1em;
}

.breadcrumb>li+li:before {
    content: "/\00a0";
    padding: 0 5px;
    color: #ccc;
}

/*change breadcrumb links color*/
.breadcrumb a {
     color: #666;
     border-radius: 5px;
     font-size: 1em;
     padding: 1px;
}

.breadcrumb a:hover {
     text-decoration: none;
     background-color: #FFCE00;
     color: #000;
     padding: 1px;
}

/*change active color*/
.breadcrumb > .active {
     color: #036396;
     font-weight:600;
     font-size: 1em;
     padding: 1px;


}



/**********ICON LIST FORMATTING*****************/

.iconlist {
    list-style-type:none; 
    line-height: 20px;
}






/****CUSTOM ICONS FOR ACCORDION --- copy script found on vaboard.org/policymaking.htm*/
.your-icon {
    position: relative;
    /*top: 1px;*/
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1px;
    float: left;
    margin-right: 5px;
    display: block; /* This is required */
}

.your-icon.arrowdown {
    background: url('../images/icons/arrow-down.png');
    background-size: cover;
    margin-top: 5px;
    margin-left: 5px;
}

.your-icon.arrowup {
    background: url('../images/icons/arrow-up.png');
    background-size: cover;
     margin-top: 5px;
    margin-left: 5px;
}

.your-icon.normal {
    width: 32px;
    height: 32px;
}

.your-icon.small {
    width: 20px;
    height: 20px;
}

.your-icon.medium {
    width: 64px;
    height: 64px;
}

.your-icon.large {
    width: 128px;
    height: 128px;
}



.panel-primary>.panel-heading{
	background-color: #0375B4;
}

.panel-title {
    padding: 3px 5px 7px 5px;
    margin: 0px 0px 2px 0px;
    font-size: 1.2em !important;
    color: inherit;
}
.panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a{
	font-size: 85%;
    color: #fff;
}

.panel-title a:hover {
    text-decoration: none;
}

ul.square{list-style-type: square;
          color: inherit;
}
.panel-preview {
    height: 350px;
    overflow: auto;
}

.btn-read{
    color: #fff;
    background-color: #007849;
    border-color: #FFCE00;
    margin-bottom:10px;
}

.btn-read:hover{
    color: #262228;
    font-weight: 600;
    background-color: #FFCE00;
    border-color: #FFCE00;
}
.btn-read:focus{
    color: #fff;
    
    background-color: #0375B4;
    border-color: #FFCE00;
}


.accordion-option .toggle-accordion {
  float: right;

}

.accordion-option .toggle-accordion:before {
  content: "Collapse All";
}

.accordion-option .toggle-accordion.active:before {
  content: "Expand All";
}

.btn-acc{
    color: #262228;
    background-color: #FFCE00;
    border-color: #FFCE00;
}

.btn-acc:focus, .btn-acc:hover{
    color: #fff;
    background-color: #007849;
    border-color: #FFCE00;
}

.questioncard{
    background-color: #0375B4;
    color: #fff;
    font-weight: 600;
    
}

.questionHF{
    font-weight: 600;
    text-align: center;
    border: 3px solid #0375B4;
}

