/* GRAPHICS.CSS */

/* NAVIGATION */
ul#nav-tools li#nav_facebook{width:24px; height:24px; background:url(../images/icon_facebook.png) 12px 0 no-repeat; text-indent:-9999px;}
ul#nav-tools li#nav_twitter{width:24px; height:24px; background:url(../images/icon_twitter.png) center 0 no-repeat; text-indent:-9999px; }
ul#nav-tools li#nav_blogger{width:24px; height:24px; background:url(../images/icon_blogger.png) center 0 no-repeat; text-indent:-9999px; }


.button {
	text-indent: -9000px;  
	height: 27px;
	line-height:27px;
	/*\*/
	display: block;
	/*/
	display: inline-block;
 	/**/	
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	margin: 0 5px 0 0;
	-moz-outline:none;
	background-color:transparent;
	border:0;
	float:left; 
}

.button.myAccount,
.button.developerSite{line-height:32px; float:none;}
.button.developerSite{margin-bottom:30px;}

.button:focus::-moz-focus-inner, .tab:focus::-moz-focus-inner { 
	/* removes dotted outline in FF */
	-moz-outline: none; 
	outline:none;
	border:none;
}
button::-moz-focus-inner { 
	/* removes dotted outline in FF */
	-moz-outline: none; 
	border: none;
	outline:none;
}

/* BUG:24993 - FYI include */
ul#protected-carriers-phones li{text-indent:-9999px;}
ul#protected-carriers-phones li#att{background:url(../images/logo_att.png) 0 center no-repeat;}
ul#protected-carriers-phones li#sprint{background:url(../images/logo_sprint.png) 0 center no-repeat;}
ul#protected-carriers-phones li#verizon{background:url(../images/logo_verizon.png) 0 center no-repeat;}
ul#protected-carriers-phones li#tmobile{background:url(../images/logo_tmobile.png) 0 center no-repeat;}

/* Edit Permission: Steps 1,2 and 3 */
ul#editPermissionSettings li h3.one{background:url(../images/one.png) 0 0 no-repeat;}
ul#editPermissionSettings li h3.two{background:url(../images/two.png) 0 0 no-repeat;}
ul#editPermissionSettings li h3.three{background:url(../images/three.png) 0 0 no-repeat;}
/* SH: at some point I wanted to use registerProvisionSteps, but this seems better */
/* Registration Provisioning Steps 1,2,3 and 4 - ON graphics - using var so number is numeric vs. spelt out */
ol#provisioningSteps li.active .no1{background:url(../images/one-on.png) 0 0 no-repeat;}
ol#provisioningSteps li.active .no2{background:url(../images/two-on.png) 0 0 no-repeat;}
ol#provisioningSteps li.active .no3{background:url(../images/three-on.png) 0 0 no-repeat;}
ol#provisioningSteps li.active .no4{background:url(../images/four-on.png) 0 0 no-repeat;}
/* Registration Provisioning Steps 1,2,3 and 4 - OFF graphics  - using var so number is numeric vs. spelt out */
ol#provisioningSteps li.nonactive .no1{background:url(../images/one-off.png) 0 0 no-repeat;}
ol#provisioningSteps li.nonactive .no2{background:url(../images/two-off.png) 0 0 no-repeat;}
ol#provisioningSteps li.nonactive .no3{background:url(../images/three-off.png) 0 0 no-repeat;}
ol#provisioningSteps li.nonactive .no4{background:url(../images/four-off.png) 0 0 no-repeat;}

.spinner{background:url(../images/spinner.gif) 0 0 no-repeat; width:24px; height:24px;}

.arrow,
ul.faq li h4,
ul#emailHelp li h4{background:url(../images/arrow.gif) 0 2px no-repeat; padding-left:15px;}

/* location history */
#locations-container .icon-sm,
#requests-container .icon-sm{background:url(../images/located_icon.png) 0 0 no-repeat; width:40px; height:40px;}

/* registration */
.textBubble{background:url(../images/textBubble.png) 0 0 no-repeat; width:32px; height:22px; padding-left:40px; line-height:22px; width:auto;}

/* LANDING PAGE: SH: image is now on body of landing page
body.landing #phoneMapRibbon-img{background: url(../images/landing_phoneMapRibbon.png) 0 0  no-repeat; width:564px;width:665px; height:251px; }*/
body.landing #footer,
body.about #footer {background: transparent url(../images/bkgd_footer.png) 0 0 repeat-x; width:100%; height:250px;}

/* featured apps */
body.landing #featuredApps-container ul li #uShip-img,
body.landing #featuredApps-container ul li #theLostPhone-img,
body.landing #featuredApps-container ul li #tweetMyCity-img,
body.landing #featuredApps-container ul li #currentCity-img{background-position:0 0; background-repeat:no-repeat; width:100px; height:70px; float:left; text-indent:-9999px;}
/* even thought text is not showing, make it a link */
body.landing #featuredApps-container ul li #uShip-img a,
body.landing #featuredApps-container ul li #theLostPhone-img a,
body.landing #featuredApps-container ul li #tweetMyCity-img a,
body.landing #featuredApps-container ul li #currentCity-img a{width:100px; height:70px; cursor:pointer; display:block;}
/* images */
body.landing #featuredApps-container ul li #uShip-img{background-image:url(../images/uShip.png);}
body.landing #featuredApps-container ul li #theLostPhone-img{background-image:url(../images/theLostPhone.png) ;}
body.landing #featuredApps-container ul li #tweetMyCity-img{background-image:url(../images/tweetMyCity.png);}
body.landing #featuredApps-container ul li #currentCity-img{background-image:url(../images/currentCity.png);}


/* developers */
body.landing #developers-img{background:url(../images/landing_developers.png) 0 0 no-repeat; width:75px; height:87px; text-indent:-9999px;}


/* see typography.css for additional styles */
/* ideal just to use corner graphics on top of background color, 
   but unable to get right corner on featured header to appear 
	(worked z-index to no avail). I think the wrapper being static 
	affects this, but unable to change that, hence sloppy graphical way */
h2#featured{
	background: url(../images/header_bkgd_featured.png) 0 0 no-repeat; 
	width:310px;
	}
	
h2#what{
	background: url(../images/header_bkgd_what.png) 0 0 no-repeat; 
	width:554px;
	}

/* LANDING PAGE */
body.landing .box#myAccount-box ul#carriers-list li{
	margin: 0 20px 0 0; 
	width:60px; 
	height:45px; 
	line-height:45px; 
	float:left; 
	display:block; 
	background-position:0 center; 
	background-repeat:no-repeat; 
	text-indent:-9999px;
	}
	
body.landing .box#myAccount-box ul#carriers-list{margin-bottom:1.5em;}
body.landing .box#myAccount-box ul#carriers-list li#att{background-image:url(../images/logo_att_sm.png);}
body.landing .box#myAccount-box ul#carriers-list li#sprint{background-image:url(../images/logo_sprint_sm.png); height:36px; line-height:36px}
body.landing .box#myAccount-box ul#carriers-list li#tmobile{background-image:url(../images/logo_tmobile_sm.png);}
body.landing .box#myAccount-box ul#carriers-list li#verizon{background-image:url(../images/logo_verizon_sm.png); width:55px; height:30px; line-height:30px; margin-right:0;}
body.landing .box#myAccount-box ul#carriers-list li#note{float:none; width:auto; height:auto; text-indent:0; clear:both; line-height:20px; margin:0;}
	
/* eventually all .button within #buttons div will be display:block;  */
.add{background:url(../images/btn_add_all.png) 0 0 no-repeat; width:80px;}
.add:hover{background-position:-80px;}

.back{background:url(../images/btn_back_all.png) 0 0 no-repeat; width:80px;}
.back:hover{background-position:-80px;}

.cancel{background:url(../images/btn_cancel_all.png) 0 0 no-repeat; width:90px;}
.cancel:hover,
.cancel:focus{background-position:-90px;}

.clear-btn{background:url(../images/btn_clear_all.png) 0 0 no-repeat; width:100px;}
.clear-btn:hover,
.clear-btn:focus{background-position:-100px;}

.closeMyAccount{background:url(../images/btn_closeMyAccount_all.png) 0 0 no-repeat; width:195px;}
.closeMyAccount:hover,
.closeMyAccount:focus{background-position:-195px;}

.continue{background:url(../images/btn_continue_all.png) 0 0 no-repeat; width:125px;}
.continue:hover,
.continue:focus{background-position:-125px;}

.createAcct{background:url(../images/btn_createAcct_all.png) 0 0 no-repeat; width:159px;  border:0;}	
.createAcct:hover,
.createAcct:focus{background-position:-159px;}	

.developerSite{background:url(../images/btn_developerSite_all.png) 0 0 no-repeat; width:135px; height:32px; }
.developerSite:hover,
.developerSite:focus{background-position:-135px;}

.done{background:url(../images/btn_done_all.png) 0 0 no-repeat; width:80px;}
.done:hover,
.done:focus{background-position:-80px;}

.deleteRequest{background:url(../images/btn_deleteRequest_all.png) 0 0 no-repeat; width:210px;}
.deleteRequest:hover,
.deleteRequest:focus{background-position:-210px;}

.getStarted{background:url(../images/btn_getStarted_all.png) 0 0 no-repeat; width:128px;}
.getStarted:hover,
.getStarted:focus{background-position:-128px;}

.goToAccountSettings{background:url(../images/btn_goToAccountSettings_all.png) 0 0 no-repeat; width:230px;}
.goToAccountSettings:hover,
.goToAccountSettings:focus{background-position:-230px;}

.iAccept{background:url(../images/btn_IAccept_all.png) 0 0 no-repeat; width:104px;}
.iAccept:hover,
.iAccept:focus{background-position:-104px;}

.myAccount{background:url(../images/btn_myAccount_all.png) 0 0 no-repeat; width:135px; height:32px }
.myAccount:hover,
.myAccount:focus{background-position:-135px;}

.ok{background:url(../images/btn_ok_all.png) 0 0 no-repeat; width:80px;}
.ok:hover,
.ok:focus{background-position:-80px;}

.revoke{background:url(../images/btn_revoke_all.png) 0 0 no-repeat; width:115px;}
.revoke:hover,
.revoke:focus{background-position:-115px;}

.save{background:url(../images/btn_save_all.png) 0 0 no-repeat; width:100px;}
.save:hover,
.save:focus{background-position:-100px;}

.send{background:url(../images/btn_send_all.png) 0 0 no-repeat; width:95px;}
.send:hover,
.send:focus{background-position:-95px;}

.settings{background:url(../images/btn_settings_all.png) 0 0 no-repeat; width:115px;}
.settings:hover,
.settings:focus{background-position:-115px;}

.shareMyLocation{background:url(../images/btn_shareMyLocation_all.png) 0 0 no-repeat; width:183px;}
.shareMyLocation:hover,
.shareMyLocation:focus{background-position:-183px;}

.signIn-btn{background:url(../images/btn_signIn_all.png) 0 0 no-repeat; width:95px;}
.signIn-btn:hover,
.signIn-btn:focus{background-position:-95px;}

.signIn-openID{background:url(../images/btn_signIn-openID_all.png) 0 0 no-repeat; width:95px;}
.signIn-openID:hover,
.signIn-openID:focus{background-position:-95px;}

.stillWantToCloseAcct{background:url(../images/btn_stillWantToCloseAcct_all.png) 0 0 no-repeat; width:300px;}
.stillWantToCloseAcct:hover,
.stillWantToCloseAcct:focus{background-position:-300px;}

.submit{background:url(../images/btn_submit_all.png) 0 0 no-repeat; width:95px;}
.submit:hover,
.submit:focus{background-position:-95px;}

.tryAgain{background:url(../images/btn_tryAgain_all.png) 0 0 no-repeat; width:120px;}
.tryAgain:hover,
.tryAgain:focus{background-position:-120px;}

.turnOffDeveloperMode{background:url(../images/btn_turnOffDeveloperMode_all.png) 0 0 no-repeat; width:245px;}
.turnOffDeveloperMode:hover,
.turnOffDeveloperMode:focus{background-position:-245px;}

.turnOnDeveloperMode{background:url(../images/btn_turnOnDeveloperMode_all.png) 0 0 no-repeat; width:245px;}
.turnOnDeveloperMode:hover,
.turnOnDeveloperMode:focus{background-position:-245px;}

.unlock{background:url(../images/btn_unlock_all.png) 0 0 no-repeat; width:93px;}
.unlock:hover,
.unlock:focus{background-position:-93px;}

.yesDelete{background:url(../images/btn_yesDelete_all.png) 0 0 no-repeat; width:125px;}
.yesDelete:hover,
.yesDelete:focus{background-position:-125px;}

.yesDeleteAndReturn{background:url(../images/btn_yesDeleteAndReturn_all.png) 0 0 no-repeat; width:231px;}
.yesDeleteAndReturn:hover,
.yesDeleteAndReturn:focus{background-position:-231px;}

.yesImSure{background:url(../images/btn_yesImSure_all.png) 0 0 no-repeat; width:158px;}
.yesImSure:hover,
.yesImSure:focus{background-position:-158px;}

.yesRemove{background:url(../images/btn_yesRemove_all.png) 0 0 no-repeat; width:154px;}
.yesRemove:hover,
.yesRemove:focus{background-position:-154px;}

.yesRevoke{background:url(../images/btn_yesRevoke_all.png) 0 0 no-repeat; width:134px;}
.yesRevoke:hover,
.yesRevoke:focus{background-position:-134px;}