/***********************************************************************************************
	311 toronto.ca index page style sheet - jmclart@toronto.ca
	last edited nov 7, 2011 - jmclart@toronto.ca
		- added native iOS scrolling to service request lists (requires iOS 5)
************************************************************************************************/


/* Margins & padding */
*, body, h1, h2, h3, h4, h5, h6, form, p, input /*,ul, li*/ { margin: 0px;  padding: 0px; }

/* Font preferences */
body { 
	font-size:100%; 
	font-family: arial, helvetica, sans-serif;
	background-color: #ffffff;
	margin-top:5px;
}

div#wrapper {
	width: 929px;
	margin: auto;
	text-align: left;
}

#layout { 
	float:left;
	width: 929px;
	background: #ffffff;
	margin-bottom:20px;
}


h1, h2, h3, h4, h5, h6{ 
	font-size: .85em; /* 16px * 0.75 = 12px */ 
	line-height: 1.5em;
}

p, li, /*form,*/ h1, span { 
	font-size: .75em; /* 16px * 0.75 = 12px */ 
	line-height: 1.5em;
}

.hide { position: absolute; left: -200em;}

/* Positioning*/

/* Header */
#header { 
	display:block;
	float: left;
	height: 70px;
	padding:15px 0 0 15px;
	width: 914px; /*899px*/
	overflow: hidden;
	background: #ffffff;
}

#logo {
	position: relative;
	z-index:10;
}

#header a.logo {
	z-index:20;
	padding-top: 74px; /* height of the replacement image */
   	float:left;
	height: 0px;
	width:158px;
	margin-right:15px;
    	overflow: hidden;
    	background-image:  url(../images/cot_logo_home.gif);
    	background-repeat: no-repeat;
}

#logo h1 {
	/*position: absolute;
	display:block;
	z-index:30;
	left:0px;
	height:70px;
	width:158px;
	padding-top:70px;
	overflow:hidden;*/
}

#main_nav {
	float:left;
	width:550px;
	list-style-type: none;
	background:#ffffff;
	margin-top:22px;
	padding:0;
	display:block;
}

#main_nav li {
	display:inline;
}

#main_nav li.living a {
	padding-top: 25px; /* height of the replacement image */
   	float:left;
	height: 0px;
	width:132px;
	margin-right:5px;
    	overflow: hidden;
	background: transparent url(../images/livingintoronto.gif) no-repeat 0 0;
}

#main_nav li.living a:hover, #main_nav li.living a.active {
	background: transparent url(../images/livingintoronto.gif) no-repeat 0 -25px;
}

#main_nav li.business a {
	padding-top: 25px; /* height of the replacement image */
   	float:left;
	height: 0px;
	width:132px;
	margin-right:5px;
    	overflow: hidden;
	background: transparent url(../images/doingbusiness.gif) no-repeat 0 0;
}

#main_nav li.business a:hover {
	background: transparent url(../images/doingbusiness.gif) no-repeat 0 -25px;
}

#main_nav li.visiting a {
	padding-top: 25px; /* height of the replacement image */
   	float:left;
	height: 0px;
	width:132px;
	margin-right:5px;
    	overflow: hidden;
	background: transparent url(../images/visitingtoronto.gif) no-repeat 0 0;
}

#main_nav li.visiting a:hover {
	background: transparent url(../images/visitingtoronto.gif) no-repeat 0 -25px;
}

#main_nav li.accessing a {
	padding-top: 25px; /* height of the replacement image */
   	float:left;
	height: 0px;
	width:132px;
	margin-right:5px;
    	overflow: hidden;
	background: transparent url(../images/accessingcityhall.gif) no-repeat 0 0;
    	/*background-image: url(../images/accessingcityhall.gif);
    	background-repeat: no-repeat;*/
}

#main_nav li.accessing a:hover {
	background: transparent url(../images/accessingcityhall.gif) no-repeat 0 -25px;
}

form#siteSearch { float:right; display: block; margin:0; padding:0; background:#ffffff;}

#search {
    float: right;
    display:block;
    width:190px;
    padding-top: 18px;
    margin:0;
}
 
#search input.textbox { float: left; margin-top: 5px; padding: 1px 3px; border: 1px solid #b2b2b2; width: 110px; }

#search button { float:left; background: url(../images/search.gif); border: none; height: 22px; width: 60px; margin: 5px 0 0 5px; }

/* end Header */

#image {
	float:left;
	position:relative;
	height: 206px;
	width: 929px;
	padding:0;
	margin:0;
	overflow:hidden;
}

#banner_nav {
	position: absolute;
	top:175px;
	left:20px;
}

#banner_nav ul {
	list-style: none;
}

#banner_nav ul li {
	display:inline;
	margin-right:10px;
}

#banner_nav ul li a {
	text-decoration:none;
	color:#999;
	padding: 0 15px;
	overflow:hidden;
	border: solid 1px #ddd;
	background:#999;
}

#banner_nav ul li a:hover, #banner_nav ul li a.active {
	background:#064e80;
	color:#333;
	border: solid 1px #ddd;
}


.scroll {
	color:#666666;
}

.scroll h3 a, #info_area .scroll h3 {
	color:#444;
	font-weight:bold;
	text-decoration:none;
}


#business_area {
	float:left;
	margin-top:5px;
	width:547px;
	/*background:#eeeeee;*/
}

#business_content {
	float:left;
	width:545px;
	height:458px;
	overflow: hidden;
	border: solid 1px #064e80;
}

#business_content .scroll{
	float:left;
	width:525px;
	height:413px;
	overflow: auto;
	padding:5px 10px;
	-webkit-overflow-scrolling: touch;
}

#business_content #request .scroll{
	width:530px;
}

#business_content .row img {
	margin-top:0;
}

#business_content .scroll div {
	width:495px;
	float:left;
	padding: 10px 0 10px 10px;
	border-bottom: solid 1px #a3a3a3;
}

	#business_content .scroll .square {
		text-decoration:none;
		display:block;
		float:left;
		position:relative;
		width:31%;
		height:125px;
		border:solid 1px #999;
		padding:0;
		margin:1%;
		overflow:hidden;
		background:#eee;
		
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box;
	}
	
/* 1st Row */
	
		#business_content .scroll .square.wastecollection { 
			background: #eee no-repeat url(../images/icons/garbage_truck.png) center 0px;}
		
		#business_content .scroll .square.wastecollection:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/garbage_truck.png) center 0px;}

		#business_content .scroll .square.wastebin { 
			background: #eee no-repeat url(../images/icons/garbage_bin.png) center 12px;}
		
		#business_content .scroll .square.wastebin:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/garbage_bin.png) center 12px;}

		#business_content .scroll .square.graffiti { 
			background: #eee no-repeat url(../images/icons/graffiti.png) center 15px;}
		
		#business_content .scroll .square.graffiti:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/graffiti.png) center 15px;}

/* 2nd Row */

		#business_content .scroll .square.roads { 
			background: #eee no-repeat url(../images/icons/pothole.png) center 15px;}
		
		#business_content .scroll .square.roads:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/pothole.png) center 15px;}

		#business_content .scroll .square.water { 
			background: #eee no-repeat url(../images/icons/water.png) center 15px;}
		
		#business_content .scroll .square.water:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/water.png) center 15px;}

		#business_content .scroll .square.trees { 
			background: #eee no-repeat url(../images/icons/trees.png) center 15px;}
		
		#business_content .scroll .square.trees:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/trees.png) center 15px;}


/* 3rd Row */

		#business_content .scroll .square.winter { 
			background: #eee no-repeat url(../images/icons/winter.png) center 15px;}
		
		#business_content .scroll .square.winter:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/winter.png) center 15px;}

		#business_content .scroll .square.property { 
			background: #eee no-repeat url(../images/icons/property.png) center 15px;}
		
		#business_content .scroll .square.property:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/property.png) center 15px;}

		#business_content .scroll .square.complaints { 
			background: #eee no-repeat url(../images/icons/complaints.png) center 0px;}
		
		#business_content .scroll .square.complaints:hover { 
			background: #E2EBF1 no-repeat url(../images/icons/complaints.png) center 0px;}


		#business_content .scroll .square span{
			font-weight:bold;
			/*font-size:.75em;*/
			position:absolute;
			display:block;
			width:100%;
			left:0;
			bottom:0;
			background:#ddd;
			color:#333;
			padding:5px;
			border-top: 1px solid #999;
			text-align: center;
			
			-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box;
			-ms-box-sizing:border-box;
			box-sizing:border-box;
		}

	#business_content .scroll .square:hover{
		background: #E2EBF1;
		border:solid 1px #064E80;
	}

	#business_content .scroll .square:hover span{
		background: #064E80;
		color:#fff;
		border-top: none;
	}

#business_content .scroll div:hover {
	background-color:#eee;
}

#business_content .scroll div.squarecontainer:hover {
	background-color: transparent;
}

#business_content h3 {
	padding-left:118px;
}

#business_content img {
	float:left;
	margin-right:10px;
	margin-top:-18px;
	border:none;
}
#business_content div{
	float:left;
}

#info_area {
	float:left;
	margin-top:5px;
	margin-left: 12px;
	/*height:500px;*/
	width:370px;
	/*background:#eeeeee;*/
}

#info_content {
	float:left;
	width:368px;
	height:458px;
	overflow: hidden;
	border: solid 1px #507378;
}

#info_content .scroll{
	width:348px;
	height:413px;
	overflow: auto;
	padding:5px 10px;
	-webkit-overflow-scrolling: touch;
}

#info_content div{
	float:left;
	/*width:368px;
	height:458px;*/
}

#info_content img {
	float:left;
	margin-right:10px;
	background:#CCC;
}

#info_content .scroll div {
/*	width:328px;
*/	float:left;
	/*padding: 15px 0;*/
	padding: 15px 0 15px 10px;
	border-bottom: solid 1px #a3a3a3;
}

#info_content .knowledge_base {
	padding-top:90px; /*image height*/
	width:320px;
	height:0px;
	overflow:hidden;
	background: url(../images/knowledge_base.jpg) -5px 0 no-repeat;
	margin-bottom:10px;
	float:left;
}

#info_content .track_request {
	padding-top:23px; /*image height*/
	width:173px;
	height:0px;
	overflow:hidden;
	background: url(../images/track_request.jpg) no-repeat;
}

#track_num input.textbox { float: left; margin-left:5px; padding: 2px 3px; border: 1px solid #999999; width: 85px; background: #faf6ef; }


#track_num button { float:left; margin-left:5px; background: url(../images/go.gif); border: none; height: 22px; width: 28px; }

#info_content .scroll ol {
	list-style-type:none;
}

#info_content .scroll ol li{
	margin:5px 0;
}

.textbox { padding: 2px 3px; border: 1px solid #cccccc; width:150px}

.textarea { padding: 2px 3px; border: 1px solid #cccccc; width:320px; height:55px;}

#info_content .submit { float:right; margin-left:5px; background: url(../images/submit.gif); border: none; height: 22px; width: 60px; }

#info_content .more { float:right; margin-left:5px; background: url(../images/more.gif); border: none; height: 22px; width: 60px; }


#info_content .scroll ul {
	margin-left:30px;
	list-style-position: outside;
	list-style-type:disc;
}

#info_content .scroll ul li, #info_content .scroll ul li a {
	color:#666666;
	text-decoration:none;
	/*margin-left:-5px;*/
}


#info_content .scroll ul li a:hover {
	color:#666666;
	text-decoration:underline;
	/*margin-left:-5px;*/
}


#info_content .scroll p a, #info_content .scroll p a:visited, #info_content .scroll p a:hover  {
	color:#666666;
	text-decoration:underline;
}


.recent_questions {
	height:135px; 
	width:208px;
	padding-left:120px !important;
	background: no-repeat 0 14px url(../images/asking2.jpg);
	border-bottom:none !important;
}

#questions, .questions {
	display:block;
	margin:0 0 0 20px !important;
	padding:0 !important;
	min-height:115px;
	height:auto !important;
	height:115px;
	width:205px;
	overflow: hidden !important;
	border-bottom:none !important;
}

#questions li a, .questions li a {
	font-size:2.2em;
	line-height:1em;
	color: #517279 !important;
	text-decoration:none;
	font-family: "Arial Rounded MT Bold", arial, helvetica, sans-serif;
}

#questions  {
	font-size:1.25em;
	line-height:1em;
	color: #517279 !important;
	text-decoration:none;
	font-family: "Arial Rounded MT Bold", arial, helvetica, sans-serif;
}

.more_recent {
	padding-top:10px; 
	margin:0 0 0 20px; 
}

/* end content */

#onlineservices {
	float:left;
	width:929px;
	height:55px;
	overflow:hidden;
	background: #96abae url(../images/onlineservice_bg.gif) top right no-repeat;
	margin-top:10px;
}

#onlineservices h2 {
	padding-top: 55px; /* height of the replacement image */
   	float:left;
	height: 0px;
	width:175px;
	margin-right:15px;
    	overflow: hidden;
    	background-image: url(../images/onlineservices.gif);
    	background-repeat: no-repeat;
}

#sitemap {
	float: left;
	display: block;
	color: #44687d;
	background: #f4f6f7;
	padding: 5px;
	margin:0;
	margin-bottom: 20px;
	width: 919px;
	height:23em;
	overflow:hidden;
}

#sitemap h3 {
	color:#222222;
	font-size:.75em;
	font-weight:bold;
}
.column {
	float:left;
	width:173px;
	height:100%;
	border-left: 1px dotted #aaaaaa;
	padding: 0 5px;
}

.first {border-left: none;}

.column ul{
	margin:0;
	margin-left:20px;
	padding:0px;
	list-style-position: outside;
	list-style-type:disc;
	padding-bottom:10px;
}

.column li {
	padding:0 5px 0 0;
	margin:0;
}

#sitemap a, #sitemap a:visited  { 
	color: #44687d;
	text-decoration:none;
}

#sitemap a:hover { text-decoration: underline;}

/* end sitemap */


#footer{
	float: left;
	display: block;
	font-weight:bold;
	color: #333333;
	background: #fff;
	padding: 5px 10px;
	border-bottom: solid 3px #b2b2b2;
	width: 909px;
	margin-bottom:40px;
}


#footer a, #footer a:visited  { 
	color: #333333;
	text-decoration:none;
}

#footer a:hover { text-decoration: underline;}


/* The hint to Hide and Show */
#tooltip {
	/*visibility: hidden;*/
	font-size:0.75em;
	border: 1px solid #c93;
	padding: 10px 12px;
	/* to fix IE6, I can't just declare a background-color,
	I must do a bg image, too!  So I'm duplicating the pointer.gif
	image, and positioning it so that it doesn't show up
   	within the box */
     background: #ffc url(../images/pointer.gif) no-repeat -10px 5px;
	width: 215px /*150px*/ !important;
}

.hint_disabled { 
	padding-right: 15px; 
	/*padding-top: 5px; 
	padding-bottom: 2px; */
	background: url(../images/question_disabled.jpg) no-repeat right;
	text-decoration:underline;
	cursor: pointer;
	cursor: hand;
}

.hint_enabled {  
	padding-right: 15px; 
	/*padding-top: 5px; 
	padding-bottom: 2px;*/
	background: url(../images/question_enabled.jpg) no-repeat right;
	text-decoration:underline;
	cursor: pointer;
	cursor: hand;
}


.hint {
	display: none;
	position: absolute;
	z-index:200;
	font-size:1em;
	left: 375px;
	width: 180px;
	margin-top: 5px;
	border: 1px solid #c93;
	padding: 10px 12px;
	/* to fix IE6, I can't just declare a background-color,
	I must do a bg image, too!  So I'm duplicating the pointer.gif
	image, and positioning it so that it doesn't show up
	within the box */
	background: #ffc url(../images/pointer.gif) no-repeat -10px 5px;
}


/* The pointer image is added by using another span */
.hint .hint-pointer, #tooltip .hint-pointer {
	position: absolute;
	left: -10px;
	top: 5px;
	width: 10px;
	height: 19px;
	background: url(../images/pointer.gif) left top no-repeat;
}

/* end homepage tooltips */


/*start banner*/
#feature{
	position:relative;
	padding:0;
	margin:0;
	z-index:100;
	float:left;
	display: block;
	height: 206px;
	width: 929px;
	overflow:hidden;
}

#banner_floating-nav {
	margin: 0;
	padding:0;
	background: url(../images/navbg.gif); 
	width: 238px;
	height: 39px;
	position: absolute;
	z-index:100;
	top:167px;
	left:40px;
	overflow: hidden;
	filter:alpha(opacity=90); 
	opacity: 0.9; 
	-moz-opacity:0.9;
}

#photo {
    width: 10000%;
    white-space: nowrap;
    display: block;
}

#photo div { float:left; }
#photo div.image { width: 929px; height: 220px; display: block; float: left;}


#news-nav{
	padding:0;
	margin:0;
	overflow: hidden;
	width: 290px;
	height: 220px; 
	float: left;
}

#news{
	margin: 0;
	padding:0;
	width: 290px;
	height: 206px;
	position: absolute;
	z-index:200;
	top:0;
	left:0;
	left:639px;
	overflow: hidden;
}


.sliderpage {
	position: relative;
	float: left;
	width: 290px !important;
	height: 206px;
	top:0;
	left:0;
	padding-left:0px;
	padding-right:0px;
	z-index:400;
	overflow: visible !important;
}

.slidercontent{
	position:relative;
	color:#fff;
	width: 1716px;
	height: 206px;
}

#cotNwsPg0 div {
	position: relative;
	top:100px;
	left:140px;
}

#cotNwsPg1 div {
	position: relative;
	top:160px;
	left:140px;
}

#cotNwsPg2 div{
	position: relative;
	top:160px;
	left:140px;
}

#cotNwsPg3 div {
	position: relative;
	top:142px;
	left:140px;
}


.sliderpage a {
	padding-top: 35px; /* height of the replacement image */
   	float:left;
	height: 0px;
	width:100px;
    	overflow: hidden;
	background: transparent url(../images/learn_more.png) no-repeat 0 0;
}


.slidercontent .clear {
	float: left;
}

.slidercontent h2{ display: none; }

.slidercontent h3{
	font-size: 1em; /* 16px * 0.75 = 12px */ 
	line-height: 1.5em;
	font-weight:bold;
	color: #fff;
	padding-top:5px;
}

.cotSliderNav {
    width: 250px;
	position: relative;
	z-index:300;
	left:0;
	top:0;
	height:0px;  
}

.cotSliderNav .pages { 
    padding-top: 10px; 
    margin-left: 95px;
    
 }
 
.cotSliderNav .pages a.button, .cotSliderNav .pages a.deselect {

	padding-top: 13px; /* height of the replacement image */
	float:left; 
	width:26px;
	height: 0px;
	overflow: hidden;
	background: url(../images/nav-select-dot.jpg) no-repeat 0 -13px;
	display: block;
	margin: 0;
	text-decoration: none;
	color: #333;
	margin-left: 6px;

 
}

.cotSliderNav .pages a.button:hover, .cotSliderNav .pages a.select {
    background: url(../images/nav-select-dot.jpg) no-repeat 0 0;    
}


/*end banner*/


/****** Aural Styles *****/

.spell-out {
	speak:spell-out;
}



/* lkline added for Status Check enable/disable */
/* see alternate version of this style sheet with display settings reversed */
.status_check_enabled {
	display:block; 
}

.status_check_disabled {
	display:none; 
}