/*** WCAS Department specific CSS 

Core CSS file that can be modified on a departmental level.  Add any new styles (including media queries) here.

***/

/* fonts.com import for dev and live sites */

@import url("http://fast.fonts.com/cssapi/979a78f0-cea7-4c08-862e-b8a0eb9ee896.css");


/* background pattern for all secondary main page headers */
h2 { 
    background: #becc75 url('../images/blue-pattern-bg.png') repeat;
}


/* edit only the color hex code (i.e. #123456) for each rule set so that they have identical colors */
#tools ul a:hover, #top-nav li:hover a, .home-news-date, h4 {
    color: #becc75;
}
#top-nav li li a:hover { /* keep this on separate line */
    color: #becc75 !important;
}
#top-nav a.active {
    color: #becc75;
}
#page a:hover {
    color: #becc75;
}
a.home-button:hover {
    background: #becc75;
}
#top-nav ul ul, #m-nav ul, #m-tools ul, #m-search .search-form {
    border-top: 5px solid #becc75;
}
#left-nav {
    border-top: 10px solid #becc75;
}
#left-nav li li a:hover, #left-nav li li a.active {
    color: #becc75;
}
/* search button customizations */
.search-form button {
    background: #becc75;
}
.search-form button:before {
    border-color: transparent #becc75 transparent;
}
/* search button hover hex color different from rest. match color with social-media-button-on.png */
.search-form button:hover, .search-form button:active, .search-form button:focus {  
    background: #abb96a;
}
.search-form button:hover:before, .search-form button:focus:before, .search-form button:active:before {
    border-right-color: #abb96a;
} 

/* bullet customization */
#content ul li, #content-full ul li, .home-box-text ul li {
    background: url('../images/icons/bullet.png') no-repeat 0 7px;
    padding-left: 1.3em;
    padding-bottom: .5em;
}

/*footer customizations */
#footer-wrap a {
    color: #becc75;
    text-decoration: none;
}

/* social media icons in footer, uncomment what you need */
#facebook {
    background:url('../images/icons/facebook-off.png') no-repeat;
}
#facebook:hover {
    background:url('../images/icons/facebook-on.png') no-repeat;
}
#give {
    background:url('../images/icons/give-off.png') no-repeat;
}
#give:hover {
    background:url('../images/icons/give-on.png') no-repeat;
}

.clear{
 clear:both;   
}

/* Edit the program boxes */

#page #programs a, #page #programs a:hover {
    height: auto;
    color: #fff;
    padding: .5em 0 .5em .5em;
}
.program-box {
    height: auto;
    width: 100%;
    margin: 0;
    text-align: center;
} 

/* For screens larger than the tablet view */
@media (min-width: 800px) {
    #page #programs a, #page #programs a:hover {
        padding: 1.5em 1em 0 1em;
    }
    .program-box {
    /* height: 80px; */
    width: 32.16666%;
    margin: 0;
    /* word-spacing: 100px; */
    text-align: center !important;
}
    .program-box.one, .program-box.two {
        margin-right: 1.75%;
    }
}
/* Put in custom program box colors here */
.one {
    background: #89274a;
   /* background: -moz-linear-gradient(top, rgba(99,124,189,1) 0%, rgba(84,105,160,1) 50%, rgba(99,124,189,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#637cbd), color-stop(50%,#5469a0), color-stop(100%,#637cbd));
    background: -webkit-linear-gradient(top, #5469a0 0%,#637cbd 50%,#5469a0 100%);
    background: -o-linear-gradient(top, rgba(99,124,189,1) 0%, rgba(84,105,160,1) 50%, rgba(99,124,189,1) 100%);
    background: -ms-linear-gradient(top, rgba(99,124,189,1) 0%, rgba(84,105,160,1) 50%, rgba(99,124,189,1) 100%);
    background: linear-gradient(to bottom, #5469a0 0%,#637cbd 50%,#5469a0 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89274a', endColorstr='#89274a',GradientType=0 ); 
} 
.two {
    background: #53689e;
 /*   background: -moz-linear-gradient(top, rgba(26,82,19,1) 0%, rgba(32,100,24,1) 50%, rgba(26,82,19,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#206418), color-stop(50%,#1a5213), color-stop(100%,#206418));
    background: -webkit-linear-gradient(top, #1a5213 0%,#206418 50%,#1a5213 100%);
    background: -o-linear-gradient(top, rgba(26,82,19,1) 0%,rgba(32,100,24,1) 50%,rgba(26,82,19,1) 100%);
    background: -ms-linear-gradient(top, rgba(26,82,19,1) 0%,rgba(32,100,24,1) 50%,rgba(26,82,19,1) 100%);
    background: linear-gradient(to bottom, #1a5213 0%,#206418 50%,#1a5213 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53689e', endColorstr='#53689e',GradientType=0 ); 
}
.three {
    background: #7d2e6b;
 /*   background: -moz-linear-gradient(top, rgba(183,118,26,1) 0%, rgba(204,132,30,1) 50%, rgba(183,118,26,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc841e), color-stop(50%,#b7761a), color-stop(100%,#cc841e));
    background: -webkit-linear-gradient(top, #b7761a 0%,#cc841e 50%,#b7761a 100%);
    background: -o-linear-gradient(top, rgba(183,118,26,1) 0%,rgba(204,132,30,1) 50%,rgba(183,118,26,1) 100%);
    background: -ms-linear-gradient(top, rgba(183,118,26,1) 0%,rgba(204,132,30,1) 50%,rgba(183,118,26,1) 100%);
    background: linear-gradient(to bottom, #b7761a 0%,#cc841e 50%,#b7761a 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d2e6b', endColorstr='#7d2e6b',GradientType=0 );
}
.four {
    background: #1a5113;
  /*  background: -moz-linear-gradient(top, rgba(183,118,26,1) 0%, rgba(204,132,30,1) 50%, rgba(183,118,26,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc841e), color-stop(50%,#b7761a), color-stop(100%,#cc841e));
    background: -webkit-linear-gradient(top, #b7761a 0%,#cc841e 50%,#b7761a 100%);
    background: -o-linear-gradient(top, rgba(183,118,26,1) 0%,rgba(204,132,30,1) 50%,rgba(183,118,26,1) 100%);
    background: -ms-linear-gradient(top, rgba(183,118,26,1) 0%,rgba(204,132,30,1) 50%,rgba(183,118,26,1) 100%);
    background: linear-gradient(to bottom, #b7761a 0%,#cc841e 50%,#b7761a 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5113', endColorstr='#1a5113',GradientType=0 );
}

@media (min-width: 800px) {
    #page #programs a, #page #programs a:hover {
        padding: .9em 1em 0 1em;
    }
    .program-box {
        height: 80px;
        width: 32.16666%;
        margin: 0;
        text-align: center !important;
    }
    .program-box.one, .program-box.two {
        margin-right: 1.75%;
    }
}