/*-------------------------------+
 | Site: Traffic Club of Chicago |
 | Part: Master styles           |
 +-------------------------------*/

/* Imports
=====================================================================*/
@import url(//fonts.googleapis.com/css?family=Muli:300,300italic,400,400italic);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css);
@import url(/content/styles/reset.css);
@import url(/content/styles/forms.css);
@import url(/content/styles/ie.css);


/* Fonts
======================================================================*/
body, input, select, textarea { font-family: Muli, Arial, sans-serif; }


/* Basics
======================================================================*/
a { color: #00e; text-decoration: underline; }
a:hover { text-decoration: none; }
address { font-style: normal; }

body {
    background: #f5d281;
    background: -moz-linear-gradient(top, #ffffff 15%, #f5d281 54%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#ffffff), color-stop(54%,#f5d281));
    background: -webkit-linear-gradient(top, #ffffff 15%,#f5d281 54%);
    background: -o-linear-gradient(top, #ffffff 15%,#f5d281 54%);
    background: -ms-linear-gradient(top, #ffffff 15%,#f5d281 54%);
    background: linear-gradient(to bottom, #ffffff 15%,#f5d281 54%);
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5d281',GradientType=0 );
    font-size: 14px;
    line-height: 1.4;
    padding: 0 20px;
}

cite, em { font-style: italic; }
dl, ol, p, table, ul { margin-bottom: 1.4em; }
dt { margin-top: 1.4em; }
dt:first-child { margin-top: 0; }
dt, h1, h2, h3, h4, h5, h6, strong { font-weight: bold; }
h1 { font-size: 22px; margin-bottom: 0.7em; }
h2 { font-size: 20px; line-height: 1.1; margin-bottom: 0.5em; }
h3 { font-size: 18px; line-height: 1.2; }
h4 { font-size: 17px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 1px; margin: 2em 0; }
html { background: #f5d281; }
img { max-width: 100%; }
ol { list-style: decimal; margin-left: 2em; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }
table { background: #fff; border-collapse: collapse; width: 100%; }
table p { margin: 0; }
td, th { vertical-align: top; }
td[align=center], th[align=center] { text-align: center; }
td[align=right], th[align=right] { text-align: right; }
th { background: #f5f5f5; }
thead th { font-weight: bold; vertical-align: bottom; }
ul { list-style: disc; margin-left: 1.5em; }

/* Stock classes */
.l { float: left; }
.r { float: right; }
.num { text-align: right; }
ul.flat { list-style: none; margin-left: 0; }
ul.flat > li { background: none; margin: 0; padding: 0; }


/* Core layout
======================================================================*/
#page { margin: 0 auto; max-width: 960px; }
.clear { clear: both; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }

/* Content */
#content { background: #fff; border: 1px solid #ddd; padding: 40px 40px 70px; }


/* Content
======================================================================*/

/* Action */
.action {
    -webkit-appearance: none;
    background: #094e8b;
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    vertical-align: middle;
}

.action:hover { opacity: 0.7; text-decoration: none; }
.action .icon { background-position: 0 50%; float: none; }

.stagebanner { color:white; align-items: center; text-align: center; padding: 1.5em; width: 100%; font-size: larger; background-image: url('/Content/images/spinutech-header.png'); }
.stagebanner a { color:white;}

/* Banner */
#banner img { display: block; width: 100%; }

/* Calendar Master */
.calendar .date { float: left; margin: 0 0 1em -160px; width: 150px; }
.calendar .date .days { display: block; font-size: 16px; }
.calendar .date .weekdays { display: block; font-size: 14px; }
.calendar dd { margin-bottom: 0.7em; }
.calendar dd, .calendar dt { padding-left: 160px; }
.calendar dt { border-top: 1px solid #ddd; clear: both; font-weight: normal; margin: 0; padding-top: 0.7em; }
.calendar .mute { margin-bottom: 0.2em; }
.calendar p { margin: 0; }
.calendar .time { margin-right: 0.5em; }

	/* Event header */
	.event-header { font-size: 22px; }
	.event-header h2 { margin: 0; }
	
	/* Mini */
	.calendar-mini .date { border: 1px solid #ddd; border-radius: 6px; float: left; margin: 3px 0 20px -60px; padding: 3px 0; text-align: center; width: 50px; }
	.calendar-mini .date .day { display: block; font-weight: 300; line-height: 1; font-size: 24px; }
	.calendar-mini .date .month { color: #d83240; display: block; font-size: 14px; text-transform: uppercase; }
    .calendar-mini dd, .calendar-mini dt { padding-left: 60px; }
    .calendar-mini dt { clear: both; }
    
    /* Monthly view */
    .fc-header td { border: 0; }
    
    /* Switcher */
	#cal-nav { float: right; margin: 0 0 10px ; white-space: nowrap; }
	#cal-nav li { background: none; display: inline; margin: 0 0 0 1em; padding: 0; }
	#cal-nav li.active a { color: #58595b; font-weight: bold; }

/* Callouts */
div.call-l, img.call-l { clear: left; }
div.call-r, img.call-r { clear: right; }
dt img.call-l { margin-top: 0; }
img.call-l { margin-right: 1em; }
img.call-r { margin-left: 1em; }
.call-l { float: left; margin: 0.5em 2em 0.5em 0; }
.call-r { float: right; margin: 0.5em 0 0.5em 2em; }
.call, div.call-l, div.call-r { font-size: 0.75em; }
.call img, .call-l img, .call-r img { display: block; }
.call img.icon, .call-l img.icon, .call-r img.icon { display: inline; }
.call, .call-l p, .call-r p { margin-bottom: 0.5em; }
.credit { color: #7f8183; font-size: 0.75em; letter-spacing: 0.01em; margin-bottom: 0.5em; text-align: right; }

/* Cart */
.cart { width: 100%; }
.cart .price { background: #f0f0f0; font-weight: bold; text-align: right; }
.cart .total { font-weight: bold; text-align: right; }
.cart .transaction-item { padding-left: 0.75em; }
.cart .transaction-type { color: #999; font-size: 90%; font-weight: bold; }
.cart p, .cart ul { margin: 0; }
.cart tbody td { border-top: 1px solid #ddd;}
.cart td, .cart th { padding: 0.5em 1em; vertical-align: top; }
.cart tfoot td { border-top: 3px double #ccc; }
.cart tfoot td { padding-top: 0.2em; }
.cart thead th { border-bottom: double 3px #ccc; font-size: 11px; font-weight: bold; }
.cart-options { float: right; text-align: right; }

/* Directory search */
.directory { list-style: none; margin-left: 0; }
.directory a { color: #000; text-decoration: none; }
.directory a:hover .name { text-decoration: underline; }
.directory li { clear: both; margin-bottom: 10px; overflow: hidden; padding: 10px 10px 10px 90px; }
.directory .location, .directory .occupation, .directory .org { display: block; }
.directory p { margin: 0; }
.directory .name { color: #00e; display: inline; font-size: 18px; }
.directory .org { font-weight: bold; }
.directory .thumb { float: left; margin: 3px 10px 0 -90px; width: 70px; }

    /* Old markup */
    .directory dd, .directory dt { padding-left: 90px; }

/* Filters */
.browse-filters { background: #f0f0f0; margin-bottom: 15px; padding: 15px 0 20px 20px; position: relative; }
.browse-filters .close { position: absolute; right: 20px; top: 15px; }
.browse-filters h3 { color: #58595b; margin-bottom: 0.5em; }
.browse-filters .mute { color: #939598; font-size: 11px; }
.browse-filters p, .browse-filters ul { list-style: none; margin: 0; }
.browse-filters .panel { float: left; margin: 0 2% 10px 0; width: 31%; }
.browse-filters .panel-2 { float: left; margin: 0 2% 10px 0; width: 48%; }
.browse-filters ul a:hover { text-decoration: none; }
.browse-filters ul a:hover .filter-name { text-decoration: underline; }
    
    /* Applied filters */
    .applied-filters { list-style: none; margin: 0; }
    .applied-filters .close { position: absolute; right: 5px; top: 5px; }
    .applied-filters .filter-type { display: block; font-size: 10px; padding-right: 20px; text-transform: uppercase; }
    
    .applied-filters li {
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 6px;
        float: left;
        margin: 0 0.5em 0.5em 0;
        padding: 5px;
        position: relative;
    }
    
#filters #availability-filters .panel { width: 13.28%; }

/* Footer */
#footer { background: #094e8b; margin-bottom: 50px; padding: 30px 40px; }
#footer, #footer a { color: #fff; }
#footer .tagline { border-bottom: 1px solid rgba(255, 255, 255, 0.3); font-size: 25px; font-weight: 300; margin-bottom: 1em; padding-bottom: 1em; text-align: center; }

    /* Social */
    #footer .social, #header .social { float: right; font-size: 40px; list-style: none; margin: 0; text-align: right; }
    #header .social.c2r { font-size: 20px; clear:both; }
    #footer .social a:hover, #header .social a:hover { opacity: 0.7; }
    #footer .social li, #header .social li { display: inline; }
    #footer .social a { text-decoration:none;}

    .mobile-show { visibility: hidden; display:none; }
    .desktop-show{ visibility: visible;}
    .desktop-show a { text-decoration:none; color: #084e8b; }
    .desktop-show span { visibility:hidden; display:none; }

    @media screen and (max-width: 880px) {
        #header .social { display:none; }
        .mobile-show { visibility: visible; display:contents; }
        .desktop-show{ visibility:hidden;}
    }


    /* vCard */
    .vcard .org { display: block; font-size: 20px; font-weight: 300; }
	
/* Maps */
.geo { display: none; }
#map img { max-width: none; }

    /* Mapped results */
    #map-mini #map { border: 1px solid #ccc; height: 250px; margin-bottom: 20px ; }
    #mapped-results #map { border: 1px solid #ccc; border-bottom-right-radius: 6px; border-top-right-radius: 6px; float: right; height: 500px; width: 67%; }
    #mapped-results #map, #mapped-results .results { margin-bottom: 20px; }
    
    #mapped-results .results {
        border: 1px solid #ccc;
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        float: left;
        font-size: 0.9em;
        height: 470px;
        line-height: 1.3;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 15px 1%;
        width: 28.5%;
    }
    
    #mapped-results .results ol { list-style: none; margin: 0; padding-left: 32px; }
    #mapped-results .results ol li { clear: both; margin-bottom: 15px; }
    #mapped-results .results ol h2 { font-size: 16px; }
    #mapped-results .results ol h2, #mapped-results .results ol p { font-weight: normal; margin: 0; }
    #mapped-results .results .marker { float: left; margin-left: -32px; }
    #mapped-results .results .thumb { float: left; margin: 3px 10px 10px 0; width: 44px; }
    
    /* Windows (new, custom popup using ExtInfoWindow) */
	/* http://gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/release/docs/examples.html */
	#gwindow { width: 350px; }
	#gwindow_b { background: url(/images/shared/gwindow_b.png); height: 15px; }
	#gwindow_beak { background: url(/images/shared/gwindow_beak.png); height: 49px; width: 47px; }
	#gwindow_bl { background: url(/images/shared/gwindow_bl.png); height: 15px; width: 10px; }
	#gwindow_br { background: url(/images/shared/gwindow_br.png); height: 15px; width: 15px; }
	#gwindow_close { background: url(/images/shared/gwindow_close.png) no-repeat; cursor: pointer; height: 16px; width: 16px; }
	#gwindow_l { background: url(/images/shared/gwindow_l.png); width: 10px; }
	#gwindow_r { background: url(/images/shared/gwindow_r.png); width: 15px; }
	#gwindow_t { background: url(/images/shared/gwindow_t.png); height: 1px; }
	#gwindow_tl { background: url(/images/shared/gwindow_tl.png); height: 10px; width: 10px; }
	#gwindow_tr { background: url(/images/shared/gwindow_tr.png); height: 10px; width: 15px; }
    
        /* Window contents */
        #info-window-content { background-color: #fff; }
        #info-window-content .desc-content { font-size: 12px; }
        #info-window-content h3 { font-size: 1.5em; line-height: 1.2; }
        #info-window-content p { font-size: 1.2em; }
        #info-window-content .thumb { float: left; margin: 3px 10px 0 0; width: 44px; }


/* Header */
#header { padding: 20px 0; }
#logo { float: left; }

    /* Header nav */
    #header-nav { float: right; list-style: none; margin: 0 0 20px; text-align: right; padding-top:2em; font-size:small; }
    #header-nav li { display: inline; margin-left: 0.75em; }

/* Icons */
.fa-ban { color: #777; }
.fa-check { color: #3f9f1f; }

/* Muted text */
.mute { color: #7f7f7f; font-size: 13px; font-weight: normal; }

/* Navigation */
#nav { background: #f5f5f5; font-size: 17px; font-weight: 300; padding: 3px 40px; }
#nav a { border: 1px solid #f5f5f5; color: #094e8b; display: inline-block; padding: 0.5em 0.4em; text-decoration: none; }
#nav a:hover { background: #e5e5e5; border-color: #d3d3d3; }
#nav li { display: inline-block; margin-right: 0.5em; }
#nav li.current > a { background: #fff; border-color: #e5e5e5; color: #7e4136; }
#nav ul { list-style: none; margin: 0; }
#nav ul ul { display: none; }

    /* Secondary */
    #nav-secondary {
        border-bottom: 1px solid #ddd;
        font-size: 15px;
        list-style: none;
        margin: -10px 0 30px 0;
        max-height: 40px;
        overflow: hidden;
        padding-bottom: 20px;
        position: relative;
    }
    
    #nav-secondary a { color: #7e4136; display: inline-block; padding: 0.5em 0.4em; text-decoration: none; }
    #nav-secondary a:hover { color: #ca4c3d; }
    #nav-secondary h3 { margin-bottom: 0.5em; }
    #nav-secondary li.current > a { background: #dedede; }
    #nav-secondary li { display: inline-block; margin: 0 0.3em 0 0; white-space: nowrap; }
    #nav-secondary .toggle { float: right; margin-bottom: 0.5em; text-align: right; }
    #nav-secondary ul { list-style: none; margin: 0; }
    #nav-secondary ul ul { display: none; }
    
        /* Opened */
        #nav-secondary.open { max-height: none; }
        #nav-secondary.open li { float: left; margin: 0 0 0.5em 0; width: 33.33%; }
        #nav-secondary.open ul { background: #fff; border: 1px solid #e5e5e5; clear: both; margin-bottom: 20px; overflow: hidden; padding: 30px; }
        #nav-secondary.open ul a { display: block; color: #2e57bf; overflow: hidden; padding-right: 1em; text-overflow: ellipsis; white-space: nowrap; }

/* Paging */
.pages, .pages ul { clear: both; float: none; font-size: 16px; list-style: none; margin: 50px 0 30px; text-align: center; }
.pages li { display: inline; margin: 0 10px 0 0; }

/* Payment history */
.payment-history .n { color: red; }
.payment-history .num { text-align: right; }
.payment-history .p { color: green; }
.payment-history td { border-bottom: 1px dotted #ccc; font-size: 14px; padding: 0.35em 0.15em; }
.payment-history th { border-bottom: 2px solid #ccc; font-size: 14px; font-weight: bold; padding: 0.35em 0.15em; }
.payment-history .total td { border-top: 3px double #ccc; font-weight: bold; }
.payment-history tr.transaction-row:hover td { background: #f3ff87; cursor: pointer; }
.payment-history tr.transaction-row.current td { background: #fff; font-weight: bold; }

    /* Columns */
    .payment-history .amount { width: 11%; }
    .payment-history .date { width: 105px; }
    .payment-history .tools { width: 5%; }
    
    /* Transaction detail */
    .payment-history .transaction-detail:hover td { background: #fff; cursor: default; }
    .transaction-detail > td { background: #fff; padding: 8px; }
    .transaction-detail th { background: #f0f0f0; }
    .transaction-detail th.memo { width: 45%; }
    .transaction-detail:hover .current td { background: #ffc; }
    
        /* Transaction item */
        .transaction-details .current th { background: #eec; font-weight: bold; }
        .transaction-details .current td { background: #ffc; }
        .transaction-details tfoot td { border-top: 3px double #888; font-weight: bold; }

/* Profile */
#profile-primary { float: right; width: 74.14%; }
#profile-secondary { float: left; width: 22.43%; }
#profile-photo img { display: block; width: 100%; }

/* Progress */
.progress { font-size: 18px; list-style: none; margin: 15px 0 30px; text-align: center; }
.progress a { text-decoration: none; }
.progress a:hover { opacity: 0.7; }
.progress .current { font-weight: bold; }
.progress .current .step { background: #094e8b; }
.progress li { display: inline; margin: 0 1em; }
.progress .step { background: #ccc; border-radius: 3px; color: #fff; padding: 0.3em 0.7em 0.2em; }

/* Sponsors */
.sponsors h3 { border-top: 1px solid #ddd; margin: 30px 0 0; padding-top: 30px; font-size: 26px; font-weight: bold; text-align: center; }
.sponsors h3:first-of-type { border: 0; }

.slick-track { margin-top: 1em; margin-bottom: 1em; height: 100%; }
.slick-track .slide { margin: 0 27px; text-align: center; height: 100%; vertical-align: top; display: inline-block; align-items: center; justify-content: center; }
.slick-track .slide figure { width: 100%; text-align: center; margin: unset; height: 200px; }
.slick-track .slide figure img { width: 100%; vertical-align: middle; max-height: 150px; }
.slick-track .slide figure  a {display:block;position:relative; top:50%; transform:translateY(-50%);text-decoration:none;color:#333}

.sponsors-list button { background: #094e8b; height: 100%; width: 3%; border-radius: 3px; color: #fff; }
.sponsors-list button:hover { opacity: 0.7; text-decoration: none; color: #fff; background: #094e8b; }
.sponsors-list button:focus { color: #fff; outline: none; background: #094e8b; }

/* Soldout */
.soldout {
    background: #b9121b;
    border-radius: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    margin-left: 8px;
    padding: 1px 5px;
}

/* Tables */
.data td { border: 1px solid #d9d9d9; padding: 0.35em 0.5em; }
.total td { font-weight: bold; }
.num.n { color: #b5001a; }
.num.p { color: #33a700; }

    /* Fake grid layout */
    [class *= "grid"] { width: 100%; }
    [class *= "grid"] td { border: 0; padding: 0 20px 20px 0; }
    .grid3 td { width: 33%; }
    .grid4 td { width: 25%; }

/* Toggling options */
.closed { display: none; }

/* Upcoming meetings */
.upcoming-meetings { font-weight: bold; margin-bottom: 40px; text-align: center; }
.upcoming-meetings * { font-size: 18px; }
.upcoming-meetings .mute { font-size: 13px; font-weight: normal; }
.upcoming-meetings a { text-decoration: none; }
.upcoming-meetings a:hover { text-decoration: underline; }
.upcoming-meetings h3 { font-weight: normal; }
.upcoming-meetings h3, .upcoming-meetings p { margin-bottom: 0.8em; }
.upcoming-meetings, .upcoming-meetings a { color: #ca4c3d; }

/* Viewing options */
.view { margin-bottom: 1em; }
.view .active { font-weight: bold; }
.view li, .view p { margin-right: 0.7em; white-space: nowrap; }
.view li, .view p, .view ul { display: inline; }
.view ul { list-style: none; margin: 0; }

/* Waybill */
.waybill li { float: left; margin-right: 1%; text-align: center; width: 7%; }
.waybill ul { list-style: none; margin-left: 0; overflow: hidden; }