/*-----------------------------------------------------------------------------------------------*/
/*                                      4LIFE.COM REDESIGN                                       */
/*                                         BLUE LAYOUT                                           */
/*-----------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------*/
/*                                            STYLES                                             */
/*-----------------------------------------------------------------------------------------------*/

#main a {color: #ede10b;}
#main a:hover {color: #FFF;}

#main .external {padding-right: 13px; background: transparent url(images/external.gif) no-repeat right;}
#main .external:hover {background: transparent url(images/external-over.gif) no-repeat right;}

#contentLeft h2 sup {font-size: .3em;}

/*-----------------------------------------------------------------------------------------------*/
/*                                            LAYOUT                                             */
/*-----------------------------------------------------------------------------------------------*/

body {background-color: #83aac0;}

#wrapper {background: #042D49 url(images/bg.jpg) no-repeat bottom;}

	#innerWrapper {
		background: transparent url(images/bg2Grad.png) repeat-x bottom;
		min-height: 585px;
		height: auto !important;
		height: 585px;}
	
		#pageTop {
			/*width: 995px;*/
			min-height: 540px;
			height: auto !important;
			height: 540px;
			margin: auto;}
    	
	        #title {padding-top: 5px;height: 39px; margin-bottom: 5px;}
			
			#sidebar {
				width: 155px;
				float: left;
				padding: 75px 0 40px 50px;
				overflow: hidden;
				margin-bottom: 100px;}
			
				#sidebar ol {line-height: 1.7em;}
			
		    	#sidebar li {line-height: 1.1em; margin: 9px 0;}
			
				#sidebar li a {
					text-decoration: none;
					color: #ede10b;
					font-weight: bold;
					font-size: 1em;}
				
				#sidebar li a:hover, #sidebar a.active {color: #FFF;}
				
				#sidebar ul {margin: 0 0 5px 20px;}
				
				    #sidebar ul li {line-height: 1.1em; margin: 7px 0;}
    						
            #main {width: 995px; margin: auto;}
					
			#content {
				width: 745px;
				min-height: 486px;
				height: auto !important;
				height: 486px;
				float: right;
				position: relative;}
				
				#contentLeft {
					width: 390px;
					float: left;
					min-height: 300px;
					height: auto !important;
					height: 300px;
					/*padding: 70px 0 95px 0;*/
					padding: 70px 0 1px 0;}
				
					#contentLeft h2 {
						font-size: 3em;
						font-weight: bold;
						color: #FFF;}
										
					#contentLeft h3 {
						font-size: 1.5em;
						color: #FFF;
						margin: 10px 0 20px 0;}
					
					    #contentLeft h3 sup {font-size: .5em;}
					
					#contentLeft p {
						font-size: 1.2em;
						margin: 10px 0;
						line-height: 1.5em;
						color: #e1e1e1;
						font-weight: bold;}
					    
					    #contentLeft p em {font-weight: bold; font-style: italic;}
					    
						#contentLeft p b {
							font-size: 1.2em;
							color: #FFF;}
						
						#contentLeft a.callPopUp {color: #ede10b; cursor: pointer;}
						
						#contentLeft a.callPopUp:hover, #contentLeft a.callPopUp:active {color: #FFF;}
						
						#contentLeft label {color: #FFF;}
				
				#contentPic {
					width: 336px;
					height: 466px;
					float: right;
					position: absolute;
					bottom: 0px;
					right: 0px;}
				
				    .blueHome #content {float: left; position: relative; left: 125px; width: 765px;}
				    .blueHome #contentLeft {width: 381px; margin-right: 20px;}
				    
				    .blueHome #contentLeft ul a {font-size: 1.4em;}
				        .blueHome #contentLeft ul .videoLink {font-size: .6em; margin-top: 70px;}
				    
				    .blueHome #contentPic {width: 355px; float: left;}
            
            #wrapper #footer {position: relative; top: 5px;}
                
/*   Login
----------------------------------------------------------------------------------------------------- */

#wrapper .loginLeft {}

#wrapper .loginPic  {}

    #contentLeft .login h2 {font-size: 2.5em; margin-bottom: 25px;}
    
    #contentLeft .login h3 {margin-top: 20px; margin-bottom: 5px;}
    
    #contentLeft .login span {color: #fff; font-weight: bold; margin-bottom: 3px;}
    #contentLeft .login label {color: #fff; font-weight: normal; margin-bottom: 3px;}

    #contentLeft .login .formDiv span.checkBoxStyle input {margin-right: 5px;}

    #contentLeft .login .formDiv .inputStyle {width: 270px;}
    #contentLeft .login .formDiv .selectStyle {width: 275px;}
    
    #contentLeft .login .headerBtns input {width: auto;}
               
    #contentLeft .login a.button {
        color: #fff;
        float: left;
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;}
        
    #contentLeft .login .formDiv {
        width: 310px;
        padding: 8px 0;}
        
    #contentLeft .login .alertMessage {
        color: #ede10b;
        display: block;
        padding: 8px 0;}
        
        
/*  Error Messages
----------------------------------------------------------------------------------------------------- */
       
 .errors {color: #ed850b; margin-bottom: 10px; font-size: 1.1em; font-weight: bold;}

    .errors ul {color: #ed850b; margin-top: 3px; margin-left: 15px; line-height: 2em;}

     .errors ul li {
        color: #ed850b;
        font-size: 1em;
        font-weight: normal;
        line-height: 1.4em;
        list-style-type: disc;}
        

/* Blue Buttons
----------------------------------------------------------------------------------------------------*/

#contentLeft span.blueButton {
    background: url(../../images/login/button_bg1.gif) no-repeat top left; 
    line-height: 24px;
    padding-top: 1px;
    padding-bottom: 1px;}

    #contentLeft span.blueButton a {
        background: url(../../images/login/button_bg2.gif) no-repeat top right;
        color: #fff;
        margin-left: 4px;
        line-height: 24px;        
        padding: 1px 10px 1px 6px;}

/*  Ticker (specific styles for the blue pages
---------------------------------------------------------------------- */

#headlines {
    background: url(../../images/news/ticker_Bg.gif) no-repeat;
    margin: 0 auto;
    width: 586px;}

        #headlines a {color: #fff;}
       
/*-----------------------------------------------------------------------------------------------*/
/*                                            POPUP                                              */
/*-----------------------------------------------------------------------------------------------*/	
	
.popup {
	position: absolute;
	z-index: 311;
	width: 460px;
	display: none;}

	.popTop {
		height: 30px;
		background: transparent url(../images/popTop_ie6.gif) no-repeat;
		text-align: right;
		padding-right: 22px;}
		
	.popup > .popTop {background: transparent url(../images/popTop.png) no-repeat;}
	
		.popTop a {
		    display: block;
		    width: 10px;
		    height: 10px;
		    background: transparent url(../images/popUpClose.gif) no-repeat;
		    float: right;
			vertical-align: middle;
			cursor: pointer;
			position: relative;
			top: 10px;}
			
			.popTop a:hover {background: transparent url(../images/popUpClose-over.gif) no-repeat;}
	
	.popMid {
		background: transparent url(../images/popMid_ie6.gif) repeat-y;
		color: #003768;
		font-size: .9em;
		padding: 0 15px 0 15px;}
		
	.popup > .popMid {background: transparent url(../images/popMid.png) repeat-y;}
	
		.popMid .close {
			margin-top: 15px;
			text-align: center;
			font-weight: bold;
			color: #009ddc;}
		
			.popMid .close span {cursor: pointer;}
	
	.popBtm {
		height: 24px;
		background: transparent url(../images/popBtm_ie6.gif) no-repeat;}
	.popup > .popBtm {background: transparent url(../images/popBtm.png) no-repeat;}
	
	.popText {display: none;}
	
	.popContent {
		max-height: 350px;
		overflow: auto;
		width: 420px;
		padding-top: 10px;
		padding-bottom: 10px;}
	
	.popupHeadline {
		font-size: 1.3em;
		font-weight: bold;}
	
	.close {overflow: hidden; text-align: center;}
	
	.close .button {margin:auto; float: none; display: inline; font-size: 1.1em; line-height: 1.6em;}
	
	.popContent a {color: #009ddc;}
	.popContent a:hover {text-decoration: underline;}

    .popup .popContent a:hover {text-decoration: underline;}
    
    .popup div.popUpImage {
        float: right;
        clear: none;
        text-align: center;
        margin: 0 0 15px 10px;}
        
/*-----------------------------------------------------------------------------------------------*/
/*                                          RECOGNITION                                          */
/*-----------------------------------------------------------------------------------------------*/

#recognitionWrapper {width: 620px; height: 480px; background: transparent url(images/recognition/btm-grad.png) repeat-x bottom; margin: 30px 0 0 50px; position: relative;}
#recognition {height: 420px; background: #f0f0f0; padding: 15px;}
    #recognition h2 {font-weight: bold; color: #666666; margin-bottom: 10px;}
    #recognition h3 a {font-weight: bold; color: #003366; width: 290px; float: left; line-height: 1.4em;}
    #recognition h3 a:hover, #recognition h3 a.active {color: #1e8ad2;}
    
    .special-awards #recognition h3 {font-weight: bold; color: #003366; width: 290px; float: left; line-height: 1.4em;}
    .special-awards #recognition h3.active span {color: #1e8ad2;}
        .special-awards #recognition h3 a {font-weight: normal; font-size: .9em; color: #003366; width: auto; float: none;}
        .special-awards #recognition h3 a:hover, #recognition h3 a.active {color: #1e8ad2;}
        
        .special-awards #recognition h3 a.inactive {font-weight: normal; font-size: .9em; color: #999; width: auto; float: none;}
        .special-awards #recognition h3 a.inactive:hover {color: #999; cursor: default;}
    
    #recognitionWrapper a {color: #1e8ad2;}
    #recognitionWrapper a:hover {color: #003366;}
    
    #recognition input.getSort {margin: 10px 0; width: 125px; border: solid 1px #969696; padding: 1px 1px 1px 20px; background: #FFF url(images/recognition/magnifier.png) no-repeat 2px 1px;}
    #recognition .getCountry {margin: 10px 0; width: 125px; border: solid 1px #969696; padding: 1px;}
        #recognition input.thinking {background: #FFF url(../images/loading/bars-small.gif) no-repeat 2px 2px;}
    
    #recognition .pagination {text-align: right; float: right; position: absolute; right: 16px; top: 110px; font-size: .8em;}
        #recognition .pagination a {padding: 1px 6px; border: solid 1px #999; line-height: 17px;}
        #recognition .pagination a.active, #recognition .pagination a.active:hover {background: #5B849A; border: solid 1px #666; color: #FFF; cursor: default;}
        #recognition .pagination a:hover {background: #83AAC0; border: solid 1px #666; color: #FFF;}
        #recognition .pagination a.inactive, #recognition .pagination a.inactive:hover {border: solid 1px #DDD; color: #DDD; background: transparent; cursor: default;}
        #recognition .pagination span {padding: 0 6px; border: solid 1px #999; line-height: 17px; color: #666;}
    
    #recognition-head {height: 120px;}
    #recognition-body {height: 280px; background: #f9f9f9;}
    #recognition-footer {height: 20px; color: #636363; font-size: .9em; line-height: 20px; margin-top: 5px;}
    
    #recognition-body {
        width: 588px;
        overflow: hidden; 
        position: relative; 
        border: solid 1px #DFDFDF;}
        
        div#qTotal {display: none;}
        
        #load-list {position: relative;}
        #recognition-body .loading-bars {position: absolute; z-index: 500; top: 121px; left: 277px;}
        
        #recognition-body ul {}
        
        #recognition .platinum li a {}
            
            #recognition .platinum li.active a {
                display: block;}
        
        #recognition .gold li {
            display: block; 
            float: left;
            width: 70px; 
            height: 125px;
            margin: 5px 0 5px 24px;
            overflow: hidden;
            font-size: .8em;
            text-align: center;}
        
        #recognition .international ul li,
        #recognition .presidential ul li,
        #recognition .diamond ul li
            {padding: 0 5px; line-height: 1.45em; color: #333; overflow: hidden; border-bottom: solid 1px #DDD;}

            #recognition .international ul li:hover,
            #recognition .presidential ul li:hover,
            #recognition .diamond ul li:hover
                {background: #EFEFEF;}
            
            #recognition li .recName {width: 490px; float: left;}
                #recognition li .isNew {color: red; font-size: .8em;}
            #recognition li .recMy4life {width: 45px; float: left;}
                #recognition li .recMy4life a {display: block; width: 30px; height: 12px; text-indent: -5000px; background: transparent url(images/recognition/icon-my4life.gif) no-repeat; position: relative; top: .4em;}
                
                #recognition li a.specMy4life {padding: 5px 15px; background: transparent url(images/recognition/icon-my4life.gif) no-repeat; position: relative; top: .4em;}
                #recognition li .recName a.specMy4life {top: .6em;}
                
            /*#recognition li .recCountry {width: 25px; float: left; text-transform: capitalize;}
                #recognition li .recCountry span {display: block; width: 35px; height: 15px; background-repeat: no-repeat; background-position: right; position: relative; top: 2px;}
                
                #recognition span.australia {background-image: url(images/recognition/flags/Australia.png);}
                #recognition span.austria {background-image: url(images/recognition/flags/Austria.png);}
                #recognition span.canada {background-image: url(images/recognition/flags/Canada.png);}
                #recognition span.colombia {background-image: url(images/recognition/flags/Columbia.png);}
                #recognition span.costa {background-image: url(images/recognition/flags/CostaRica.png);} 
                #recognition span.dominican {background-image: url(images/recognition/flags/DominicanRepublic.png);}
                #recognition span.eu {background-image: url(images/recognition/flags/EU.png);}
                #recognition span.germany {background-image: url(images/recognition/flags/Germany.png);}
                #recognition span.hong {background-image: url(images/recognition/flags/HongKong.png);}
                #recognition span.india {background-image: url(images/recognition/flags/India.png);}
                #recognition span.indonesia {background-image: url(images/recognition/flags/Indonesia.png);}
                #recognition span.japan {background-image: url(images/recognition/flags/Japan.png);}
                #recognition span.korea {background-image: url(images/recognition/flags/Korea.png);}
                #recognition span.malaysia {background-image: url(images/recognition/flags/Malaysia.png);}
                #recognition span.mexico {background-image: url(images/recognition/flags/Mexico.png);}
                #recognition span.new {background-image: url(images/recognition/flags/NewZealand.png);}
                #recognition span.panama {background-image: url(images/recognition/flags/Panama.png);} 
                #recognition span.philippines {background-image: url(images/recognition/flags/Philippines.png);}
                #recognition span.poland {background-image: url(images/recognition/flags/Poland.png);}
                #recognition span.portugal {background-image: url(images/recognition/flags/Portugal.png);}
                #recognition span.puerto {background-image: url(images/recognition/flags/PuertoRico.png);}
                #recognition span.russia {background-image: url(images/recognition/flags/Russia.png);}
                #recognition span.singapore {background-image: url(images/recognition/flags/Singapor.png);}
                #recognition span.spain {background-image: url(images/recognition/flags/Spain.png);}
                #recognition span.taiwan {background-image: url(images/recognition/flags/Taiwan.png);}
                #recognition span.thailand {background-image: url(images/recognition/flags/Thailand.png);}
                #recognition span.uk {background-image: url(images/recognition/flags/UK.png);}
                #recognition span.us {background-image: url(images/recognition/flags/US.png);}*/
        
        #recognition .gold ul li.alt,
        #recognition .presidential ul li.alt,
        #recognition .diamond ul li.alt
            {background: #DFDFDF;}
    
    .recognition-cat {float: left; width: 590px;}
    
    .no-results {display: block; text-align: center; line-height: 250px; font-weight: bold; color: #003366;}
    
#recognition-overlay {display: none; width: 570px; height: 400px; padding: 25px; position: absolute; left: 0px; top: 0px;  background: transparent url(../images/recognition/semi-transparent-bg.gif) repeat; z-index: 666;}
    #recognition-overlay-inner {width: 530px; height: 380px; padding: 0 20px 20px 20px; background: #FFF;}
        #load-content {height: 340px; overflow: auto; position: relative;}
            #load-content img.recImage {float: left; margin: 0 15px 15px 0;}
            #load-content h2 {font-weight: bold; font-size: 1.3em;}
            #load-content p {margin: 0 0 15px 0;}
            #load-content img.loading-bars {position: absolute; z-index: 500; top: 131px; left: 250px;}
            
    #recognition-overlay-inner a.overlay-close {font-weight: bold; line-height: 45px;}
    
    .ninjaGallery {width: 588px; height: 280px; margin: 0 auto; overflow: hidden; position: relative;}
	.ninjaGallery ul {height: 250px; width: 50000px; position: relative;}
	.ninjaGallery ul li {display: block; float: left; width: auto;}
		.ninjaGallery ul li * {position: relative;}
		.ninjaGallery ul li.active {position: relative; z-index: 500;}
		
	.ninjaGallery a.movebutton {
	    position: absolute; 
	    top: 0px; 
	    z-index: 566; 
	    display: block; 
	    width: 20px; 
	    height: 280px; 
	    line-height: 25px; 
	    text-indent: -5000px; 
	    text-align: center; 
	    background-color: Transparent;
	    background-repeat: no-repeat;  
	    color: #FFF; 
	    text-decoration: none; 
	    font-weight: bold; 
	    font-size: 18px;}
	    
	    #wrapper .ninjaGallery .movebutton:not(div) {background-image: url(images/recognition/platinum-arrows.png);}
	    .ninjaGallery a.movebutton {background-image: url(images/recognition/platinum-arrows-ie.png);}
		
		.ninjaGallery a.left {left: 0px; background-position: 0 0;}
		.ninjaGallery a.right {right: 0px; background-position: -42px 0;}
		    .ninjaGallery a.left:hover {background-position: -21px 0;}
		    .ninjaGallery a.right:hover {background-position: -63px 0;}
		
		
		.ninjaGallery ul {position: relative; top: 60px;}
		
		div.additional-content {width: 130px; z-index: 400; text-align: center;}
		    div.additional-content span.country {font-size: .8em; color: #999;}
		    #recognition div.additional-content div.recMy4life {float: none; margin: auto;}
		        div.additional-content div.recMy4life a {display: block; margin: auto; width: 30px; top: 2px; float: none;}
		li.active div.additional-content {width: 165px;}
		
		#load-content a.recMy4life  {
            padding: 0 15px;
            background: transparent url(images/recognition/icon-my4life.gif) no-repeat center;}


/*-----------------------------------------------------------------------------------------------*/
/*                           CLICK FOR CASH WIDGET ON THE LOG IN PAGE                            */
/*-----------------------------------------------------------------------------------------------*/
    
    #clickForCash-wrapper {
        background: transparent url('../../images/login/clickForCash-reflection.png') repeat-x left bottom; 
        overflow: hidden;
        width: 371px;
        height: 127px;}
        
     #clickForRewards-wrapper {
        background: transparent url('../../images/login/clickForCash-reflection.png') repeat-x left bottom; 
        overflow: hidden;
        width: 178px;
        height: 127px;}
            
        
    #clickForCash-wrapper #logo, #clickForRewards-wrapper #rewards-logo {
        background: #fff6df;
        border: 1px solid #696969;
        float:left;
        text-align: center;
        overflow: hidden;
        height: 108px;
        width: 178px;}
        
        #clickForCash-wrapper #logo img, #clickForRewards-wrapper #rewards-logo img {padding: 4px;}
        
        #clickForCash-wrapper #logo a, #clickForRewards-wrapper #rewards-logo a  {color: #009ddc; font-size: .9em;}
            #clickForCash-wrapper #logo a:hover, #clickForRewards-wrapper #rewards-logo a:hover {color: #009ddc; text-decoration: underline;}
        
    #clickForCash-sideBar {
        background: #fff6df;
        border: 1px solid #696969;
        border-left: none;
        color: #000000;
        float: left;
        overflow: hidden;
        height: 108px;
        width: 190px;}
                
        #clickForCash-sideBar .headline {
            background-color: #ffe192;
            font-size: 1.3em;
            font-weight: bold;
            height: 26px;
            line-height: 26px;
            text-align: center;}
        
        #clickForCash-sideBar .viewable-area {
            height: 84px;
            overflow: hidden;}
      
            #clickForCash-sideBar .viewable-area li {
                font-size: .9em;
                height: 42px;}
            
            #clickForCash-sideBar .viewable-area li.alt {background-color: #ffeec0;}
             
                #clickForCash-sideBar .viewable-area li div {
                    float:left;
                    height: 21px;
                    line-height: 21px;
                    overflow: hidden;
                    padding: 0 2px;}
                
                #clickForCash-sideBar .viewable-area li div.name {width: 125px; font-weight: bold;}
                #clickForCash-sideBar .viewable-area li div.amount {width: 55px; text-align: right; font-weight: bold;}
                #clickForCash-sideBar .viewable-area li div.location {width: 106px;}
                
                #clickForCash-sideBar .viewable-area li div.date-time {width: 75px; text-align: right;}
                /* #clickForCash-sideBar .viewable-area li div.date {width: 62px; text-align: right;} */
                /* #clickForCash-sideBar .viewable-area li div.time {width: 50px; text-align: right;} */