/* -- Mobile Layout */

#view-options span{ display: none;}
span#view-responsive{ display: none; }

@media only screen and (max-width : 960px){

	body{
		width: 100%;
	}
	html {
		-webkit-text-size-adjust: none;
		/* Prevent font scaling in landscape */
	}
	object,
	iframe{
		width: 100%;
	}

	#cmsMenu {
		overflow: auto;
		height: inherit;
	}
	#cmsMenu h1 {
		font-size: 1.4em;
	}
	#cmsMenu ul li.drop a {
		background-image: none;
		padding-right: 10px;
	}
	#cmsMenu li.drop ul {
		display: none;
	}

	#view-options span{
		display: inline-block;
		background-color: #222;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		padding: 8px 16px;
		-moz-border-radius: 8px;
		border-radius: 8px; }
	span#view-full{ display: inline-block; }
	span#view-responsive{ display: none; }

	div.grid_4#side-content{
		display: none;
	}
	#content-wrap h1#project-name {
		padding-right: 100px;
	}
	#content-wrap.program div.grid_4#side-content{
		display: block;
		width: 100%;
	}
	#content-wrap.program div.grid_4#side-content > *{
		display: none;
	}
	#content-wrap.program div.grid_4#side-content nav#section-nav li a{
		font-size: 1.55em;
		padding: 12px;
	}
	.slicknav_menu {
		display: block;
	}


	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12,
	.grid_13,
	.grid_14,
	.grid_15,
	.grid_16,
	.container_16,
	.container_16 .grid_11,
	.container_16 .grid_5,
	.container_12 .grid_9,
	.container_16 .grid_12,
	.container_16 .grid_16,
	#under-stripe,
	#bureau-titles
	{
		width:100%;
		min-width: inherit;
		margin:0;
		padding:0;
	}

	div#section-breadcrumbs{
		position: relative;
		top: 36px;
		width: auto;
		line-height: 2em;
	}

	#content-wrap{
		padding:10px 0 20px;
		top:36px;
		margin-bottom: 40px;
	}
	#main-header{
		position: relative;
		min-width: inherit;
	}
	#main-header h1{
		height: 38px;
		width: 100%;
		margin: 0px;
	}
	#city-logo{
		background-position: 8px 4px;
		background-size: 228px 28px;
	}
	#beta-hint, #beta-badge{display: none}
	#header-stripe{height:auto;}
	#under-stripe{height: 60px;}
	/* Hiding these for now */
	nav#breadcrumbs{
		visibility:hidden;
		width: inherit;
	}

	#utility-tools,
	#utility-stripe{
		width: 100%
	}
	#google_translate_element{
		position: relative;
		left: 4px;
		top: -11px;
		height: 0;
		width: 0;
	}
	#google_translate_element .skiptranslate.goog-te-gadget {
		overflow: visible;
	}

	#header-stripe #search-form-wrap{
		width: 100%;
		position: absolute;
		float: none;
		top: 140px;
		z-index:98;
		padding: 4px 3px 5px 109px;
		margin: 0;
		right: 0;
		background: url('/assets/images/bg-body.gif') right;
		border-bottom: 1px solid #bababa;
	}

	#header-stripe form{float: right;}

	#header-stripe #mobile-nav-button{
		width: 38px;
		height: 43px;
		background: url('/assets/images/mobile-ridges.png') no-repeat center center;
		position: absolute;
		top: 137px;
		border-right: 1px solid #bababa;
		cursor: pointer;
		z-index: 99;
	}
	#header-stripe #mobile-nav-button:hover{

	}

	div.program-nav-block{
		border:1px solid #dadada;
		padding: 6px;
		margin: 12px 6px;
		background-color: #E8E8E3;
		text-align: center;
	}

	div.program-nav-block h3{
		margin: 0;
		padding: 0;
	}
	div.program-nav-block select#section-nav-mobile{
		font-size: 2em;
		width: 100%;
	}
	#bureau-titles{
		padding: 0px 0px 6px 5px;
		height: 60px;
	}
	#bureau-titles .parent-org{
		display: none;
	}
	#bureau-titles h1{
		font-size: 1.9em;
		margin: 8px 0px 0px 0px;
	}
	#bureau-titles h2{
		font-size: 0.9em;
	}
	#bureau-titles hgroup{
		height: auto;
		padding:0;
	}
	#bureau-contact-info{
		display:none; /* Hiding for now */
		width:100%;
		float:none;
		text-align: left;
		border-top: 1px dotted #888;
		margin:8px;
		padding-top: 8px;
	}
	#bureau-contact-info .cell{
		height: auto;
	}

	#bureau-contact-info #bureau-phone-numbers .desc{
		font-size: 0.9em;
	}

	/** Bureau Navigation **/
	#bureau-nav{
		background-color:#FFF;
		border: none;
		position: relative;
		top: 42px;
		z-index: 90;
		display: none;
	}
	#bureau-nav li{
		background-color: #2a2927;
		display: block;
		float: none;
		text-transform: none;
		background-image: none;
		border-bottom: 2px solid #FFF;
		border-right: none;
	}
	#bureau-nav li:hover{
		background: #2a2927;
	}
	#bureau-nav li a{
		padding: 18px 12px;
		font-size: 1.55em;
	}
	#bureau-nav li a:after {
		position: absolute;
		right: 12px;
		content: "\203A"; /* https://css-tricks.com/snippets/html/glyphs/ */
		font-size: 2em;
		line-height: .3em;
	}
	#bureau-nav a:hover, #bureau-nav a.current, #bureau-nav a.current, #bureau-nav a:hover{
		color: white;
		background-image: none;
		background-color: #666;
	}
	#bureau-nav a.current{color:#FFF;}
	#bureau-nav ul li:first-child{display:none;}

	#bureau-contact-info-mobile {
		display: block;
		padding: 18px 0;
		color: white;
		font-size: 1.3em;
		line-height: 1.2em;
		background-color: #2a2927;
		background: linear-gradient(180deg, #666, #2a2927);
		border-bottom: 2px solid #FFF;
	}
	#bureau-contact-info-mobile .bureau-phone-numbers,
	#bureau-contact-info-mobile .adr,
	#bureau-contact-info-mobile .more {
		padding: 0 12px;
	}
	#bureau-contact-info-mobile .bureau-phone-numbers a {
		display: inline;
		padding: 0;
		border-bottom: 1px dotted #eee;
	}
	#bureau-contact-info-mobile .more {
		font-size: 1.2em;
	}
	#bureau-contact-info-mobile .more a {
		padding: 10px 12px;
		background: #666;
		text-align: center;
	}
	#bureau-contact-info-mobile .more a:after {
		/* content: "\0020 \BB"; */
	}

	/* Sub Page */
	article section img[width]{
		max-width: 100%;
	}

	.wysiwyg ul li{
		font-size: 1.5em;
		margin-bottom: 1em;
	}

	section#main-content table,
	section#main-content table tr,
	section#main-content table td{
		max-width: 100% !important;
	}

/* Testing responsive images
	section#main-content img {
		float: none;
		width: 100%;
		height: inherit;
		margin: 0;
	}
*/

/*============ TEMPLATE-SPECIFIC STYLES =============*/

	/*---------- SITE MAP ---------------
	#content-wrap .sitemap{
		width: 100%;
	}

	#content-wrap .sitemap ul,
	#content-wrap .sitemap li{
		margin: 0;
		border: none;
		font-size: 1em;
	}

	#content-wrap .sitemap ul li,
	#content-wrap .sitemap ul li a{
		margin: 0;
		padding: 0;
	}

	#content-wrap .sitemap ul{
		margin-top: 24px;
	}

	#content-wrap .sitemap ul li:before{
		content: none;
	}
	*/

	/*---------- PAGE LISTINGS ----------*/
	#main-content .page-listings{
		width: 90%;
		margin: 16px;
	}
	#main-content .page-listings h2,
	#main-content .page-listings ul{
		width: 100%;
	}
	#main-content .page-listings p{
		width: 100%;
		margin-top: 6px;
	}
	section#main-content .grid_5.page-listings a{
		font-size: 1.2em
	}
	section#main-content .grid_5.page-listings a:after{
		content:" >";
	}

	/*------- LISTS --------*/
	.program #i-want-to ul{

	}
	section.full-text ul li{
		line-height: 1.4em;
		margin-bottom: 12px
	}
	section.full-text ul{
		margin-bottom: 24px
	}

	/*------- FOOTER ----------*/
	#footer-directory{
		margin: 0px;
		padding: 22px 22px;
	}
	#footer-directory li.grid_4{
		margin-bottom: 24px;
	}

	#copyright{
		text-align: center;
	}
	#seal-footer{padding-right: 22px;}
	#footer{
		padding-bottom: 95px;
		margin-top: 24px;
	}
	#footer #seal-footer{
		top: 0;
	}
	#footer #PCI_Badge {
		bottom: -75px;
	}

	/*-------- SLIDESHOW --------*/
	.flexslider ul.slides li img,
	.home .flexslider ul.slides li img{
		height: inherit;
	}

	.home#content-wrap .flex-caption .caption-header{
		font-size: 0.9em !important;
	}

	.subpage#content-wrap p.flex-caption{
		margin: 0;
	}

	#content-wrap #main-content ul.slide-counter{
		margin-top: 8px;
		height: 20px;
	}

	.view-all-pages{
		width: 90%;
		margin:0;
		padding: 0;
	}

	/*------------- TYPOGRAPHY ------------*/

	.wysiwyg p{
		padding-left: 0px;
		padding-right: 0px;
	}

	.wysiwyg a,
	.full-text a{
		word-wrap: break-word;
	}

	.wysiwyg,
	.full-text{
		margin-top: 16px;
		font-family: sans-serif;
	}
	article{
		margin-bottom: 0px;
	}
	article header h2{
		margin: 12px 16px 0px;
	}
	.full-text,
	article p{
		padding: 16px;
	}
	article.comment p{
		padding: 0px;
	}
	section#comments > header h3,
	section#comments > header p {
		padding: 0 16px;
	}
	#comments .comment > * {
		padding-left: 16px;
		padding-right: 16px;
	}
	#comments .comment header img {
		left: 16px;
	}
	.full-text p{
		padding: 0;
		line-height: 1.325em
	}
	.p27 p,
	#content-wrap .blog .p27 p{
		font-size: 1.5em;
		line-height: 1.3em;
		margin-bottom: 1.3em;
		padding: 0 16px;
	}
	#content-wrap td{
		vertical-align: top
	}

	#content-wrap h1, .mceContentBody h1 {
		font-size: 2em;
		margin-bottom: 10px;
		padding: 12px;
	}

	.full-text h3{
		margin-top: 24px;
	}
	.alpha.omega.widget p{
		padding: 0px 14px;
	}

	/* Misc */
	div.rowsep{display:none;}

	/* Google Translate */
	div#goog-gt-tt, object#fI0hkpu4ia0{
		width: 100%;
		padding: 0;
		margin: 0;
	}

	/* View options */
	#view-options{
		background: #FFF;
		width: 100%;
		text-align: center;
		font-size: 1.3em;
		height: 60px;
		margin-top: 0;
		padding-top: 10px;
	}


	/***** CALENDAR VIEW *****/
	.calendarWrap hr{display: none}
	.calendarWrap nav{display:none;}
	#calendarOptions{
		background: #666;
		margin-bottom: 2.2em;
		height: 104px;
	}
	#calendarOptions h2{
		color: #FFF;
		padding-left: 10px;
		font-size: 1.8em;
	}
	#calendarOptions select{
		font-size: 1.5em;
	}
	#calendarOptions input[value=">"]{
		float:right;
	}
	#calendarOptions input[value="<"]{
		float:left;
	}
	#calendarOptions input.button{max-resolution: 0;}
	#calendarOptions table{
		margin: 0;
	}
	#calendarOptions table td{
		text-align: center !important;
		background: #666;
		padding: 8px 16px;
		border-left: none;
		border-right: none;
	}


	/** List Display **/
	div#eventList{
		padding: 22px;
	}
	#eventList h2{
		background: #e3e3e3;
		margin: 0px;
	}
	#eventList ul{
		border-top: 1px solid #bdbdbd;
		margin-bottom: 2.2em;
	}

	#eventList h3.summary{
		font-size: 1.5em;
		font-weight: normal;
		line-height: 1.3em;
	}
	#eventList p.location{
		font-size: 1.2em;
		margin-bottom: 0.3em;
		margin-top: 0.3em;
	}
	#eventList p.event-date, #eventList .spen.dtend{
		font-size: 1.1em; font-weight: bold;
	}
	#eventList p.event-fee{}
	#eventList p.event-length{}
	#eventList p.description{
		margin-bottom: 0px;
	}

	/*--------- EVENT DETAIL ---------*/
	.eventDetail div.vevent{
		width: 90%;
		padding: 16px;
	}

	.vevent .wysiwig{
		padding: 0;
		margin: 0;
	}



	/*--------- BUREAU HOME ---------*/
	#feature-wrap .recently-added,
	.home #main-content .grid_6,
	.widget{
		display: block;
		float: none;
		width: 100%;
	}

	#content-wrap .widget h1{
		font-size: 1.6em;
		margin: 8px 0px;
		padding: 8px 16px 8px 16px;
	}

	#feature-wrap .recently-added,
	#side-content{
		padding: 0;
		margin: 0;
	}



	/*----------- I WANT TO MENU ---------*/
	#main-content #i-want-to.alpha.omega.widget{
		margin: 0px;
	}
	#i-want-to ul,
	.program #i-want-to ul{
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#i-want-to ul li,
	.program #i-want-to ul li{
		display:block;
		width: 98%;
		text-align: left;
		padding: 16px;
		height: 100%;
	}

	#i-want-to ul li a,
	.program #i-want-to ul li a{
		font-size: 1.4em;
		line-height: 1.3em;
		font-weight: normal;
		padding: 0px;
		margin: 0px;
		color:#2289a8;
		display: block;
	}

	#i-want-to ul li a br,
	.program #i-want-to ul li a br{
		display: none;
	}


	/* Featured Items */
	#feature-wrap .recently-added{
		height: auto
	}
	#feature-wrap .recently-added ul{
		padding: 0px 16px;
		margin: 0;
		height: auto;
	}
	#feature-wrap .recently-added ul li{
		font-size: 1.3em;
	}
	#feature-wrap .recently-added ul li a{
		padding: 8px 0px;
	}


/*============== WIDGETS ==============*/


	/* Remove Social Media Widgets */
	.facebook-feed, .facebook-photos, .youtube-widget, .widget.tweets, .twitter-timeline{
		display:none;
	}

	/*------ MISSION STATEMENT -------*/
	#main-content .alpha.omega.widget{
		margin-bottom: 24px;
	}

	/*------ CONNECT ------*/
	#side-content .widget.connect{
		margin-bottom: 12px;
	}
	#side-content .widget.connect li{
		width:49%;
		padding: 0px;
	}
	#side-content .widget.connect li a{
		width: 100%;
		height: 100%;
	}
	#side-content .widget.connect ul{
		padding-left: 16px;
	}
	#side-content div.leadership ul{
		margin-left: 16px;
	}
	#side-content div.leadership ul li{
		padding: 0px;
		margin-bottom: 12px;
	}


	/*------ EVENTS/BLOG ------*/
	.program .blog div.content{
		width: 240px;
	}

	.widget.blog ol,
	.program .widget.blog ol,
	.widget.events ol{
		padding: 0 16px;
	}

	.home .widget.events .content{
		width: 82%;
	}

	.home .blog p{
		font-size: 1.2em;
	}

	.blog article{
		margin-bottom: 42px;
	}

	#content-wrap .blog h1{
		padding: 8px 22px;
		border-top: 3px solid #dedede;
	}

	.blog span.post-date{
		padding: 0px 6px;
		margin: 0px;
	}

	.blog p.link{
		padding: 0px 22px;
		word-break: break-word;
	}

	.blog p.summary{
		font-size: 1.7em;
		padding-top: 12px;
		padding-right: 22px;
		padding-bottom: 12px;
		padding-left: 22px;
		line-height: 1.2em
	}

	.blog .full-text{
		padding: 0px 22px;
		margin-top: 12px;
	}

	/*------ AD BLOCK ------*/
	#side-content .widget.ad1{
		margin:0px;
	}
	#side-content .widget.ad1 p{
		font-size: 1.2em;
		padding: 4px 16px 16px 16px;
	}
	#side-content .widget.ad1 img{
		/*width: 372px !important;
		height: 278px !important;*/
	}


/*========= BUREAU-SPECIFIC STYLES ==========*/

	/*-------- Default Logo Size -------*/
	#bureau-titles img.logo {
		height: 44px;
		width: 44px;
		margin: 8px;
		padding: 0;
	}

	/*-------- BPS -------*/
	#pog-bps img.logo{
		width: 58px;
	}

	/*------- Dashboard -------*/
	#pog-dashboard img.logo{
		width: 83px;
	}

	/*------- FPDR -------*/
	#pog-fpdr img.logo{
		width: 37px;
	}

	/*------- Green Atlas -------*/
	#pog-green_atlas img.logo{
		width: 32px;
	}

	/*------- ONI -------*/
	#pog-oni img.logo{
		width: 23px;
	}

	/*------- PARKS -------*/
	#pog-parks img.logo{
		width: 55px;
	}

	/*------- POLICE ------*/
	#pog-police img.logo{
		margin-right: 0px;
	}

	/* Police Calls Map */
	#pog-police .widget iframe{
		width: 100%
	}
	.widget.police-calls #police-calls-key ul li:first-of-type{
		display: block;
	}

	/*------- RDPO -------*/
	#pog-rdpo img.logo{
		width: 66px;
	}

	/*------- Transportation -------*/
	#pog-transportation img.logo{
		width: 153px;
	}

	/*------- Water -------*/
	#pog-water img.logo{
		width: 66px;
	}

}