/**************************************************************/
/*  All information on the artic.com
		is protected by Copyright © 
   The Anaheim Regional Transportation Intermodal Center   */
/**************************************************************/
body{
    padding: 0;
    margin:0;
    color: #fff;
    font-family: Arial;
    font-size: 11px;
    background-color: #2b3441;}
    
.floatLf{float: left;}
.floatRt{float: right;}
.floatFluid{ float: left; width: 100%;}
.widthFluid{ width: 100%;}
.clear{ clear:both;}
.nopaddingRt{padding-right: 0 !important;}
.nopaddingLf{padding-left: 0 !important;}
img, .noBorder{ border: 0 !important;}
ul li{ list-style-type: none;}

/* Links */
a{cursor: pointer;color: #BCEBF1;text-decoration: underline;}
a:hover{text-decoration: none;}

.socialMedia li  a,.OCTA,.Anaheim, .signUp, .video2 { background-image: url(/images/Sprite_main.png);  display:block; }

.espanol, .print, .video, .video_aconnext{padding-left: 32px; margin-left: 4px; padding-bottom:2px;}
.pdf{background: url(/images/icons/PDF.gif) no-repeat top left; padding-left: 32px;}
.espanol{background: url(/images/icons/espnol.gif) no-repeat top left;}
.video{background: url(/images/icons/video.png) no-repeat top left; display:block; margin-top:3px;}
.video_aconnext{background: url(/images/icons/video_aconnext.png) no-repeat top left;display:block;margin-top:3px;}
.print{ background: url(/images/icons/print.gif) no-repeat top left;}
.video2{background-position: -0 -269px; width:105px; height:33px; top:306px; position:relative; }

/* Heading       
------------------------------------------- */
h1, h2, h3, h4{margin: 0 !important;padding: 0 !important; color: White;}
h3{font-size: 14px; margin-bottom: 10px !important;}   
h1{color: #1c1c1c;font-size: 18px;text-transform:uppercase; margin: 30px 60px !important;}


/* Layouts     
------------------------------------------- */
#Frame{
    width: 1000px;
	margin: 0 auto;}
   
#Header{
    padding: 2px 10px 5px 10px;
    height: 80px; 
    background: url(/images/headerBg.jpg) repeat-x top left;}

#Main {
    margin:10px 15px 45px 15px;
    padding:10px; 
    background-color:#fff;}          

#Content {
    margin-bottom:10px;
    color:#1c1c1c;
    min-height:337px;
    border:1px solid #808080;
    width:935px;}  
   
#Content a{ color:#29387c;}            

#Content p{
    margin: 10px 55px;
    line-height: 16px;}


/* Sliding Menu  
------------------------------------------- */
#MenuBox{ width: 934px !important;}

.sMenuWrap{
    float: left;
    margin-top: 8px;
    width: 844px !important;}

.sMenuWrap ul{
    height: 103px;overflow:hidden;
    padding: 0;}

.sMenuWrap ul li{
    float: left;
    padding: 0 !important;
    margin: 0 !important;}

.MenuPrevious a, .MenuNext a{
    height: 121px;
    width: 43px;
    display: block;}

.MenuPrevious a{background: url(/images/sliderLf.jpg) repeat 0px 0px;}
.MenuPrevious a:hover{background: url(/images/sliderLf.jpg) repeat -43px 0px;}

.MenuNext a{background: url(/images/sliderRt.jpg) repeat 0px 0px;}
.MenuNext a:hover{ background: url(/images/sliderRt.jpg) repeat -43px 0px;}

/* Collapse & Expand Filter*/
.ExpandPanel {background:#fff url(/images/mainBg.jpg) repeat-x bottom left;} 
.ExpandPanel img { padding-left:150px;}

.OCTA, .Anaheim {
        height:60px;
         margin-top:5px;
        text-indent:-10001px;
        float:right;}
        
.OCTA { width:46px;background-position: -333px -230px; margin-right:13px;}
.Anaheim {width:100px; background-position: -230px -230px; margin-right:5px;}  
.signUp{ width:220px; background-position: -0 -229px; height:35px; margin-top:10px;}

/* Btm 3 Colums  
------------------------------------------- */
#BtmBox{
    width: 1000px;
    clear:both;
    height:350px;}

#BtmBox ul.box, div.vote ul{
    margin: 0;
    padding: 0;
    float: left;}

#BtmBox ul.box li{
    font-size: 12px;
    float: left;
    margin: 0;
    width: 290px;
    height: 240px;
    padding: 0 10px 0 29px;}

.BtmBox_line{
    background: url(/images/BtmBox_line.gif) repeat-y top left;
    margin:0 10px 0 0;}

#BtmBox img{
    vertical-align: middle;
    padding-right: 7px;}

#BtmBox ul.box em{ color:#c2bfbf; font-size:10px; width:250px; display:block;}    
#BtmBox ul.box em a{ color:#bcebf1;}    

/* Social Media */
.socialMedia{
    margin:8px 0 15px 0;
    padding:0;
    width: 100%;}

.socialMedia li  a {
    display: block;
    height: 32px;
    width:32px;
    float:left;text-indent:-10001px;  background-position:0  0; }
    
.socialMedia li {
    width:32px !important;
    height:32px  !important;
    padding:0 15px 0 0 !important;}
    
.socialMedia li.facebook  a{ background-position:0  0;}
.socialMedia li.twitter a { background-position: -32px 0; }
.socialMedia li.share a { background-position: -64px 0; }

/* Vote */
div.vote{
    width: 250px;
    float: left;}
    
div.vote div.paging{
    float: right;
    padding: 0 !important;
    margin: 0;}
    
div.vote div.paging span{
    background: url(/images/icons/paging.gif) -55px top no-repeat; /* width: 20px;*/
    float: left;
    padding: 0 2px;
    height: 11px;}
    
div.vote div.paging img, div.vote .vbtn{
    cursor: pointer;
    float: left;
    padding: 0 3px !important;}
    
div.vote li{
    margin:5px 0 0 0;
    padding: 0 !important;
    float: left;
    height: auto !important;}

div.vote li div.question td, div.vote li div.question{ font-weight: normal;}
div.vote li div.result{display: none;}

/* Top         
------------------------------------------- */
.mapARTIC{
    background: url(/images/mapARTIC.jpg) no-repeat top left; 
    height:337px; }

.panelTop{
    background: url(/images/panelBg.png) no-repeat top left;
    padding: 20px 0 0 20px;}
  
.panelTop img{ padding: 0 0 5px 0; text-align:right;}

.panel{
    background: url(/images/panelBg.png) no-repeat bottom left;
    padding-bottom: 20px;
    width: 220px;}

.panel ul{
    width:195px;
    margin: 0;
    padding: 10px 10px 0 15px;}

.panel li{
    padding: 0 0 0px 8px;
    line-height: 22px;
    border-bottom: 1px dotted #b6b5b5;}

/* Key Benefits 
------------------------------------------- */
.KeyBenefitsBox{ overflow:auto; height: 450px; /*width:880px;*/ background: url(/images/articBg.jpg) no-repeat center ;}  
/*.KeyBenefitsBox p{width:92%;}  */
.KeyBenefits { padding:0;}
.KeyBenefits li{  list-style-image: url(/images/icons/bullet.jpg); margin:10px 0;  padding:0;} 
.KeyBenefits li ul li{list-style-image: url(/images/icons/bulletBL.jpg);} 
.KeyBenefits li ul li ul li{ list-style-type:square !important;}
.KeyBenefits li ul li ul li ul li{ list-style-image: url(/images/icons/bulletBK.jpg);}  
.KeyBenefits {margin:5px 0 5px 90px !important}
.divider{border-bottom:1px dashed #c9c9c9; width:95%; margin-left:40px; margin-bottom:15px;}
.blueBg{background-color:#e4ecf6; padding:5px 0 5px 10px; width:91%; }

/* News     
------------------------------------------- */
.pager{  padding:0; margin:0 0 15px 0; }
.pager li  {float:left;  padding:0 7px; margin:0; }
.pager li a{text-decoration:none;}
.pager li  .selected{ background-color:#191919; padding:3px 7px;}

/* Contact      
------------------------------------------- */
#Contact {font-size: 10px;color: #888d94;} 
#Contact span{ margin-top:1px;  display:block;}
.contactBox {  margin-left:60px; height:350px; width: 420px;}

.contact{float:left;padding:0; margin:0; font-size:12px;}
.contactImg { float:right; padding:20px 70px 0 0; }
.contact li{border-bottom:1px dotted #d0d0d0; white-space:nowrap; padding:5px 35px 5px 5px;}
.contactLine{border-bottom:2px solid #d6d6d6 !important; font-size:14px; font-weight:bold;}
.contactRt li{ padding-right:50px;}

.contractingTable{
    margin: 20px 0 0 60px;
    font-size: 13px;
    width: 400px;}

.contractingTable th{
    background-color: #3c415b;
    margin: 0;
    text-align:left;
    padding:10px;
    color: #fff;}
    
.contractingTable td{
    white-space:nowrap;
    padding: 10px 0 10px 10px;}
    
.contractingTable .total  {
    font-weight:bold; 
    border-top:2px solid #3c415b;}


.aconnextLink{ font-size:14px;}

/* Funding Source  
------------------------------------------- */
.chart{ margin:-25px 0 50px 40px;}
.vline{border-right: 1px dotted #d0d0d0;}
.hline td{border-bottom: 1px solid #afafaf;}
.contractingTable .btmLine {border-top:1px solid #d0d0d0;}
.contractingTable .red { background-color:#fcebe9;}
.contractingTable .blue { background-color:#e9fdfa;}
.contractingTable .green { background-color:#eef9d9;}
.contractingTable .yellow { background-color:#fff4d3;}
.contractingTable .orange { background-color:#feefe5;}

/******************************/
/*  jQuery Dialog/ Pop Up     */
/******************************/
/*Dialog specific 
ui-dialog-container : the whole dialog window. 
ui-dialog-titlebar : the titlebar. 
ui-dialog-titlebar-close, ui-dialog-titlebar-close-hover : the close button (the top-right X) and its hover style. 
ui-dialog-content : additional style for dialog contents. 
ui-dialog-buttonpane : the container for the dialog buttons (like "Yes", "No", "Cancel"). 
*/
.ui-dialog-titlebar {
    background-color:white;
    text-align:right;
    font-size:16px;
    padding:0 5px 5px 5px;}
    
.ui-dialog-content{background-color: White; }

.ui-dialog-container{
    padding:0;
    margin:0;}
    
.ui-resizable {border: solid 2px #7f7f7f ;}

ul.image-view {
    margin:0 !important; 
    padding:0 !important;}

ul.image-view li{
    float: left;
    padding:0;
    margin: 2px;}
   
.ui-resizable {border: solid 2px #7f7f7f ;}

div.hotspot {
	position:absolute;
	color:white;
	height:65px;
	width:250px;
	padding:2px;}

div.hotspot h3.image_replace{
	display:block;
	text-indent:-9999px;
	height:25px;
	margin: 0 !important;
	padding: 0 !important;}

div.hotspots .wtc h3.image_replace{ 
	width:250px;
	display:block;	
	background:url(/images/ARTICMark.png) no-repeat;}

div.hotspot p{	
	line-height:1.5;
	background:url(/images/hotspot_bg.png) no-repeat;
	_background:url(/images/blank.gif);
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='img/global/hotspot_bg.png');
	width:210px;
	font-size:12px;
	margin: 2px 0 !important;
	border:1px solid #393939;
	padding: 10px !important;
	display:none;}

div.hotspot p a{ color:#8dc133 !important; font-weight:bold; display:block;}

.espContact{ background:url(/images/espanelBg.gif) top left no-repeat; margin-left:50px; width:850px;  padding:15px 0;//padding:25px 0;  }
.espContact ul{margin-left:25px; float:left; padding:0;}
.espContact ul li{float:left; width:230px; margin-left:0;}
 
/* Browser Compatibility Message Box
------------------------------------------- */
#browser-compatibility{ background-color:#fefe9e; border:1px solid #8a934d; margin:20px 0; padding:8px 10px 0 10px; color:#50541b; font-size:12px;display:none;}
#browser-compatibility b{ font-size:16px; color:#000;}
#browser-compatibility a{ color:#cc7632;}