﻿/****************************************************************
*
* Name: cd.css
* Applies to: Community Development Agency
* Modified: 04/12/2018 (Christopher White: added classes for the Socrata data iframe.
*Modified: 11/06/18 (Peggi Rodgers: added classes to replicate inside page styling found on DPW for use on Move In Marin.
*Modified: 04/10/19 (Peggi Rodgers: added new classes for Draw Down Marin and modified class for thumbnail slider to eliminate  link to 'all sponsors' page.
*****************************************************************/

.cd-proj-list-main
{
    float: left;
    width: 74%;
    margin-top: 25px;
}

.cd-proj-list-sidebar
{
    width: 24%;
    float: right;
    padding: 5px;
}

.cd-proj-list-sidebar a
{
    margin: 4px;
}

.cd-proj-summary
{
    margin-left: 10px;
}

.cd-proj-sidebar
{
    float: right;
}

.cd-meeting-table
{
    width: 100%;
}

.cd-meeting-table .proj-col-1
{
    width: 20%;
}

.cd-meeting-table .proj-col-2
{
    width: 15%;
}

.cd-meeting-table .proj-col-3
{
    width: 20%;
}

.cd-meeting-table .proj-col-4
{
    width: 35%;
}

.cd-meeting-table ul {
    padding-left: 15px !important;
}

/* Added to overwrite Sitecore styling on the dispute resolution form */
.scfFileUploadUsefulInfo
{
    color: black !important;
    font-style: italic;
    padding: 12px !important;
}

.scfSingleLineTextUsefulInfo
{
    color: black !important;
    padding: 12px !important;
	font-style: italic;
}

.scfMultipleLineTextUsefulInfo
{
    color: black !important;
    padding: 12px !important;
	font-style: italic;
}

.scfCheckBoxListUsefulInfo
{
    color: black !important;
    padding: 12px !important;
	font-style: italic;
}

.scfCheckboxUsefulInfo
{
    color: black !important;
    padding: 12px !important;
	font-style: italic;
}

/* Socrata Map */
.map-wrapper
{
    margin-top: 5px;
    position: relative;
    padding-bottom: 100%;
    padding-top: 25px;
    height: 0;
}

.map-wrapper iframe
{
    position: absolute;
    top: 0;
    left: 0;
    max-width: 630px;
    max-height: 630px;
    width: 100%;
    height: 100%;
}
/************************Classes to style Move In Marin Page, Housing****************************/
/*Button Styling*/
.go-buttons {
    margin: auto auto 10px;
    text-align: center;
    color: white;
    padding-top: 16px;
}

    .go-buttons a {
        color: white;
        padding: 7px 21px 7px 21px;
        background-color: #444444;
    }

        .go-buttons a:hover, .go-buttons a:focus {
            text-decoration: underline;
            color: white;
            background-color: #000000;
        }


/*-----New styles for PW second level (divisional) landing pages-----*/

.quickAccess {
    flex-wrap: wrap;
    justify-content: space-around;
    display: flex;
}

.quickAccessBox {
    width: 22%;
    margin-bottom: 30px;
    padding-bottom: 20px;
    flex-direction: column;
    height: auto;
    display: flex;
}


    .quickAccessBox p {
        padding: 7px;
        text-align: center;
    }

    .quickAccessBox img {
        max-width: 80%;
        height: auto;
        padding-bottom: 6px;
        padding-left: 14px;
    }

.qABTitle {
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
    padding-bottom: 9%;
    line-height: 1.3;  
}

.qABTitle a {
        color: black;
      
    }

.qABOveride {
    line-height: 1.2 !important;
}

.qA {
    flex-wrap: wrap;
    justify-content: space-around;
    display: flex;
}
/*Specific to Drawdown Marin page*/
/*To hide sponsor link on thumbnail slider*/
#sponsor-link{
    display:none;
}
.emptyNow {
    /*An empty class so the division holding content can be adjusted with media queries.*/
}

.quickAccess2 {
    flex-wrap: wrap;
    justify-content: space-around;
    display: flex;
    flex-direction: row;
    margin-left: 3%;
    margin-top: 40px;
}

.quickAccessBox2 {
    width: 16%;
    margin-bottom: 30px;
    /*padding-bottom: 20px;*/
    flex-direction: column;
    height: auto;
    display: flex;
}

.quickAccessBox3 {
    width: 16%;
    margin-bottom: 30px;
   /* padding-bottom: 20px;*/
    flex-direction: column;
    height: auto;
    display: flex;
}
/*To enlarge text in drawdown marin paragraphs*/
.largeText {
    font-size: 1.3em;
}
.getInvolved {
    margin-bottom:35px;
}
.qABTitle1 {
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
    padding-bottom: 9%;
    line-height: 1.3;
    margin-left: -36%;
}

.qABTitle2 {
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
    padding-bottom: 9%;
    line-height: 1.3;
    margin-left: -35%;
}

.qABTitle3 {
    font-weight: bold;
    text-align: center;
    font-size: 1.2em;
    padding-bottom: 9%;
    line-height: 1.3;
    margin-left: -33%
}



/* Media queries used to switch the site into a mobile-friendly presentation */
@media only screen and (max-width: 982px) {
    .getInvolved {
        margin-bottom: 35px;
        margin-left:3%;
    }
    .emptyNow {
        margin-left: 3%;
    }
}

@media only screen and (max-width: 850px ) {
    .qABTitle1 {
        margin-left: -20%;
    }

    .qABTitle2 {
        margin-left: -21%;
    }

    .qABTitle3 {
        margin-left: -18%
    }

}

@media only screen and (max-width: 810px ) {
    .qABTitle1 {
        
        margin-left: -20%;
    }

    .qABTitle2 {
        
        margin-left: -21%;
    }

    .qABTitle3 {
        
        margin-left: -18%
    }
}

@media only screen and (max-width: 780px) {
    .quickAccess2 {
        flex-direction: column;
        margin:auto 50% auto 45%;
    }
    .qABTitle1 {
        text-align:center;
    }

    .qABTitle2 {
        text-align: center;
    }

    .qABTitle3 {
        text-align: center;
    }
}


/* ############################################################################################# */
/*                                  SWITCH TO MOBILE DISPLAY                                     */
/* ############################################################################################# */


@media only screen and (max-width: 430px) {
   
}



@media only screen and (max-width: 385px) {
    
}