/*  Stylesheet for Philadelphia Insurance Companies
--------------------------------------------------------
File Name: phly_layout.css
Media: Screen
Purpose: Has all the layout css options
-------------------------------------------------------- */ 

  

            
            
/*  ---------------------------------------------------------------------------
    PAGE BODY CONTAINER
    --------------------------------------------------------------------------- */
    #bodywrapper 
        {   width: 955px; 
            margin: 0px auto; 
            background: #ffffff; }
    * html #bodywrapper 
        {   width: 955px; }
    #bodywrapper:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    #bodywrapper 
        {   height: 100%; }


/*  --------------------------------------------------------------------------- 
    UTILITY NAV CONTAINER
    Top menu navigation of site - yellow toolbar
    --------------------------------------------------------------------------- */ 
    #nav_utility 
        {   float: right; }
    #nav_utility li 
        {   float:left; 
            margin:5px 0px 0px 0px;             
            padding:0px 10px 0px 10px; 
            list-style:none none; 
            background:url(../images/icons/nav_utility_pipe.gif) no-repeat 0px 5px;}
    #nav_utility li.first 
        {   background: none;}
    #nav_utility li.last 
        {   padding: 0px 0px 0px 10px;}
    #nav_utility form.searchbox 
        {   float:left;
			vertical-align:middle;
            margin: -2px; 
            padding:0px 10px 0px 10px; 
            border:0px;}
   
    #nav_utility input.searchbox 
        {   margin:0px; 
            border:0px; 
            border:1px solid #3399cc;}
    #nav_utility img.gobutton 
        {   margin:-4px 0px 0px 0px; 
            position:relative; 
            top:5px; }  
    
    #nav_utility input.gobutton 
        {   margin:-4px 0px 0px 0px; 
            position:relative; 
            top:5px; }
            
     #nav_utility:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    
    /*  Header Area        
        ------------------------------- */
        #header 
            {   width:935px; 
                height:26px; 
                margin:0px auto 2px auto; 
                padding:0px 10px 0px 10px; 
                background:#fad956; border-bottom:2px solid #cc0000;}
        #header:after 
            {   content:""; 
                display:block; 
                height:100%; 
                clear:both;}
        #header 
            {   height:26px;}
            
            
/*  ---------------------------------------------------------------------------
    BRANDING CONTAINER
    Phly branding band
    --------------------------------------------------------------------------- */       
    #branding 
        {   width: 955px; 
            height: 90px; 
            margin: 0px auto; }
    #branding:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    #branding img 
        {   margin: 5px 0px 5px 10px; }
    #branding blockquote 
        {   float: right; 
            width: 210px; 
            background-color:Transparent; 
            margin: 25px 25px 0px 0px; 
            font-family: Times New Roman; 
            font-size: 14px; 
            font-weight: bold; 
            color: #fad956; }
    #branding .BrandingNav      /*With Background Image*/
        {   width: 955px; 
            height: 90px; 
            /*border: solid 1px #ffffff;*/
            background: #3366cc url(../images/background/branding.gif) no-repeat 100% 100%;}
    #branding .BrandingNoNav    /*Without Background Image*/
        {   width: 955px; 
            height: 90px; 
            background: #3366cc;}
            
            
            
    
        
/*  --------------------------------------------------------------------------- 
    COLUMN 1 CONTAINER
    Mainly navigational elements (left)
    --------------------------------------------------------------------------- */
    #col1 
        {   float: left; 
            width: 211px; 
            padding: 23px 20px 0px 11px; }
    #col1 .col1heading /*Heading of grouped items in column 1*/
        {   margin: 0px 0px 7px 0px; }

    /*  Navigation
        Left menu navigation
        ------------------------------- */ 
        #nav_main 
            {   font-size: 12px; 
                margin-bottom: 40px; }
        #nav_main li#selected 
            {   font-weight: bold; 
                background: url(../images/lists/nav_3_on.gif) no-repeat 20px 9px; }
        #nav_main li.NavSelected 
            {   font-weight: bold; 
                background: url(../images/lists/nav_3_on.gif) no-repeat 20px 9px; }   
        * html #nav_main li#selected 
            {   font-weight: bold; 
                background: url(../images/lists/nav_3_on.gif) no-repeat 20px 12px; }      
        #nav_main a 
            {   text-decoration: none; }
        #nav_main li#selected a 
            {   color: #cc0000; }
        #nav_main li a.NavSelected 
            {   color: #cc0000; }                      
            
            
        /*  Primary Nav ------------------- */  
            #nav_main ul    
                {   border-top: 1px dashed #cc0000; 
                    border-bottom: none; }
            #nav_main li    
                {   list-style: none none; 
                    border-bottom: 1px dashed #cc0000; 
                    border-top: none; }
            #nav_main li img 
                {   margin: 5px 0px 1px 2px; }
                     
                     
        /*  Secondary Nav ------------------- */  
            #nav_main ul ul
                {   border-top: none;  }        
            #nav_main li li
                {   border-bottom: none; }    
            #nav_main li li img
                {   margin: 5px 0px 5px 0px; }  


        /*  Tertiary Nav ------------------- */  
            #nav_main ul ul ul
                {   margin-bottom: 5px; }        
            #nav_main li li li 
                {   padding: 2px 0px 4px 30px; 
                    background: url(../images/lists/nav_3.gif) no-repeat 20px 9px; }
            * html #nav_main li li li 
                {   padding: 2px 0px 4px 30px; 
                    background: url(../images/lists/nav_3.gif) no-repeat 20px 12px; }


/*  --------------------------------------------------------------------------- 
    COLUMN 2 CONTAINER
    Body of page (center)
    --------------------------------------------------------------------------- */
    #col2 
        {   float: left; 
            width: 683px; }
        
    /*  Breadcrumb Navigation
        Small top navigation within body of page
        ------------------------------- */ 
        #breadcrumb 
            {   width: 637px; height: 100%; 
                padding: 23px 23px 0px 23px; 
                background: #e9eef6; 
                border-bottom: 1px solid #e9eef6; }
        #breadcrumb:after 
            {   content: ""; 
                display: block; 
                height: 100%; 
                clear: both; }       
        #breadcrumb li 
            {   float: left; 
                padding: 0px 5px 0px 10px; 
                list-style: none none; 
                color: #cc0000; 
                font-size: 11px;  
                background: #e9eef6 url(../images/lists/breadcrumb.gif) no-repeat 0px 4px; }
        #breadcrumb li.first 
            {   padding: 0px 10px 0px 0px; 
                background: none; }
        #breadcrumb li a 
            {   color: #134074; 
                text-decoration: none; }
        #breadcrumb li a:hover 
            {   color: #cc0000; 
                text-decoration: none; }
                
                
/*  --------------------------------------------------------------------------- 
    COLUMN 3 CONTAINER
    Column 3 tends to be the small sliver of the polaroid image
    or an empty space in place of the a polaroid image. (right)
    11/8/07 I changed the width from 25px to 24px
    --------------------------------------------------------------------------- */             
		#col3 
			{   float: left; 
				width: 24px; }
        
        
    /*  Tab holder 
        No polaroid image in use
        ------------------------------- */ 
        #tabholder 
            {   margin: 23px 0px 0px 0px; }


    /*  Photo holders
        Corners of the polaroid photos
        ------------------------------- */ 
        #photoholder    /* Top corner of polaroid photos */
            {   width: 22px; height: 271px; 
                margin: 45px 0px 0px 0px; 
                background: url(../images/background/photoholder.jpg) no-repeat 0px 0px; }
        #photoholder2   /* Bottom corner of a polaroid photos */
            {   width: 22px; height: 339px; 
                margin: 37px 0px 0px 0px; 
                background: url(../images/background/photoholder2.jpg) no-repeat 0px 0px;  }
        #photoholder3   /* Top corner of the smaller non-product related polaroid photos */
            {   width: 19px; height: 279px; 
                margin: 37px 0px 0px 0px; 
                background: url(../images/background/photoholder3.jpg) no-repeat 0px 0px;  }
        #photoholderProducts /* Top corner of the larger product related polaroid photos */
            {   width: 22px; height: 339px; 
                margin: 37px 0px 0px 0px; 
                background: url(../images/background/photoholderProducts.jpg) no-repeat 0px 0px;  }
    
    
    /*  10 Reasons Why
        The 10 Reasons Why Flyover image for products
        ------------------------------- */ 
        #points 
            {   width: 21px; height: 252px; 
                margin: 50px 0px 0px 0px; 
                /*background: url(../images/background/points_consider.gif) no-repeat 0px 0px;*/ }
        #points a 
            {   display: block; 
                width: 21px; height: 170px; 
                margin: 0px; 
                background: transparent; }
                
                
/*  --------------------------------------------------------------------------- 
    SINGLE COLUMN CONTAINER
    The page has one column - no left, center and right.
    --------------------------------------------------------------------------- */
    #singlecol 
        {   width: 955px; 
            margin: 0px auto 2px auto; }
            
   
        					
    /*  Breadcrumb Navigation
        Small top navigation within body of page
        ------------------------------- */  
        #singlecol #breadcrumb 
            {   width: 909px; 
                background: #e9eef6; 
                border-bottom: 1px solid #e9eef6; }
            
            
    /*  Content
        Main body of page
        ------------------------------- */
        #singlecol #content 
            {   width:909px; height:100%; 
                padding: 23px; 
                font-size:12px; 
                background:#e9eef6; 
                /*margin: 0px 0px 0px 0px; padding: 0px 10px 10px 10px; */ }     


    /*  Other elements
        Misc items
        ------------------------------- */
        #singlecol img.pageheader 
            {   margin: 0px 0px 12px 0px; 
                padding: 0px; }


/*  ---------------------------------------------------------------------------
    PICTURES CONTAINER
    Photo specific
    --------------------------------------------------------------------------- */      
    #photo_slug /* Used when you want text to wrap around the polaroid */
        {   float: right; 
            margin: -25px -23px 0px 0px; }
            
    .photobackground
		{
			float:right;
			margin: 30px -23px 0px 0px; 
		}
            
    .rightImage 
		{ float: right;	}
	.leftImage 
		{ float: left; } 
            
            
/*  ---------------------------------------------------------------------------
    PAGE HEADER SECTION
    Mainly for the header images of pages
    --------------------------------------------------------------------------- */         
    img.pageheader 
        {   margin: 0px 0px 12px 0px; 
            padding: 0px; }   
    img.pagesubheader 
        {   margin: 0px 0px 5px 0px; 
            padding: 0px;}  

        
        
/*  ---------------------------------------------------------------------------
    PHOTO CHANNELS CONTAINER
    --------------------------------------------------------------------------- */  
    #sidebarchannel    /* Column 2 Photos */ 
        {   float: left; 
            width: 240px; 
            margin: 225px 0px 0px 0px; }
    #photochannel    /* Column 2 Photos */ 
        {   float: left; 
            width: 206px;            
            margin: 300px 0px 0px 34px; }
    
    #photochannelFlood    /* Column 2 Photos */ 
        {   float: right; 
            width: 275px;            
            margin: 250px 0px 0px 10px; }
            
    #photochannelOutdoor    /* Column 2 Photos */ 
        {   float: left; 
            width: 206px;
            margin: 23px 0px 0px 34px; }
    #photochannel img.middle
        {   margin: 0px 20px 0px 20px; } 
        
    #stockchannel /* Stock price on the media room */
        {   float:left; 
            width:289px;
            margin: 0px 0px 0px 34px; }
               
    #basicphotochannel /* Photochannel that does not has top margin */
        {   float:left; 
            width:206px; 
            margin: 0px 0px 0px 34px; }
   

/*  ---------------------------------------------------------------------------
    PRINT, EMAIL CONTAINER
    Small Print and email buttons available on pages
    --------------------------------------------------------------------------- */    
	#print 
	    {   margin: 0px; 
	        width: 120px; 
	        padding: 1px 0px 2px 20px; 
	        font-size: 10px; }
	#print a 
	    {   text-decoration: none; }	
	#email 
	    {   margin: 0px; width: 120px; 
	        padding: 1px 0px 2px 20px; 
	        font-size: 10px; }
	#email a 
	    {   text-decoration: none; }		
	#send 
	    {   width: 120px; 
	        float: right ; 
	        margin: 0px 0px -20px 0px; 
	        position: relative; 
	        top: -15px; 
	        background: #e9eef6;}			
        
        
/*  ---------------------------------------------------------------------------
    HOME PAGE CASE STUDIES CONTAINER
    Featured Products
    --------------------------------------------------------------------------- */
    #main_img 
        {   height: 375px; 
            background: #e9eef6; 
            font-size: 12px; }
    #main_message 
        {   height: 125px; 
            padding: 100px 310px 0px 16px; }
    #main_message p 
        {   margin: 0px; 
            padding: 0px 0px 2px 0px; }
    #main_message .morelink 
        {   padding: 0px 13px 0px 175px; }
    #next_study 
        {   padding: 110px 15px 0px 0px; 
            text-align: right; 
            font-size: 10px; }


    #next_study a:hover 
        {   color: #cc0000; }
    .img_swapper 
        {   width: 19px; 
            margin: 23px 0px 0px 0px; 
            padding: 110px 1px 15px 1px; 
            background: #1443a1 url(../images/homepage/case_studies.gif) no-repeat 0px 0px; }
    .img_swapper li 
        {   list-style: none none; 
            margin: 0px;}   
        
/*  ---------------------------------------------------------------------------
    FLYOVER CONTAINER
    Product Pages 10 Reasons Why
    --------------------------------------------------------------------------- */ 
    #flyover 
        {   position: absolute; 
            z-index: 2; 
            top: 0px; 
            display: none; }
    #flyovercontainer 
        {   width: 282px;
            position: relative; 
            top: 156px; 
            left: 399px; 
            border: 1px solid #3366cc; 
            background: white; 
            float: left; }
    #flyoverpoints 
        {   margin-top: 0px; 
            padding: 0px; 
            position: relative; 
            top: 156px; 
            left: 399px; }
    #flyovertext
        {   margin: 0px; 
            padding: 20px 20px; 
            font-family: Arial; 
            font-size: 11px; 
            color: #3366cc;	}		
    #flyovertext ol 
        {   margin-left: 25px; 
            background: transparent; }			
    #flyovertext ol li 
        {   padding: 5px 10px 5px 0px; 
            color: #3366cc; 
            font-weight: bold;	}
    #flyovertext ul 
        {   margin-left: 25px; 
            background: transparent; }			
    #flyovertext ul li 
        {   padding: 5px 10px 5px 0px; 
            color: #000000;
            font-weight:normal;	}
    #flyovertext span.counter 
        {   font-weight: normal; 
            color: #000000; }
    #flyovertext a 
        {   color: #1443a1; 
            text-decoration: none;}
    #flyovertext a:hover 
        {   color: #cc0000; 
            text-decoration: none;}
    * html #flyoverpoints 
        {   position: relative; 
            top: 156px; 
            left: 396px; }
        
        
/*  ---------------------------------------------------------------------------
    STANDARD FORM CONTAINER
    --------------------------------------------------------------------------- */       
    .standardform   {   }
    .standardform table
        {   width: 100%; 
            border-spacing: 0px; 
            border-collapse: collapse; 
            margin: 5px 0px 15px 0px; 
            font-size: 11px; 
            color: #000000; 
            border-top: 1px dashed #3366cc; 
            border-right: 2px solid #3366cc; 
            border-bottom: 1px dashed #3366cc; 
            border-left: 2px solid #3366cc; 
            padding: 0px 0px 0px 0px; 
            background:#ffffff;}
    .standardform th 
        {   padding: 4px 5px 4px 5px; 
            text-align: left; 
            color: #3366cc; 
            border-bottom: none;  
            vertical-align: bottom; }
    .standardform thead { }
    .standardform tbody { }
    .standardform tr 
        {   padding: 0px 0px 0px 0px; 
            text-align: left; 
            border: none; }
    .standardform td 
        {   padding: 2px 7px 2px 2px; 
            text-align: left; 
            border-bottom: 1px solid #c7d1c6; 
            border-left: none 0px; 
            border-right: none 0px; 
            border-top: none 0px; 
            background: #ffffff; }
    .standardform tfoot { }
    .standardform .borderless 
        {   border: none; }
    .standardform .firstgrouprow 
        {   padding-top: 8px; }
    .standardform .lastgrouprow 
        {   border-bottom: 1px solid #003399; 
            padding-bottom: 8px; }            
    
            

/*  ---------------------------------------------------------------------------
    LOGIN CONTAINER
    Main use is the MyPhly Login Page
    --------------------------------------------------------------------------- */
    #LoginSection
        {   text-align: center; 
            width: 960px; }
    #LoginSection table 
        {   
            border-collapse:collapse; 
            border: none 0px;
            margin: 15px 0px 15px 0px; 
            font-size: 11px; 
            padding: 0px 0px 0px 0px; 
            background: #ffffff;} 
    #LoginSection tr 
        { }    
    #LoginSection th 
        {   padding: 0px 0px 0px 60px; 
            text-align: left;
            border:none 0px; 
            color: #000000; 
            font-weight:normal; 
            font-size: 19px;}
    #LoginSection td 
        {   padding: 2px 2px 2px 2px; 
            text-align: left; 
            border: none 1px; }
    #LoginSection td.col1 
        {   width: 60px; vertical-align:top; padding-top:4px; }
    #LoginSection td.col2
        {   width: 270px; vertical-align:top; }
    #LoginSection td.colleft
        {   vertical-align:top;
        	padding-top:30px; }
        	
     #LoginSection table.login
        {   margin-left:15px;
            width:490px; }

        
#LoginSection ul   
         {   
         	 border-top: 1px dashed #cc0000; 
             border-bottom: 1px dashed #cc0000;
             } 
             
             #LoginSection li    
                {   list-style: none none; 
                    font-weight:bold;
                    padding:5px 0px 2px 0px;}
              


/*  ---------------------------------------------------------------------------
    MYPHLY WELCOME CONTAINER
    Welcome User section when logging into the MyPhly pages
    --------------------------------------------------------------------------- */    
    #MyPhlyWelcome
        {   width: 637px; height: 50px;
            margin: 0px 0px 10px 0px; 
           /* border: 1px solid #000000;*/
            /* margin: 5px 0px;*/}
    #MyPhlyWelcome:after    
	    {   content: ""; 
	        display: block; 
	        height: 0; 
	        clear: both; } 
	#MyPhlyWelcome img  /*Welcome Agent User Logo */
	    {   }			
	#MyPhlyWelcome h2        
	    {   float: left; 
	        clear: right; 
	        margin: 0px;
	        padding-top: 30px;}
	#MyPhlyWelcome span#welcome
	    {   float: left;	        
	        vertical-align: text-bottom;
	        /*border: 1px solid #000000;*/
	        padding-top: 30px; }
	#MyPhlyWelcome span#welcome span.username
	    {   font-weight: bold; }
	#MyPhlyWelcome div.edit
	    {   text-align: right; 
	        padding: 0px; 
	        margin-top: -20px; 
	        font-size:11px; }
	    
	    
/*  ---------------------------------------------------------------------------
    ADMINISTRATOR USER LOGGED IN CONTAINER
    Administrator Current User Logged In
    --------------------------------------------------------------------------- */
    #AdminLoggedIn table td.col1
        {   width: 140px; }
    #AdminLoggedIn table td.col2
        {   width: 493px; }
        
        
/*  ---------------------------------------------------------------------------
    COMMISSION ACH CONTAINER
    Commission ach enrollment pages and forms
    --------------------------------------------------------------------------- */
    .EnrollmentSection .label
        {   font-size:12px; 
            font-weight: bold; 
            margin: 5px 10px 0px 0px; 
            color: #333333; }
    .EnrollmentSection .value
        {   font-size: 12px; 
            font-weight: normal; 
            margin: 5px 0px 0px 0px; 
            color: #666666; }
    .EnrollmentSection .status
        {   font-size:12px; 
            font-weight: bold; 
            margin: 5px 10px 0px 0px; 
            color: #1443a1; }
    .EnrollmentSection .messages
        {   text-align:  center; 
            margin-left: 10px; 
            margin-bottom: 0px; 
            padding:0px; }
    .EnrollmentSection td.separator
        {   height: 10px; }
    

    /*  Ach Enrollment Form         
        ------------------------------- */     
        .EnrollmentSection table.achform
             {  width: 100%; 
                border-top: 1px dashed #3366cc; 
                border-right: 2px solid #3366cc; 
                border-bottom: 1px dashed #3366cc; 
                border-left: 2px solid #3366cc;  }
        .EnrollmentSection table.achform td
            {   border-top: none; 
                border-right: none; 
                border-bottom: none; 
                border-left: none; 
                margin: 0px; 
                padding: 2px 7px 2px 7px; 
                vertical-align: middle; 
                text-align: left;}
        .EnrollmentSection table.achform td.col1a
            {   width: 120px; 
                text-align: left; }
        .EnrollmentSection table.achform td.col1b 
            {   width: 120px; 
                text-align: left; }
        .EnrollmentSection table.achform td.col2a 
            {   width: 140px; 
                text-align: left; }
        .EnrollmentSection table.achform td.col2b
            {   width: 120px; 
                text-align: left; }
        .EnrollmentSection table.achform td.colReq 
            {   width: 10px; 
                text-align: right; }
            
    /*  Ach Enrollment Information 
        ------------------------------- */ 
        .EnrollmentSection .checkimage
            {   text-align: center; 
                color: #ff0000; }
                        

/*  ---------------------------------------------------------------------------
    BILL PAY CONTAINER
    Bill pay pages and forms
    --------------------------------------------------------------------------- */
    #BillPaySection input.paymentbuttons
        {   float: left; 
            padding-left: 6px; }
    #BillPaySection .payfullbalancebutton
        {   float: left; 
            padding-left: 6px; }
    #BillPaySection .pendingpaymentmsg
        {   color: #ff3333; 
            padding-right: 7px; 
            text-align: right; 
            vertical-align: bottom; }
    #BillPaySection .paymentsteps
        {   background: #cedefe; 
            margin: 0px 0px 0px 0px; 
            padding: 0px 0px 0px 0px; 
            height: 30px; }
    #BillPaySection .paymentsteps img.CurBalDue
        {   border: 0px none; 
            margin: 0px; 
            padding: 0px; 
            vertical-align: middle; }
    #BillPaySection .paymentsteps img.PayAmt
        {   border: 0px none; 
            margin: 0px 0px 0px 18px; 
            padding: 0px; 
            vertical-align: middle; }
    #BillPaySection .paymentsteps img.PayInfo
        {   border: 0px none; 
            margin: 0px 0px 0px 10px; 
            padding: 0px; 
            vertical-align: middle; }    
    #BillPaySection .paymentsteps img.ProcessComp
        {   border: 0px none; 
            margin: 0px 2px 0px 8px; 
            padding: 0px; 
            vertical-align: middle; }
    #BillPaySection .paymentsteps img.Arrows
        {   border: 0px none; 
            margin: 0px; 
            padding: 0px; 
            vertical-align: middle;}
    #BillPaySection .label
        {   font-size:12px; 
            font-weight: bold; 
            margin: 5px 10px 0px 0px; 
            color: #666666; }
    #BillPaySection .value
        {   font-size: 12px; 
            font-weight: normal; 
            margin: 5px 0px 0px 0px; 
            color: #666666; }
    #BillPaySection table td.payamtcolumn 
        {   text-align:right; }
    #BillPaySection table th.payamtcolumn
		{   text-align:right; }		
    #BillPaySection .messages
        {   text-align:  center; 
            margin-left: 10px; 
            margin-bottom: 0px; 
            padding:0px; }
    #BillPaySection .paginglinks    /* Other properties are inherited from (.PagingLinks) as well */
        {   text-align: right; 
            padding: 0px; 
            margin: 5px 7px 5px 7px; }
    #BillPaySection td.separator
        {   height: 10px; }
    #BillPaySection span.paymentamountdue 
        {   color: #3366cc; }


    /*  Payment Form         
        ------------------------------- */     
        #BillPaySection table.paymentform
             {  width: 98%; 
                margin: 10px 7px 0px 7px; 
                border: 0px; }
        #BillPaySection table.paymentform td
            {   border: 0px; 
                margin: 0px; 
                padding-right: 0px; 
                padding-left: 0px; 
                vertical-align: middle; 
                text-align: left;}
        #BillPaySection table.paymentform td.col1 
            {   width: 150px; 
                text-align: left; }
        #BillPaySection table.paymentform td.col2 
            {   width: 120px; 
                text-align: left; }
        #BillPaySection table.paymentform td.col3 
            {   width: 185px; 
                text-align: left; }
        #BillPaySection table.paymentform td.col4 
            {   width: 10px; 
                text-align: right; }
        #BillPaySection table.paymentform td.col5 
            {   width: 120px; 
                text-align: left; }            
        #BillPaySection table.paymentform td.confirmation
            {   text-align:center; 
                padding-right: 100px; 
                padding-left: 80px; 
                margin: 0px; 
                border: 0px; 
                vertical-align: middle; }
        #BillPaySection div.confirmationcode
            {   text-align: center; }
        #BillPaySection div.confirmationthanks
            {   text-align: center; 
                font-size: 13px; }
        #BillPaySection .paymentamountdue 
            {   color: #3366cc; }
            
            
    /*  Edit Payment
        ------------------------------- */ 
        #BillPaySection .editpayment input.updatebutton
            {   padding-left: 7px; 
                float: left; }
            
    /*  Payment Information 
        ------------------------------- */ 
        #BillPaySection .checkimage
            {   text-align: center; 
                color: #ff0000; }
                
        #BalanceGrid table.innertable td 
            {   padding: 2px 4px 2px 4px; 
                margin:0px; 
                text-align: left; 
                border-bottom: 1px solid #c7d1c6; 
                background: #ffffff; }        
            	 	            
/*  ---------------------------------------------------------------------------
    PAGE FOOTER CONTAINER
    Details at the foot of the page
    --------------------------------------------------------------------------- */  
    #pagefooter 
        {   width: 935px; 
            height: 56px; 
            margin: 20px auto 10px auto; 
            background: #ffffff url(../images/background/pagefooter.gif) repeat-x 0px 0px; }
    #pagefooter:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    #pagefooter 
        {   height: 56px; }
     
     
    /*  Footer Text
        ------------------------------- */ 
        #footer_txt
{
    display: block;
    float: left;
    width: 800px;
    padding: 20px 0px 0px 0px;
    font-size: 10px;
    color: #3399cc;
}
     
        #footer_txt_div 
            {   float: left; 
                padding: 15px 0px 0px 45px; 
                width: 400px; 
                font-size: 10px; 
                color: #1443a1; }
     
    /*  Legal Navigation
        Small link items related to legal and privacy information
        ------------------------------- */ 
        #nav_legal 
            {   float: left; 
                padding: 15px 0px 0px 0px; }
        #nav_legal li 
            {   float: left; 
                padding: 0px 10px 0px 0px; 
                font-size: 10px; 
                color: #cc6633; 
                list-style: none none; }
        #nav_legal li.first 
            {   float: left; 
                padding: 0px 10px 0px 10px; 
                font-size: 10px; 
                color: #cc6633; 
                list-style: none none; 
                background: url(../images/icons/nav_utility_pipe.gif) no-repeat 100% 0px; }
        #nav_legal li a 
            {   color: #3399cc; 
                text-decoration: none; }
        #nav_legal li a:hover 
            {   color: #cc0000; 
                text-decoration: none; }
     
     
    /*  Rate Badge
        Small link items related to legal and privacy information
        ------------------------------- */ 
        #rating 
            {   float: left; 
                margin: 0px 0px 0px 35px; }
        img.rating 
            {   float: left; 
                margin: 0px 0px 0px 35px; }
            
            
/*  ---------------------------------------------------------------------------
    BODY POPUP ID'S CONTAINER
    Print and Email Pages
    --------------------------------------------------------------------------- */ 
    body#popup #header 
        {   width: 578px; 
            height: 26px; 
            margin: 0px auto 2px auto; 
            padding: 0px 10px 0px 10px; 
            background: #fad956; 
            border-bottom: 2px solid #cc0000;}
    body#popup #header:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    body#popup #header 
        {   height: 26px; }

    body#popup #branding 
        {   width: 578px; 
            height: 76px; 
            margin: 0px auto; 
            background: #3366cc; 
            padding: 0px 10px 0px 10px;}
    body#popup #branding:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    body#popup #branding 
        {   height: 76px; }
    body#popup #branding img 
        {   margin: 20px 0px 0px 10px; }

    body#popup #bodywrapper 
        {   width: 598px; 
            margin: 0px auto; 
            background: #ffffff;}
    body#popup #bodywrapper:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    body#popup #bodywrapper 
        {   height: 100%; }

    body#popup #content 
        {   width: 552px; 
            padding: 23px;
            margin: 0px auto 10px auto;  
            font-size: 12px; 
            background: #e9eef6; }
    body#popup #content:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    body#popup #content 
        {   height: 100%; } 
                   
    body#popup #textchannel 
        {   float: left; 
            padding: 0px 15px 15px 30px; 
            margin: 0px; 
            width: 507px;}			  

    body#popup #pagefooter 
        {   width: 598px; height: 56px; 
            margin: 20px auto 10px auto; 
            background: #ffffff url(../images/background/pagefooter.gif) repeat-x 0px 0px; }
    body#popup #pagefooter:after 
        {   content: ""; 
            display: block; 
            height: 100%; 
            clear: both; }
    body#popup #pagefooter 
        {   height: 56px; }	


    body#popup img.pageheader 
        {   float: left; 
            padding-left: 30px;}

    body#popup #nav_legal 
        {   float: left; 
            padding: 5px 0px 0px 0px; 
            }
    body#popup #nav_legal li 
        {   float: left; 
            padding: 0px 10px 0px 10px; 
            font-size: 10px; 
            color: #cc6633; 
            list-style: none none; }
    body#popup #nav_legal li.first 
        {   float: left; 
            padding: 0px 10px 0px 0px; 
            font-size: 10px; 
            color: #cc6633; 
            list-style: none none; 
            background: url(../images/icons/nav_utility_pipe.gif) no-repeat 100% 0px; }

/*  ---------------------------------------------------------------------------
    CHAT CONTAINER
    --------------------------------------------------------------------------- */ 
    /*#chat 
        {   float: left; 
            width: 237px; 
            margin: 255px -77px 0px 0px; 
            background: url(../images/background/blue_paper.gif) repeat -18px 0px; 
            border: 1px solid black;}	*/
    #chat 
        {   float: left; 
            width: 237px; 
            margin: 255px -80px 0px 0px; 
            background: url(../images/background/blue_paper.gif) repeat -18px 0px; 
            padding: 0px 9px 0px 0px; }
    #chat p 
        {   line-height: 20px; 
            padding: 5px 15px;}		   

            
/*  ---------------------------------------------------------------------------
    TANBOX SECTION
    Example: Elements that are on the home page to login, search, link to offices, etc.
    --------------------------------------------------------------------------- */ 
    .tanbox 
        {   position: relative; 
            background: #f8f2d0; 
            border-top: 1px dashed #fad956; 
            /*margin: 0px; */
            margin-bottom: 20px;
            padding: 10px 10px 10px 15px; 
            border-right: 2px solid #fad956; 
            border-bottom: 1px dashed #fad956; 
            border-left: 2px solid #fad956; }
    .tanbox table
        {   /*position: relative; */
            margin: 0px; 
            padding: 0px; 
            border: 0px; 
            border-collapse: collapse; }
    .tanbox td 
        {   background: #f8f2d0; 
            margin: 0px; 
            padding: 0px; 
            border: 0px; 
            border-collapse: collapse; }
    .tanbox img
        {   padding: 2px; 
            border: 0px; }
    .tanbox img.heading /*Heading of the item in tanbox*/
        {   padding: 0px 0px 13px 0px; 
            margin: 0px; }    
    .tanbox img.labelimg    /*Form label images*/
        {   position: relative; 
            margin: 0px; 
            padding: 0px; 
            border: none; }     
    .tanbox a 
        {   font-size: 10px; 
            text-decoration: none; }
    .tanbox a:hover 
        {   text-decoration: underline; }                  
    .tanbox .gobutton   /*Form image buttons*/
        {   /*position: relative; */
            bottom: 0px; 
            padding: 0px; 
            margin: 0px;}
    .tanbox select
        {   margin: 2px 0px 3px 0px; }    
    .tanbox .inputbox
        {   margin: 2px 0px 5px 0px; }
    .tanbox span.label 
        {   font-size: 11px; 
            font-weight: bold; }
            
    .tanbox div.loginRow
    {
        width: 100%;
        height: auto;
        float: left;
    }
        
                
    /*  Quick Find Elements
        Specific for quick find elements
        ------------------------------- */ 
        .quickfind 
            {   width: 180px; }          
        .quickfindWhite /* Blue Borders and White Inside*/
            {   position: relative; 
                background:#FFFFFF; 
                border-top: 1px dashed #3366CC; 
                margin: 0px; 
                padding: 10px 10px 10px 15px; 
                border-right: 2px solid #3366cc; 
                border-bottom: 1px dashed #3366cc; 
                border-left: 2px solid #3366cc; 
                width: 180px; }
        * html .quickfind 
            {   width: 185px; }
        .quickfind#subform 
            {   background: #f8f2d0; 
                border-top: none; 
                margin: 0px 0px 20px 0px; 
                padding: 10px 10px 10px 15px; 
                border-right: 2px solid #fad956; 
                border-bottom: 1px dashed #fad956; 
                border-left: 2px solid #fad956; }
        .quickfind .separator 
            {   font-size: 11px; 
                text-transform: uppercase; 
                text-align: center; }


    /*  Side Panel Login Elements
        Specific for the login elements
        ------------------------------- */ 
        .sidepanellogin 
            {   width: 180px; }          
        * html .sidepanellogin 
            {   width: 185px; }
        .sidepanellogin#subform 
            {   background: #f8f2d0; 
                border-top: none; 
                margin: 0px 0px 20px 0px; 
                padding: 10px 10px 10px 15px; 
                border-right: 2px solid #fad956; 
                border-bottom: 1px dashed #fad956; 
                border-left: 2px solid #fad956; }
        .sidepanellogin .separator 
            {   font-size: 11px; 
                text-transform: uppercase; 
                text-align: center; }
        .sidepanellogin ul  { }
        .sidepanellogin li
            {   list-style-type: none; 
                padding-bottom: 2px; }

/* Ajax Calendar control used for Commission Statements page*/		

.yui .ajax__calendar_body 
{
    position:relative;
    overflow:hidden;
}

.yui .ajax__calendar_header
{
	background-color:#ABABAB;
	height:22px;
    width:100%;
    font-size:10pt;
    font-weight:bold;
    text-align:center;
    padding-top:3px;
       
}

.yui .ajax__calendar_months table,  .yui .ajax__calendar_years table
{
    text-align:center; 
	background: #C4D3EA; 
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px; 
	border:none;  
}

.yui .ajax__calendar_months table td, .yui .ajax__calendar_years table td
{ 
    text-align:center; 
    position: relative;
	background: #C4D3EA; 
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;  
}

.yui .ajax__calendar_footer
{
	display:none;
}



.yui .ajax__calendar_hover .ajax__calendar_day, .yui .ajax__calendar_hover .ajax__calendar_month, .yui .ajax__calendar_hover .ajax__calendar_year, .yui .ajax__calendar_hover .ajax__calendar_title
{
    color:#0066cc;
}

.yui .ajax__calendar_prev 
{
    margin-top:2px;
    margin-left:4px;
    height:15px;
    width:25px;
    cursor:pointer;
    float:left;
    
   
}
.yui .ajax__calendar_next 
{
    margin-top:2px;
    margin-right:4px;
    height:15px;
    width:25px;    
    cursor:pointer;
    float:right;
    
}


/* Company News Headlines  */
.companynews td
{
	vertical-align:top;
	padding:0px 2px 5px 0px;
}

.companynews img
{
	vertical-align:top;
	padding:2px 2px 0px 0px;
}