shift
/* 
Author:R Silaghi, SDG
Date:2014-APR-22
Description:Layout css styles used for Sandag
*/

/* BODY
============================================== */

html, body {
    padding: 0;
    margin: 0;
}

body {
    background: #a7b2bb url('../images/bg.png') no-repeat right bottom;
    background-attachment: fixed;
    font-family: "proxima-nova",sans-serif;
    width: 100%;
}

h3 {
    color: #DE4B1D;
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: -10px;
}

h4 {
    color: #586470;
    margin: 0;
}

::selection {
    background: #FFAA27; /* Safari */
    color: #fff;
}

::-moz-selection {
    background: #FFAA27; /* Firefox */
    color: #fff;
}

.button,
input[type="button"] {
    /*background: #e8920c;*/
    box-shadow: 0 2px 9px #ccc;
    color: #0c0b0b;
    font-weight: bold;
    border: none;
    padding: 5px 10px;
    /* border-bottom: solid 2px #444; */
    background-color: #ED971A;
    transition: ease-in-out .2s;
    min-width: 60px;
    text-align: center;
    border-radius: 2px;
}

    .button:hover,
    input[type="button"]:hover {
        background: #f5b027;
     
    }

footer {
    color: #fff;
    font-size: 0.9em; /*added to decrease footer text size */
}

.orange-bg {
    background: #de4b1d;
}
/* #de4b1d, #f3833b*/
.grey-bg {
    background: #a5b0b7;
}

.blue-bg {
    background: #00ace6;
}

.green-bg {
    background: #56bb51;
}

.cyan-bg {
    background: #af137b;
}

.dark-orange-bg {
    background: #DE4B1D;
}

.purple-bg {
    background: #6c2070;
}

.yellow-bg {
    background: #e6e600;
}

.sf_PagerCurrent {
    margin-right: 10px;
    text-decoration: underline;
    
}

a[href*="ShiftInsider"] {
    margin-right: 10px;
    
}

/* HEADER
============================================== */
.top {
    color: #fff;
    margin-top: 10px; /*10px*/
    margin-bottom: -5px; /* added to move container top up closer to logo*/
}

.logo {
    background-image: url('../images/logos/logo-shift.png');
    float: left;
    height: 73px;
    width: 167px;
}

.contact {
    float: right;
    text-align: right;
    
}


.top .row {
    margin-top: 80px;
}
/*100px*/

/* NAVIGATION */
nav, nav a, nav a:hover {
    color: #fff;
    margin-top: 0;
    text-decoration: none;
    width: 100%;
    display:block;
}

.top ul {
    list-style: none;
    display: table;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

.top li {
    background-color: #6c2070;
    cursor: cell;
    display: table-cell;
    font-size: 1.2em; /*1.4em*/
    font-weight: 600;
    height: 100%;
    line-height: 50px;
    text-align: center;
    transition: ease-in-out .3s;
}
/* begin create the plus sign on mouseover of top level nav on journey-planner.html and interactive-map.html pages*/
body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-about {
    /*cursor:cell;*/
}

    body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-about > a {
        /*cursor:cell;*/
    }

body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-improvement {
    /*cursor:cell;*/
}

    body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-improvement > a {
        /*cursor:cell;*/
    }

body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-transportation {
    /*cursor:cell;*/
}

    body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-transportation > a {
        /*cursor:cell;*/
    }

body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-contact {
    /*cursor:cell;*/
}

    body > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-contact > a {
        /*cursor:cell;*/
    }
/* end create the plus sign on mouseover of top level nav on journey-planner.html and interactive-map.html pages*/

/* begin create the plus sign on mouseover of top level nav on home pages*/
#form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-about {
    /*cursor:cell;*/
}

    #form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-about > a {
        /*cursor:cell;*/
    }

#form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-improvement {
    /*cursor:cell;*/
}

    #form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-improvement > a {
        /*cursor:cell;*/
    }

#form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-transportation {
    /*cursor:cell;*/
}

    #form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-transportation > a {
        /*cursor:cell;*/
    }

#form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-contact {
    /*cursor:cell;*/
}

    #form1 > div.container.top > div.row.top-desktop > nav > ul > li.menu-but-contact > a {
        /*cursor:cell;*/
    }
/* end create the plus sign on mouseover of top level nav on home pages*/

/*.lang.google_translate_element>span
{
    max-width:150px !important;
}*/

/*#\3a 0\2e targetLanguage
{
    width: 150px;
}
    #\3a 0\2e targetLanguage > span:nth-child(2) > a
    {
        width:150px;
    }

    #\3a 0\2e targetLanguage > img:nth-child(3)
    {
        visibility:hidden;
    }
.lang.google_translate_element{
	display:none;

    	list-style: none;
	display:compact;	
	margin-bottom:0;
	padding:0;
   max-width:150px;
   overflow:hidden;
}*/
#language {
    list-style: none;
    display: block;
    margin-bottom: 0;
    padding: 0;
}

    #language li {
        background: none;
        display: inline-block;
        font-size: 1em;
        line-height: 1em;
    }

    #language a {
        color: #fff;
    }
/*a {
    display: block;
}*/
.main-menu {
    height: 10px; /*50px*/
    margin-bottom: -34px; /*-14px*/
}

.menu-but-improvement {
    border-right: solid 1px #fff;
    border-left: solid 1px #fff;
}

.menu-but-blog {
    border-right: solid 1px #fff;
    border-left: solid 1px #fff;
}

.main-menu li:hover {
    background-color: #de4b1d;
}

.top .submenu {
    display: none;
    height: 40px;
    transition: ease-in-out .3s;
    width: 97.5%;
}

.submenu li {
    background: #ffa926; /* #ffa926*/
    font-size: 0.8em;
    line-height: 40px;
    border: none;
    -moz-box-shadow: inset 0 4px 0 rgba(0,0,0,.3); /* these control gray line under top nav*/
    -webkit-box-shadow: inset 0 4px 0 rgba(0,0,0,.3);
    box-shadow: inset 0 4px 0 rgba(0,0,0,.3);
}

/*Added by Koman*/
.topLink {
    display: block;
}

    .submenu li:hover a {
        color: #6C216F;
        display: block;
    }

.menu-but-contact:hover .submenu4,
.menu-but-transportation:hover .submenu3,
.menu-but-improvement:hover .submenu2,
.menu-but-about:hover .submenu1,
.submenu.menu-active {
    display: table;
    position: absolute;
    /*height:200px;*/
}

.menu-but-contact:hover .submenu4,
.menu-but-transportation:hover .submenu3,
.menu-but-improvement:hover .submenu2,
.menu-but-about:hover .submenu1 {
    z-index: 10;
}

.submenu2 {
    margin-left: -19.5%;
}

.submenu3 {
    margin-left: -39.0%;
}

.submenu4 {
    margin-left: -78.0%;
}

.submenu li:hover {
    background: #fff;
    color: #6C216F;
}
/*.menu-but-about:hover .submenu1
{
    padding-top:20px;
    vertical-align:bottom;
    max-height:10px;
}*/
/*.menu-but-about:hover .submenu1-2
{
          	border-left:solid 1px #fff;
}*/

.submenu1-3:hover {
    background: #fff; /*#ffa926;  #ffa926*/
    color: #ffa926;
}

/*.menu-but-about:hover .submenu1-4
{
          	border-left:solid 1px #fff;
}

.menu-but-about:hover .submenu1-5 {
    border-left: solid 1px #fff;
    border-right: solid 1px #fff;
}*/

.menu-active li:hover {
    background: #c2c9d0;
    color: #fff;
}



    .top li.but-active,
    .top li.but-active > a,
    .menu-active li.submenu-active,
    .menu-active li.submenu-active a {
        /*background: #fff;
        color: #6F1F70;*/
        z-index: 0;
    }

/* END NAVIGATION */

.top input {
    color: #666;
    height: 40px;
    margin-top: 17px;
    width: 100%;
}

/* BODY
============================================== */
.container {
    padding: 15px 0;
}

.home .container-light {
    margin-top: 32px;
}

.container-light {
    background: #F6F7F8;
    background: rgba(255, 255, 255, .9);
    margin-top: 38px;
}

div.container.container-light {
    margin-top: 38px;
}

.carousel-caption {
    background: #F6F7F8;
    background: rgba(255,255,255,.7);
    color: #58255B;
    font-size: 2.4em; /* 2.8em*/
    font-weight: 600;
    max-height: 335px; /* 435px */
    /*   min-height:150px; 350px*/
    height: auto; /*300px*/
    line-height: 1.2em;
    padding: 10px;
    text-align: left;
    text-shadow: none;
    top: 20px;
    left: 20px;
    width: 250px;
}

    .carousel-caption a {
        color: #58255B;
    }

.header-image-title {
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 3em;
    font-weight: 800;
    line-height: 1em;
    margin: 15px 15px;
    position: absolute;
    width: 270px;
    padding: 6px;
}

.content-header img {
    width: 100%;
}

.footer a:link {
    color: white;
}

.footer a:visited {
    color: white;
}

.footer a:hover {
    color: white;
}

.footer a:active {
    color: white;
}

/* Side widgets */
.sidebox {
    background: #fff;
    margin-bottom: 15px;
}

.sidebox-header {
    box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    height: 30px;
    line-height: 25px;
    padding: 2px 5px;
}

.sidebox-content {
    padding: 10px;
}

.sidebox label {
    color: #586470;
    width: 40px;
}

.links {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .links li {
        border-bottom: solid 1px #b1b9c2;
        height: 35px;
        line-height: 35px;
        padding-right: 20px;
        width: 100%;
    }

        .links li:last-child {
            border: none;
        }

    .links a {
        color: #586470;
        font-weight: bold;
    }

.jp-widget input[type="text"] {
    width: 100%;
}

.jp-widget input[type="button"] {
    margin-top: 10px;
    right: 10px;
}

.google-badge {
    background: url('../images/google-logo.png') no-repeat;
    float: right;
    height: 15px;
    margin-top: 18px;
    width: 80px;
}

.newsletter-widget input[type="email"] {
    margin: 5px 0 10px;
    width: 100%;
}


/*body > div.container.container-light > div.col-xs-12.col-md-9.col-lg-9 > div.content > div.article.jp.col-xs-12.col-md-5.col-lg-5
{
    width:20%;
}*/

/* Toggable objects */
.toggable-box {
    margin-bottom: 5px;
    min-height: 40px;
}

.toggable-button {
    color: #fff;
    clear: right;
    clear: left;
    cursor: pointer;
    float: left;
    font-size: 1.4em;
    font-weight: 800;
    padding: 5px;
    transition: ease-in-out .2s;
    width: auto;
}

    .toggable-button:hover {
        background: #ED7617;
    }

.toggable-content {
    clear: left;
    display: none;
    overflow: hidden;
}

/*Styling for Project Notices section*/
#pn {
    background: #DE4B1D;
    color: #fff;
    clear: right;
    clear: left;
    float: left;
    font-size: 1.4em;
    font-weight: 800;
    padding: 5px;
    width: auto;
}
/* JOURNEY PLANNER
============================================== */
.trip-planner .container-light {
    margin-top: 32px;
}

/*#map {
    height: 720px;
    background-color: #efefef;
    margin-top: 64px;
    margin-left: 0px;
}*/

/*.map {
    height: 450px;
    background-color: #efefef;
    margin-top: 15px;
}*/

.jp {
    /*background: rgb(255,255,255);*/
    background: rgba(255,255,255,0.95);
    color: #586470;
    height: 450px; /* 450px */
    margin-left: 0px;
    margin-top: 15px;
    padding: 0 10px 10px;
    /* z-index:100; new */
}

#journey-results {
    height: 450px; /* 540px */
    overflow: auto; /* auto */
    width: 340px; /* 360px */
    margin-bottom: 10px;
}

.jp .row {
    margin-left: -10px;
    margin-right: -10px; /* -10px */
}

.jp label {
    width: 40px;
}
/*.mapjp
{
    margin-top:10px;
}*/
/*.interactive-map input[type="text"],
.map-input {
    width: 85%;
    line-height: 30px;
    height: 30px;
    margin-bottom: 10px;
}*/

.deparrwhen input {
    width: 100px;
}

.jp .button {
    float: right;
}

.bymodes {
    background: #C4CBD2;
    box-shadow: 0 3px 0 rgba(0,0,0,.4);
    list-style: none;
    padding: 5px 0 20px;
}

.mode {
    background: url(../images/map-sprite.png);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    line-height: 100px;
    margin-right: 25px;
    text-align: center;
    width: 40px;
    vertical-align: bottom;
}

.bymodes [class*="sel"] {
    background-color: #fff;
    color: #6C216F;
}

.walk {
    background-position: 0 0;
}

.cycle {
    background-position: -40px 0;
}

.drive {
    background-position: -80px 0;
}

.transit {
    background-position: -120px 0;
}

.selwalk {
    background-position: 0 -40px;
}

.selcycle {
    background-position: -40px -40px;
}

.seldrive {
    background-position: -80px -40px;
}

.seltransit {
    background-position: -120px -40px;
}

/* INTERACTIVE MAP
============================================== */
#zoomtoarea {
    width: 100%;
    padding: 3px;
    margin-top: 3px;
}

.interactive-title {
    color: #de4b1d; /* #de4b1d, #ED7617*/
    font-size: 2.6em;
    font-weight: bold;
}

.sidebox.interactive {
    background: none;
    margin-top: 10px;
}

.bg-pink {
    background-color: #de4b1d; /* #de4b1d, #ED7617*/
    color: #fff;
    clear: both;
    float: left;
    padding: 5px;
    font-weight: bold;
}

.interactive-options {
    width: 100%;
}

.options-name {
    display: inline-block;
    margin-left: 10px;
}

.option {
    line-height: 40px;
}

.map-popup {
    min-height: 120px;
    min-width: 210px;
    padding: 10px;
}

    .map-popup .planjourney {
        font-size: 0.9em;
        margin-top: 12px;
    }

        .map-popup .planjourney a {
            display: block;
        }

.stop-name {
    font-family: "proxima-nova",sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    background: #ED7617;
    color: #fff;
    padding: 5px;
}

.route {
    font-weight: bold;
    display: inline-block;
    padding: 3px;
    width: 90%;
    border: 1px solid #efefef;
    cursor: pointer;
}

    .route:nth-child(2n+1) {
        background: #efefef;
    }

.route-no {
    height: 25px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    width: 25px;
}

#map-status.status {
    background: #6C1F6D;
    color: #fff;
    padding: 10px;
    font-size: 1.2em;
    position: absolute;
    top: 19px;
    width: 96.7%
}

#map-status .notice {
    color: #EE3322;
    font-weight: bold;
}

.cycle-legend {
    display: none;
    margin-top: 20px;
}

    .cycle-legend .title {
        font-weight: bold;
        padding-left: 0;
    }

    .cycle-legend [class*='line'] {
        margin-top: 7px;
        border-top: 4px solid #000;
    }

    .cycle-legend .line1 {
        border-top-color: #FF0808;
    }

    .cycle-legend .line2 {
        border-top-color: #8AFF00;
    }

    .cycle-legend .line3 {
        border-top-color: #FAED0A;
    }

    .cycle-legend .line4 {
        border-top-color: #66AFFD;
    }

    .cycle-legend .line5 {
        border-top-color: #6C1F6D;
    }

    .cycle-legend .line6 {
        border-top-style: dashed;
        border-top-color: #ff8c0a;
    }

/* google generated popup */
.gm-style-iw table table {
    margin-top: 5px;
    /* display: none; */
}

    .gm-style-iw table table td {
        box-sizing: border-box;
        padding: 5px;
    }

.gm-style-iw table tr:nth-child(1) {
    display: none;
}

.gm-style-iw table table tr:nth-child(1) {
    display: table-row;
}

.gm-style-iw table table tr {
    border-bottom: 2px solid #fff;
}

    .gm-style-iw table table tr:nth-child(2n) {
        background: #eee;
    }

.gm-style-iw table table td:nth-child(2n+1) {
    background: #ED7617;
    color: #fff;
    font-weight: bold;
}

.gm-style-iw table table tr:nth-child(2n+1) td:nth-child(2n+1) {
    background: #FFAA27;
}

.gm-style-iw div:first-child {
    overflow-x: hidden !important;
    min-width: 270px !important;
}

.gm-style-iw + div {
    right: 30px !important;
}


/* Small desktops
================================================== */
@media only screen and (max-width: 1201px) and (min-width:995px){
	.submenu li {
		font-size: 0.65em;
	}
	.deparrwhen input {
	    width:80px;
	}
	.map-input {
	    width: 75%;
	}
	.mode {
	    margin-right: 15px;
	}

}
@media only screen and (max-width: 1024px)
{
    .top .submenu
    {
        height: 40px;
        transition: ease-in-out .3s;
        width: 100%;
        font-size:1.2em;
    }
}
/* Big Tablets
================================================== */
@media only screen and (max-width: 995px){
	.top input{	display:none; }
	#jp-txt-to{margin-right: 50px;}
}

/* Tablest and mobiles
================================================== */


@media only screen and (max-width: 768px){
	.contact-desktop,
	.top-desktop{
	    display:none;
	} 	
	.container-light {
		margin-top: 0;
	}
	.content-header img,
	.content-header{
		width: 100%;
	}
	.container {
	    padding: 15px 5px;
	}
	.logo {
	    background-image: url("../images/logos/logo-shift.png");
	    float: left;
	    height: 73px;/* 68px */
	    width: 167px; /* 160px */
	    margin-left: 10px;
	}
	.lang{ margin-top: -10px; }
	.header-image-title {
	    color: rgb(255, 255, 255);
	    font-size: 2em;
	    font-weight: 800;
	    line-height: 1em;
	    margin: 15px;
	    position: absolute;
	    text-shadow:1px 1px 0 rgba(0,0,0,.5);
	    width: 90%;
	}
	.trip-planner .container-light { margin-top: 0; }
	.jp{ height: 350px;}
	.map{ margin-bottom:15px;}
	#zoomtoarea{
		margin-left: -100px;
		margin-top: 20px;
	}
 


}
/* Small Tablets and Large Mobiles
================================================== */
@media only screen and (max-width: 640px){
	#jp-txt-to{margin-right: 0;}
	.carousel-caption {
	    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.7);
	    color: rgb(88, 37, 91);
	    font-size: 2em;
	    font-weight: 600;
	  /*  height: 180px; 180px
        min-height:550px;*/
	    line-height: 1.2em;
	    padding: 10px;
	    text-align: left;
	    text-shadow: none;
	    top: 20px;
	    left: 20px;
	    width: 250px;/*250px*/
	}
    .carousel-indicators
    {
        padding-top:10px;
    }
    .lang
    {
        visibility:hidden;
    }
    .footer {
        color:black;
    }
    .footer a:link {
        color: black;
    }
    .footer a:visited {
        color: black;
    }
    .footer a:hover {
        color: black;
    }
    .footer a:active {
        color: black;
    }
}
/* Mobiles
================================================== */
@media only screen and (max-width: 460px){
	.logo {
	    background: url("../images/logos/logo-shift.png") no-repeat;
	    background-size: 80% auto;
	    float: left;
	    height: 60px;
	    width: 160px;
	    margin-left: 10px;
	}


    /* start new tsu */
    .jp
    {
        height:340px;
        overflow:auto;
        width:100%;
    }
    #journey-results
    {
        height:340px;
        width:100%;
        overflow:auto;
    }
    /* end new tsu */
	.map,
	#map { height: 300px; }
	.header-image-title { width: 80%;font-size:2em;} /*2em*/
	.mode {margin-right: 15px; }
	.map-input { width: 75%; }
	.deparrwhen input { width: 80px; }
	
	#sidebar ul li:first-child a.close-menu{
		height: 90px;
	}
    .footer {
        color:black;
    }
    .footer a:link {
        color: black;
    }
    .footer a:visited {
        color: black;
    }
    .footer a:hover {
        color: black;
    }
    .footer a:active {
        color: black;
    }
    .contact {
        float: right;
        text-align: right;
        
     
    }
	
.carousel-caption {
	    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.7);
	    color: rgb(88, 37, 91);
	    font-size: 2em;
	    font-weight: 600;
	  /*  height: 180px; 180px
        min-height:550px;*/
	    line-height: .95em;
	    padding: 10px;
	    text-align: left;
	    text-shadow: none;
	    top: 20px;
	    left: 20px;
	    width: 250px;/*250px*/
	}
    .carousel-indicators
    {
      visibility:hidden;
    }
div.container.top
    {
        background-color:#a7b2bb;
        margin-top:0px;
      /*  max-height:60px*/
    }


}
/*--------Added by Koman Diabate-------------*/
@media only screen and (max-width: 800px) {
    div.container.top {
        background-color: #a7b2bb;
        margin-top: 0px;
        /* max-height: 60px; */
    }
}
@media only screen and (max-width: 460px) {
    div.container.top {
        background-color: #a7b2bb;
        margin-top: 0px;
        /* max-height: 60px; */
    
}
    .textboxes{
    width: 100%;
    border-radius: 2px;
    border: snow;
    padding: 2px;
    margin: 2px;
}

div#ra-tripplan-widget {
    background-color: grey;
    padding: 10px;
    border-radius: 5px;
}
/*--------End Added by Koman Diabate-------------*/

@media only screen and (max-width:414px)
{
    .contact, .lang, .sidebar-toggle
    {
      /*margin-top: -35px;*/
    }
    .footer {
        color:black;
    }
    .footer a:link {
        color: black;
    }
    .footer a:visited {
        color: black;
    }
    .footer a:hover {
        color: black;
    }
    .footer a:active {
        color: black;
    }
    .contact {
        float: right;
        text-align: right;
    }
}

@media only screen and (max-width:320px)
{
    .contact, .lang, .sidebar-toggle
    {
       /* margin-top:-30px;*/
    }
    .footer {
        color:black;
    }
    .footer a:link {
        color: black;
    }
    .footer a:visited {
        color: black;
    }
    .footer a:hover {
        color: black;
    }
    .footer a:active {
        color: black;
    }
}

/*#map > div 
{
    width:50%;
}*/

/*#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div
{
    width:50%;
}*/

    /*#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div.gm-style-iw > div > div > div > div:nth-child(2) > table > tbody > tr:nth-child(2) > td > table
    {
        width:50%;
    }*/
    /*#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div.gm-style-iw > div > div > div > div:nth-child(2) > table
    {
        width:20%;
    }*/