﻿/********styles for /EN/residents/transit/riding-with-us/Pages/See%20Something,%20Hear%20Something,%20Say%20Something.aspx***********/
.pageBanner{
	margin-bottom:0px!important
}
.ms-rteElement-cobHighlight{
	border-radius:5px;
	padding-top:10px;
	padding-bottom:10px;
}

@media (min-width:768px){
.ms-rteElement-cobHighlight{width:70%;
}
}
@media (min-width:999px){
.ms-rteElement-cobHighlight{width:60%;
}
}
/************general styles**********/
h2 i.fa{color:#0056AC;} /*font awesome icons*/
.line-divider{
	border-top:1px solid #E8E8E8; padding-top:15px; margin-top:15px;
}

/********service improvments**********/
.container .transit.jumbotron{
	padding:30px;
	border-radius:3px;
}
.container .transit.jumbotron.text-center h2{margin-top:0px;}
.container .transit.jumbotron.text-center p:first-line{font-size:150%;}
.container .transit.jumbotron.text-center p{
	font-weight:600
}
.row.jumbos{margin-top:30px;}
.container .jumbos .transit.jumbotron{padding:15px;}
@media (min-width:768px){.jumbos .transit.jumbotron{height:210px;}}
@media (min-width:999px){.jumbos .transit.jumbotron{height:180px;}}
@media (min-width:1200px){.jumbos .transit.jumbotron{height:auto;}}

/*************veterans pass button**************/
.veteranPass.btn { 
	width:100%;
    border-radius: 3px;
    margin-top:15px;
    margin-bottom:15px;
    -webkit-box-shadow: inset 110px 0px 289px -88px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 110px 0px 289px -88px rgba(0,0,0,0.5);
    box-shadow: inset 110px 0px 289px -88px rgba(0,0,0,0.5);

}
@media (min-width:480px){
	.veteranPass.btn {
	float:right;
    text-align: left;
    width:auto;
}

}

/*****************next ride page*************/
#tabbedLinks
{margin-bottom:-12px; padding-top:15px;
border-bottom:3px solid #062c6a;}

#tabbedLinks a
{display:inline-block;
color:#092d62!important;
text-align:center;
font-size:12px!important;
font-weight:bold;
text-align:center;
background-color:#c8dff3;
border:1px solid #89b3cc;
border-left:none;
border-bottom:none;
background-image: url("/_layouts/images/selbg.png") !important; 
background-repeat:repeat-x!important;
background-position:center -5px;
padding:7px 20px 10px 20px;
text-decoration:none!important;}

#tabbedLinks a:hover
{text-decoration:underline!important;
background-color: #97C1E8;}

#tabbedLinks a:first-child{
	border-left:1px solid #89b3cc;
}
/*******************service alerts pages***********/
#alertView .newsItem{
	margin-bottom:8px;
}
#alertView .newsItem .date{
width:130px;
font-size:85%;
text-align:center; 
background:#f0f0f0;
border-radius:3px 3px 0 0;
margin-right:6px;
line-height:1.75
}
#alertView .newsItem:hover .date{
	background-color:#0056AC;
	color:#fff;
}    

#alertView .newsItem .date span{
	display:inline;
}
#alertView .newsItem .newsBody{
	border-top:1px solid #ddd;
	display:block;
	padding:5px;
	padding-bottom:25px; 	
}

#alertView .newsItem .newsBody h2{
	margin-top:0px;
	font-weight:600;
	color:#0056ac;
	font-size:120%
}
#alertView .newsItem.detour h3{
	margin-top:0px;
	font-weight:600;
	font-size:120%
}
.newsBody .table>thead>tr>th {
    background-color: #f0f0f0;
    border-bottom: none;
}
@media (min-width:768px){
#alertView{
	margin-right:-15px;
}
	#alertView .newsItem .newsBody{
	font-size:90%
	}
	#alertView .newsItem .newsBody h2,
	#alertView .newsItem.detour h3{
		font-size:150%
	}
	#alertView .newsItem .newsBody h2{
		font-weight:400;
	}
	#alertView .newsItem.detour h3{
		font-weight:300;
	}
}
#alertView.updates h2{
	background-image: url('../images/home/icon-improvements.png');
    background-repeat: no-repeat;
    background-position: -15px -10px;
    padding-left: 30px;
    background-size: 54px;
}

#alertView.detours h2{
	background-image: url('../images/home/icon-detours.png');
    background-repeat: no-repeat;
    background-position: -15px -10px;
    padding-left: 30px;
    background-size: 54px;
}

#alertView.events h2{
	background-image: url('../images/home/icon-events.png');
    background-repeat: no-repeat;
    background-position: -15px -10px;
    padding-left: 30px;
    background-size: 54px;
}

#alertView.service h2{
	background-image: url('../images/home/icon-alerts.png');
    background-repeat: no-repeat;
    background-position: -15px -10px;
    padding-left: 30px;
    background-size: 54px;
}
.emptyView	{
	padding:15px 15px 15px 60px;
	font-size:150%;
	line-height:1.2;
	color:#0056ac;
	background-repeat: no-repeat;
	background-position: 0px -3px;
	background-size: 64px;
	border:1px solid #ededed;
	border-radius:3px;
}
.emptyView	p{
	margin-left:50px;
}
.emptyView.service{background-image: url('../images/home/icon-improvements.png');}
.emptyView.event{background-image: url('../images/home/icon-events.png');}
.emptyView.detours{background-image: url('../images/home/icon-detours.png');}
.emptyView.updates{background-image: url('../images/home/icon-alerts.png');}


/***************sites welcome pages*************/
#pageListing {
	background-image:url('../images/logos/BTLogo-lightGray.png');
	background-repeat:no-repeat;
	margin-bottom:-15px;
	padding-bottom:60px;
	background-position:5px bottom;
	background-size:300px;
}
#pageListing .pageItem{
	padding-right:5px;
	padding-left:5px;
}

#pageListing .pageItem .itemWrap{
	display:block;
	background-color:#f6f6f6;
	border-radius:3px;
	margin-bottom:5px;
	padding:20px 10px;
}
#pageListing .pageItem a,
#pageListing .pageItem a:link,
#pageListing .pageItem a:hover{
	text-decoration:none;
	color:#000;
}
#pageListing .pageItem h2{
	font-size:140%;
	color:#0056AC;
	margin-top:0px;
}
#pageListing .pageItem a:hover h2{
	text-decoration:none;
	color:#000;
}
#pageListing .pageItem img{
	float:left;
	width:90px;
}
#pageListing .pageDetails{
	border-left:1px solid #ccc; padding-left:10px;
	height:100%;
	margin-left:89px;
	background-image:url('../images/icons/transitArrow-white.png');
	background-repeat:no-repeat;
	background-position:right bottom;	
	padding-bottom:30px;
	padding-right:20px;
	min-height:90px;
	
}
#pageListing .pageItem a:focus .pageDetails,
#pageListing .pageItem a:hover .pageDetails{
	background-image:url('../images/icons/transitArrow-blue.png');
}

@media (min-width:600px){
	#pageListing {
		margin-top:-60px;
		padding-top:76px;
		background-position:right 5px;
		background-size:360px;
	}
}
@media (min-width:768px){

	#pageListing .pageItem{
		padding-left:0px;
		padding-right:10px;
	}
	#pageListing .pageItem .itemWrap{
		margin-bottom:10px;
	}	
	
	#pageListing .pageItem img{
		    width:auto;
	}
	#pageListing .pageDetails{
		margin-left:120px;
		min-height:120px;
	}
	#pageListing .pageDetails{
	font-size:90%
}
}

@media (min-width:960px){
	#pageListing .pageItem{
		float:left;
		width:50%;
	}
	#pageListing .pageDetails {
		height:250px;
	}
	#pageListing .pageItem img{
		    border-right:none;
	}

	
}
@media (min-width:1200px){
	#pageListing .pageDetails {
		height:235px;
	}
}

#pageListing.fares .pageItem:first-child,
#pageListing.zum .pageItem:last-child:nth-child(odd),
#pageListing.accessible .pageItem:last-child,
#pageListing.plan .pageItem.embedTerm{width:100%;}
#pageListing.fares .pageItem.embed .pageDetails,
#pageListing.zum .pageItem:last-child:nth-child(odd) .pageDetails,
#pageListing.accessible .pageItem:last-child .pageDetails,
#pageListing.plan .pageItem.embedTerm .pageDetails{height:auto}


/*******(plan your rip) travel Outside Brampton card***********/
#pageListing .pageItem.doubleLink .pageDetails{ background-image:none; padding-right:0px }
#pageListing .pageItem.doubleLink a span{
	color:#0056AC;
}
#pageListing .pageItem.doubleLink a{
	display:block;
	background-image:url('../images/icons/transitArrow-white.png');
	background-repeat:no-repeat;
	background-position:right bottom;
	background-size:30px;
	padding:3px 25px 3px 3px; 
	border:4px solid #e6e6e6;
	background-color:#e6e6e6;
	border-radius:3px 3px 17px 3px;
	font-size:90%;
	margin-bottom:10px;
}
#pageListing .pageItem.doubleLink a:hover{
	background-image:url('../images/icons/transitArrow-blue.png');
}
/*******(Service Alerts) thumbnail view***********/
@media (min-width:960px){#pageListing.service .pageDetails {height:200px;}}
@media (min-width:1200px){#pageListing.service .pageDetails {height:185px;}}


/*************(passenger safety) rounded icons buttons*********/
.roundedIcons{
	padding-bottom: 20px;
}

.roundedIcons a.thumbLink{
	display:block;
	position:relative;
	margin-bottom:5px;
}

.roundedIcons a.thumbLink{
	background-color:#f2f2f2;
	padding:6px;
	border-radius:3px;
}
.roundedIcons a.thumbLink span{
	display:block;
	position:absolute;
	left:70px;
	bottom:10px;
	line-height:1.25;
}
.roundedIcons a.thumbLink.selected{
	background-color:#e6e6e6;
	color:#000;
}
.roundedIcons a.thumbLink.selected img{
	background-color:#f2f2f2;
}
.roundedIcons a.thumbLink img{
	background-color: #F9F9F9;
	border-radius:50px;
	width:60px; 
	background-clip: padding-box;
	-webkit-background-clip: padding-box;
}
.roundedIcons a.thumbLink:hover{
	background-color:#e6e6e6;
}
.roundedIcons a.thumbLink:hover img{
	background-color:#f2f2f2;
}
@media (min-width:600px){
	.roundedIcons a.thumbLink{
		float:left;
		text-align:center;
		margin-right:5px;
		width:125px;
		padding:20px 10px 40px 10px;
		font-size:85%;
	}
	.roundedIcons a.thumbLink img{
		border-radius:70px;
		margin-bottom:5px;
		width:100%;
	}
	.roundedIcons a.thumbLink span{
		left:0px;
		text-align:center;
		width:100%;
	}
	.safety .roundedIcons a.thumbLink{padding-bottom:70px}
	.guidelines.roundedIcons a.thumbLink{padding-bottom:55px}

}

@media (min-width:999px){
	.roundedIcons a.thumbLink{width:160px;}
	.guidelines.roundedIcons a.thumbLink{padding-bottom:40px}
}


/*************transit fares*************/
.FAQ .well .list-group{
	margin-bottom:0px;
}
.FAQ .well .list-group.singleItem .list-group-item{
	border:none
}
.FAQ .well .list-group .badge{
	background-color:#060;
	font-size: 100%;
    border-radius: 20px;
    font-weight: normal;
}

.FAQ .well .list-group .list-group-item {
    padding: 8px 15px;
    background-color: transparent;
    border: 1px solid #ddd;
}
.FAQ .well .alert{
	margin-top:10px;
}
