/*
    City of Vancouver Web Stylesheet (Wide)
    Latest update 20130924
*/

/* wide templates */
.contentWide #contentContainer {
    width: 735px;
}
.contentWide #content {
    padding-right: .3em;
}
.contentWide .modContainer{
    padding-right: .3em;
}
.contentWide .modContainer .basicBox,
.contentWide .modContainer .googleEvents,
.contentWide .modContainer .googleNews,
.contentWide .modContainer .imageList,
.contentWide .modContainer .simpleList,
.contentWide .modContainer .smallIconList,
.contentWide .modContainer .smallList,
.contentWide .modContainer .mediumIconList,
.contentWide .modContainer .unstyledTextBlock {
    width: 100%;
    padding-right: 0;
}
.contentWide .tabDetail .imageList, .contentWide .tabDetail .basicBox,
.contentWide .tabDetail .unstyledTextBlock, .contentWide .tabDetail .mediumIconList,
.contentWide .tabDetail .simpleList, .tabDetail .smallIconList, .tabDetail .youTube, 
.tabDetail .pdSet {
    width: 704px;
}

.contentWide .lastModified {
    width: 100%;
}

/* print override */
@media print {
    .contentWide #content,
    .contentWide .modContainer {
        width: 100%;
    }
}
 
/* wide template enhancement 20150310 */
img#landingBanner {
    margin: 0 1px 0.4em;
    padding:0;
/*    float: none; 
    clear: none;*/
    
    width: 720px;
    border-top: 0px!important;
    
    /* border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px; */
    /*height: 250px;*/
}

/* Start add extra css for landing banner icons */
.landingBanner-group
{
   position: inherit; 
   width: 100%; /* for IE 6 */
}
.landingBanner-caption
{
   position: absolute; 
   margin-top: 27%;
   left: 0; 
   right: 4px;
   text-align: right;
   padding: 1% 0 2% 0;
}
.landingBanner-caption span
{
   margin: 0px;
   padding: 2%;
   color: white; 
   font-size: 150%;
   background-color: #015982;
   background: rgba(1, 89, 130);
   background: rgba(1, 89, 130, 0.70);
   font-family: tahoma, chicago, sans-serif;
}
.landingBanner-caption span img
{
    margin-top: 0;
    margin-bottom: -1.5%;
}
@media (max-width: 650px) 
{
    .landingBanner-caption
    {
        right: 0;
    }
}
@media (max-width: 980px) 
{
    .landingBanner-caption span
    {
        font-size: 120%;
    }
    
    .landingBanner-caption span img
    {
        width: 6%;
        margin-bottom: -2%;
    }
}
@media screen and (max-width: 980px) and (max-width: 480px) 
{
    .landingBanner-caption span
    {
       font-size: 85%;
       padding: 2%;
    }
    
    .landingBanner-caption span img
    {
        width: 6%;
        margin-bottom: -1.5%;
    }
}
/* End add extra css for landing banner icons */
/* Start add extra css for landing banner caption */
.landingBanner-credit
{
    position: absolute;
    background: #fff;
    z-index: 90;
    height: 18px;
    overflow: hidden;
    opacity: 0.85;
    padding: 5px 20px;
    margin-top: 35%;
    width: 100%;
}
.landingBanner-credit span
{
    float: right;
    padding-right: 4em;
}
@media screen and (max-width: 980px) and (max-width: 480px) 
{
    .landingBanner-credit
    {
        height: 1em;
        overflow: hidden;
        opacity: 0.85;
        padding: 5px 20px;
        margin-top: 37%;
        width: 100%;
    }
    .landingBanner-credit span
    {
        font-size: 10px;
    }
}
/* End add extra css for landing banner caption */


.modContainer .largeIconFeature {
    width: 225px;
    overflow:hidden;
    /* background: #fff; */
    float: left; 
    margin-top: 3px;
    margin-bottom: 20px;
    /*margin-right: 13px;*/
    margin-right: 12.5px;
    /* border: 1px solid #fff; */
}
/*
.modContainer .largeIconFeature:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: #f1f0eb;
}
*/
.modContainer .largeIconFeature p {
    /*margin: 10px 12px 5px 12px;*/
    height: 65px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.modContainer .largeIconFeature h3 {
    height: 1.2em;
    height: 2em;
}
/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .modContainer .largeIconFeature {border-color: #f26234;}
body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .modContainer .largeIconFeature {border-color: #f26234;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .modContainer .largeIconFeature {border-color: #ad8359;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .modContainer .largeIconFeature {border-color: #9470b1;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .modContainer .largeIconFeature {border-color: #73b749;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .modContainer .largeIconFeature {border-color: #0d87c9;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .modContainer .largeIconFeature {border-color: #f9b73c;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .modContainer .largeIconFeature {border-color: #868886;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .modContainer .largeIconFeature {border-color: #d6422f;}
*/

.contentWide .modContainer .largeIconFeature img.icon {
    float: none; 
    margin: 0; 
    width: 100%;
    height: 129px;
}
/*
.contentWide #contentContainer .rounded-corners { 
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
}
*/
/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .modContainer h2.modHeader {background: #f26234; color: #fff;border-color: #fff;}
body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .modContainer h2.modHeader {background: #f26234; color: #fff;border-color: #fff;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .modContainer h2.modHeader {background: #ad8359; color: #fff;border-color: #fff;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .modContainer h2.modHeader {background: #9470b1; color: #fff;border-color: #fff;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .modContainer h2.modHeader {background: #73b749; color: #fff;border-color: #fff;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .modContainer h2.modHeader {background: #0d87c9; color: #fff;border-color: #fff;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .modContainer h2.modHeader {background: #f9b73c; color: #fff;border-color: #fff;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .modContainer h2.modHeader {background: #868886; color: #fff;border-color: #fff;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .modContainer h2.modHeader {background: #d6422f; color: #fff;border-color: #fff;}
*/

.contentWide .modContainer h2.modHeader {
    padding: 8px 12px 6px 12px;
    margin: 0;
    border-bottom: #0279B1 3px solid;
    clear:both;
    font-size: 1.22em;
}
.contentWide .modContainer a.largeIconFeatureLink:hover {
    text-decoration: none;
}
 
.contentWide .info-notice-box {
    font-size: 150%;
    line-height: 1.3em;
    background: #FFF;
    margin: 1.3em 10%;
    padding: .2em 1em;
}
.contentWide .floating-box-right, .contentWide .info-notice-box-right {
    float: right;
    width: 23%;
    margin: .3em 0 .7em 1em;
    min-width: 170px;
}
.contentWide .floating-box-left, .contentWide .info-notice-box-left  {
    float: left;
    width: 23%;
    margin: .3em 1em .7em 0;
        min-width: 170px;
}

.contentWide .floating-box-one-third-left {
    float: left;
    width: 27%;
    margin: .3em 1em .7em 0;
    min-width: 170px;
}
.contentWide .floating-box-one-third-right {
    float: right;
    width: 27%;
    margin: .3em 0 .7em 1em;
    min-width: 170px;
}
.contentWide .floating-box-one-half-left {
    float: left;
    width: 44%;
    margin: .3em 1em .7em 0;
    min-width: 170px;
}
.contentWide .floating-box-one-half-right {
    float: right;
    width: 44%;
    margin: .3em 0 .7em 1em;
    min-width: 170px;
}
.contentWide .floating-box-one-half-left-last-item {
/*    float: right;*/
    margin-right: 0;
}

/*
.contentWide .floating-box {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border: 1px solid #93958b;
    padding: 1.1em;
}
*/  

.contentWide .floating-box, .contentWide .example-box {
    padding: 1.1em;
    border: 1px solid #d9d9d5;
}

.contentWide .floating-box > h2:first-child, .contentWide .floating-box > h1:first-child, .contentWide .floating-box > h3:first-child {
    margin-top: 0;
}
.contentWide .floating-box-noborder {
    border: 0px solid #93958b;
    padding: 1.1em;
}
.contentWide .floating-box p {
    line-height: 1.22em!important;
}
.contentWide .example-box {
    margin: 1.3em 5%;
    /* padding: 1em; */
    clear: both;
}
.contentWide .floating-box-feature-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
    max-width: 170px;
}
.contentWide .floating-box-title {
    font-weight: bold;
    font-size: 1.1em;
    font-family: tahoma, chicago, sans-serif;
    margin-top: 0;
}
/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .floating-box, body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .example-box {border-color: #f26234;}
body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .floating-box, body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .example-box {border-color: #f26234;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .floating-box, body.s5785640C8B3C4775A3C50AC844695609 .contentWide .example-box {border-color: #ad8359;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .floating-box, body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .example-box {border-color: #9470b1;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .floating-box, body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .example-box {border-color: #73b749;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .floating-box, body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .example-box {border-color: #0d87c9;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .floating-box, body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .example-box {border-color: #f9b73c;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .floating-box, body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .example-box {border-color: #d6422f;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .floating-box, body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .example-box {border-color: #868886;}
*/

.contentWide .floating-box.box-link:hover, .contentWide .example-box.box-link:hover {
	opacity: 0.8;
	box-shadow: 0px 4px 31px -9px rgba(0,0,0,0.75);
}

.contentWide .floating-box-no-border {
    border: 0px;
}
/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .info-notice-box {border-left: 7px #f26234 solid;}
body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .info-notice-box {border-left: 7px #f26234 solid;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .info-notice-box {border-left: 7px #ad8359 solid;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .info-notice-box {border-left: 7px #9470b1 solid;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .info-notice-box {border-left: 7px #73b749 solid;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .info-notice-box {border-left: 7px #0d87c9 solid;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .info-notice-box {border-left: 7px #f9b73c solid;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .info-notice-box {border-left: 7px #d6422f solid;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .info-notice-box {border-left: 7px #868886 solid;}
*/

.contentWide .info-notice-box {border-left: 7px #5DA61B solid;}

/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .info-notice-box-left {border-right: 7px #f26234 solid; border-left: 0px;}
body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .info-notice-box-left {border-right: 7px #f26234 solid; border-left: 0px;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .info-notice-box-left {border-right: 7px #ad8359 solid; border-left: 0px;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .info-notice-box-left {border-right: 7px #9470b1 solid; border-left: 0px;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .info-notice-box-left {border-right: 7px #73b749 solid; border-left: 0px;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .info-notice-box-left {border-right: 7px #0d87c9 solid; border-left: 0px;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .info-notice-box-left {border-right: 7px #f9b73c solid; border-left: 0px;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .info-notice-box-left {border-right: 7px #d6422f solid; border-left: 0px;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .info-notice-box-left {border-right: 7px #868886 solid; border-left: 0px;}
*/

.contentWide .info-notice-box-left {border-right: 7px #5DA61B solid; border-left: 0px;}

.contentWide .top-bottom-bar {
    border-left: 0px!important;
    border-right: 0px!important;
    border-top: 4px #0279B1 solid;
    border-bottom: 4px #0279B1 solid;
}

/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .top-bottom-bar { border-top: 4px #f26234 solid; border-bottom: 4px #f26234 solid;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .top-bottom-bar { border-top: 4px #ad8359 solid; border-bottom: 4px #ad8359 solid;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .top-bottom-bar { border-top: 4px #9470b1 solid; border-bottom: 4px #9470b1 solid;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .top-bottom-bar { border-top: 4px #73b749 solid; border-bottom: 4px #73b749 solid;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .top-bottom-bar { border-top: 4px #0d87c9 solid; border-bottom: 4px #0d87c9 solid;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .top-bottom-bar { border-top: 4px #f9b73c solid; border-bottom: 4px #f9b73c solid;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .top-bottom-bar { border-top: 4px #d6422f solid; border-bottom: 4px #d6422f solid;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .top-bottom-bar { border-top: 4px #868886 solid; border-bottom: 4px #868886 solid;}
*/

.contentWide .example-quote {
    border-left: 0px!important;
    border-right: 0px!important;
}
.contentWide .example-quote:before {
  content: open-quote;
  font-size: 2.5em;
  position: relative;
  top: 15px;
}
.contentWide .example-quote:after {
  content: close-quote;
  font-size: 2.5em;
  position: relative;
  top: 15px;
  line-height: 0em;
}

/*
body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .example-quote:before, body.s5E53ECCF5AC443878F82677BA9E10A08 .contentWide .example-quote:after {color: #f26234;}
body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .example-quote:before, body.s66ED949F063F4F5186AA9B8C51ECF602 .contentWide .example-quote:after {color: #f26234;}
body.s5785640C8B3C4775A3C50AC844695609 .contentWide .example-quote:before, body.s5785640C8B3C4775A3C50AC844695609 .contentWide .example-quote:after {color: #ad8359;}
body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .example-quote:before, body.s40817C78182C4DF6A38920F36FFA0369 .contentWide .example-quote:after {color: #9470b1;}
body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .example-quote:before, body.s3D48BA295D9A4E8FAE0F95755D65318D .contentWide .example-quote:after {color: #73b749;}
body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .example-quote:before, body.s95C37A60D9EF4577B6E4DAFDE81CD315 .contentWide .example-quote:after {color: #0d87c9;}
body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .example-quote:before, body.sC2B4C2DC13D8429385393D092BE31D4A .contentWide .example-quote:after {color: #f9b73c;}
body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .example-quote:before, body.s1B48E3BC89AD4680B2E902C48640C64A .contentWide .example-quote:after {color: #d6422f;}
body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .example-quote:before, body.s83B05EAE7905419981E4FC0BE75FA7D8 .contentWide .example-quote:after {color: #868886;}
*/

.contentWide .example-quote:before, .contentWide .example-quote:after {color: #0279B1;}

/* add to enhance module different width */
.contentWide .imgallpadding {
    margin-right: 10px;
}
.contentWide .module-one-half-width {
    float: left;
    width: 48%!important;
    margin: .3em 10px .7em 1px;
    min-width: 170px!important;
    
}
.contentWide .module-one-half-width-right {
    float: right;
    width: 48%!important;
    margin: .3em 0em .7em 10px;
    min-width: 170px;
}
.contentWide .module-one-third-width {
    float: left;
    width: 31.5%!important;
    margin: .3em 10px .7em 1px;
    min-width: 170px;
}
.contentWide .module-one-third-width-right {
    float: right;
    width: 31.5%!important;
    margin: .3em 0em .7em 10px;
    min-width: 170px;
}
.contentWide .module-two-third-width {
    float: left;
    width: 64%!important;
    margin: .3em 10px .7em 1px;
    min-width: 170px;
}
.contentWide .module-two-third-width-right {
    float: right;
    width: 64%!important;
    margin: .3em 0em .7em 10px;
    min-width: 170px;
}
.contentWide .floating-box.module-two-third-width, .contentWide .floating-box.module-two-third-width-right,
.contentWide .floating-box-noborder.module-two-third-width, .contentWide .floating-box-noborder.module-two-third-width-right {
    width: 60%!important;
}

/* 3 col to wide template */
.bottomPanel {
clear: both;
padding-top: 10px;
}

.bottomPanel .basicBox,
.contentWide .modContainer .bottomPanel .basicBox, 
.contentWide .modContainer  .bottomPanel .googleEvents, 
.contentWide .modContainer  .bottomPanel .googleNews, 
.contentWide .modContainer  .bottomPanel .imageList, .contentWide .modContainer .bottomPanel .simpleList, .contentWide .modContainer .bottomPanel .smallIconList, .contentWide .modContainer .bottomPanel .smallList, .contentWide .modContainer .bottomPanel .mediumIconList, .contentWide .modContainer .bottomPanel .unstyledTextBlock
{
	width: 31.5%!important;
	float: left;
	margin-top: 7px;
}

.content3ColToWide .largeIconFeature h2 {
	height: 37px;
}

.content3ColToWide .largeIconFeature p {
	height: 98px;
}

@media screen and (min-width: 740px) {
body #doc .content3ColToWide .bottomPanel .imageList .listItem img {
	width: 92%!important;
}
}

@media screen and (max-width: 740px) {
	.bottomPanel .basicBox,
	.contentWide .modContainer .bottomPanel .basicBox, 
	.contentWide .modContainer  .bottomPanel .googleEvents, 
	.contentWide .modContainer  .bottomPanel .googleNews, 
	.contentWide .modContainer  .bottomPanel .imageList, .contentWide .modContainer .bottomPanel .simpleList, .contentWide .modContainer .bottomPanel .smallIconList, .contentWide .modContainer .bottomPanel .smallList, .contentWide .modContainer .bottomPanel .mediumIconList, .contentWide .modContainer .bottomPanel .unstyledTextBlock
{
		width: 100%!important;
	}
}

.bottomPanel .bottom3item {
clear: left;
}