/* LAYOUT MAIN */
/* LAYOUT MAIN */
/* html, body and container = width:100% - BUG#19488 only for FF
was able to fix it better with width:auto; on html,body*/
html{/*width:auto; background:yellow;*/ height:100%;}
/* REVISED */
body {margin:0 auto; padding:0 1em; position:relative; background:#3A3A3A url(../images/bkgd_tile.gif) 0 0 repeat;}
body.landing,
body.about{background:white; width:100%; padding:0; display:table; background:transparent url(../images/landing_phoneMapRibbon.png) center 70px no-repeat; height:100%;}/* display:table seems to work for no scrollbar ! */
body.about{background:white; display:inline;}/* inline display so footer extends 100% */
/* INDEX, SIGN-IN and REGISTER PAGES */
body.register,
body.fixed{ width:752px;}/* was 750px: offset right/left 1px border */
body.about{width:900px;}/* no need to be as wide as landing - it's just text right now */
body.popup{ width:580px; margin:0; padding:0;}
body.landing #footer_container,
body.about #footer_container{position:relative; min-height:100%; border-bottom:1px solid #cdcdcd;} /*needs border to pull content to bottom of viewport - thought it was isLayout, but no */
/* REVISED */
#container {
margin:0 auto 12px auto;
padding:12px;
background:#3A3A3A url(../images/bkgd_main.png) 0 0 no-repeat;
border-left:1px solid #369;
border-right:1px solid #369;
border-bottom:1px solid #369;
max-width:876px;
min-width:676px;
position:relative;
}
/* LANDING PAGE */
body.landing #container,
body.about #container{background:transparent; border:0; min-width:980px; max-width:980px; width:980px; padding:20px 10px; padding-bottom:325px; /*background:transparent url(../images/landing_phoneMapRibbon.png) 430px 70px no-repeat;) overflow:hidden;*/}
body.about #container{ min-width:880px; max-width:880px; width:880px;}/* smaller than landing */
body.fixed #container,
body.popup #container,
body.register #container{background:#3A3A3A url(../images/bkgd_index.png) 0 0 no-repeat;}
/* set min-height of popup, which matches height in js script, in
order to set a min-height for #content for there to be by default equal padding
all around #content, with extra room to scroll down because all popups will have scroll bar by default */
body.popup #container{ max-width:557px; min-width:557px; width:557px; margin-bottom:0; min-height:500px;}
/* LAYOUT MAIN */
#content {
padding: 12px;
margin-right: 312px;
background-color:#545454;
border:1px solid #909090;
min-height:495px;
}
body.fixed #content{min-height:300px;}/* only for pages that have FYI include */
body.fixed #content.openID,
body.fixed #content.login,
body.fixed #content.resetPassword,
body.fixed #content.finishAccount{min-height:412px;}/* doesn't show the FYI include - match register height*/
/* SH: needs this or else extra padding (unequal) appears */
body.fixed #content,
body.landing #content,
body.about #content,
body.popup #content{padding-bottom:0;}
body.popup #content{padding-bottom:12px;}/* privacy policy need btm padding */
/* set min-height of #content in order for there to be by default
equal padding all around, with extra room to scroll down because
all popups will have scroll bar by default */
body.popup #content{ min-height:345px; min-height:332px;}
body.fixed #content,
body.landing #content,
body.popup #content,
body.register #content{margin-right: 0;}
body.register #content{min-height:400px;}
body.landing #content,
body.about #content,
body.fixed #content.registrationClosed{
background:transparent;
border:0;
padding:0;
margin-right:0;
position:relative;
min-height:400px;
}
body.fixed #content{position:relative;}/* will keep an eye out for conflicts on this - BUG:24993 (story 072) */
body.fixed #content .securityTip{margin-top:4em; margin-left:12em;}/* see forms.css for register-signIn tip */
body.fixed #content.registrationClosed #content-inner{float:left; background:transparent; border:0; padding:0; margin-right:500px;}
/* LANDING PAGE */
body.landing #content,
body.about #content{margin-top:0; padding-top:0; position:relative; min-height:450px; /*background:teal;*/}
body.about #content{margin-right:315px; padding-top:20px;}
body.landing #content #box-container{float:right; min-width:300px;}
body.landing #content #content-inner{width:620px; float:left; width:600px; /*background:silver*/}
/* lead content */
body.landing #content #lead-container{margin-bottom:20px; min-height:180px; width:428px; /*background:green;*/}
/* featured apps */
body.landing #content #featuredApps-container{margin-bottom:20px; min-height:200px;}
#featuredApps-container ul li{float:left; position:relative; width:304px; margin-right:12px; margin-bottom:12px; list-style: none; width:294px; /*background:purple*/}
#featuredApps-container ul li.even{margin-right:0;}
#featuredApps-container ul li div{position:absolute; top:0; left:0;}
#featuredApps-container ul li p{margin-left:110px; min-height:70px;}
/* developers */
body.landing #content .box#developers-box #developers-img{position:absolute; left:5px;}
body.landing #content .box#developers-box #developers-content-inner{margin-left:85px;}
/* IMG IS ON BODY NOW
absolute creates hz scroll, fixed has no hz scroll, but repositions to browser window size DOH! - must cut tail of image in the short term :(right:1px; top:-70px;
body.landing #phoneMapRibbon-img{position:absolute; top:-55px; right:-100px; }*/
/* INDEX and SIGN-IN PAGES */
#phoneOnMap{
width:480px;
height:370px;
position:absolute;
right:0;
top:0;
background:transparent url(../images/phoneOnMap.png) 0 0 no-repeat;
}
/* width:auto works for FF3 and IE6, but not FF2 or IE7+ -
the padding is what pushes out the width, so base it on %'s instead of px */
body.fixed #content.choosePhonePg{
padding:1.75%;
width:96.25%;
float:left;
margin-right:0;
margin-bottom:1.125em;
/* revised */
padding-bottom:0;/* FYI include appears below it now */
}
body #content.choosePhonePg{margin-bottom:1.125em; margin-right:314px; display:block;}
body #content.choosePhonePg #buttons{display:block; width:100%; float:left; margin-top:5em;}
body #content.choosePhonePg #buttons a{display:block;}
/* xxx */
/* BUG:24993 - FYI include */
#fyi-container{
margin:10em 0 12px 0;
padding:12px;
background:transparent;
border-top:1px solid #909090;
clear:both; /* in order for it to clear floated divs above it (e.g. chooseCategory) */
}
body.register #content #fyi-container{margin-top:0;}/* for register layout only */
body.fixed #content.choosePhonePg #fyi-container{margin-top:5.5em;}
#protected-container{float:left; width:58%; /*background-color:orange;*/}/* list of carriers and phones */
#protected-container p,
ul#protected-carriers-phones{clear:both;}
ul#protected-carriers-phones li{min-height:50px; min-width:73px; display:block; float:left; }/* see graphics.css for carrier logos */
#fyi-content{margin-left:60%; /* background-color:pink;*/} /* bulleted list */
/* EMAIL HELP and HELP */
/* help */
ul.faq{margin-bottom:2em;}
ul.faq li,
ul#emailHelp li{margin-left:1.5em; margin-bottom:1em;}
/* email help lists have to be id's because of the hide/show js that we use for it */
ul#emailHelp{margin-top:1em;}
ul#emailHelp li ol li{list-style:decimal;}
ul.faq li p,
ul#emailHelp li ol{margin:1em 0 0 15px;padding:1em;border:1px dotted #CEDAE2; background-color:#6C6C6C;}
ul#emailHelp li ol{padding-bottom:0;}
ul#emailHelp li ol li{background-color:transparent;}
/* lists - this includes styling for DAISY */
ul.bulletedList,
ol.orderedList,
#main-content.daisy-doc ul,
#main-content.daisy-doc ol {margin:0 0 1em 1.25em; padding:0; list-style:outside; }
ul.bulletedList li,
ol.orderedList li,
#main-content.daisy-doc ul li,
#main-content.daisy-doc ol li{margin:0 0 .5em 0; padding:0; list-style:outside; list-style-position:outside; }
ul.bulletedList li,
#main-content.daisy-doc ul,
#main-content.daisy-doc ul li{list-style-type:disc; }
ol.orderedList li,
#main-content.daisy-doc ol,
#main-content.daisy-doc ol li{list-style-type:decimal; }
#main-content.daisy-doc ul ul li{list-style-type:circle;}
/* user discovery */
#fyi-container ul.bulletedList,
#fyi-container ul.bulletedList li:last-child{margin-bottom:0;}
/* account settings: SH: NOT SURE THIS IS NECESSARY WITH NEW LAYOUT see ul.preferences */
#main-content.accountSettings p.arrow{margin-bottom:1.5em; margin-top:.5em;}/* edit_retention.jsp, email.jsp */
#main-content.accountSettings .hr{border-bottom:1px dotted #CEDAE2; display:block;}
ul.accountSettingsInfo{margin:.5em 0 2em 0;}
ul.accountSettingsInfo li{margin-bottom:.75em;}
/* notification and reminder preferences (include files) */
ul.preferences{margin-bottom:1.5em; margin-top:.5em; padding-bottom:1em; border-bottom:1px dotted #CEDAE2;}
ul.otherEmails{margin:1em 0 2em 2em; margin-left:0;}
ul.openIDs{margin-left:12em;}/* needs it or else it is aligned-left */
ul.preferences li,
ul.otherEmails li,
ul.openIDs li{background:url(../images/arrow.gif) 0 2px no-repeat; padding-left:15px; margin:0 0 .5em 0;}
ul.otherEmails li.addEmail {background:none; margin-top:1em}
/* applications page - borrows styles used for application, permission, oauth and request detail pages */
/* application paging */
.pager-container{margin-top:2em; padding-bottom:.5em; border-bottom:1px solid #CEDAE2; position:relative;}
.pager-container .pager_prevNext{position:absolute; right:0; top:0;}
ul#applications{margin:2em 0 0 0; position:relative; width:100%; margin-top:0;}
ul#applications li{padding:2em 0; border-bottom:1px dotted #CEDAE2; position:relative; width:100%;}
ul#applications li:last-child{border-bottom:0;}
ul#applications img.icon{ position:absolute; top:2.125em; left:0; }
/* app detail pages - application, permission and request detail pages and Oauth flow */
.appDetail-content{position:relative; width:100%;}/* set width so it doesn't touch edge of content div */
.appDetail-content.no-home-link{margin-top:0; }/* grant_get_location_permission */
.appDetail-content img.icon{position:absolute; top:0; left:0; }
.appDetail-content-inner {position:relative; margin-left:105px; min-height:90px;}
/* oauth flow */
body.fixed #content .appDetail-content-inner{width:72.35%;}
body.fixed #content.choosePhonePg .appDetail-content-inner{width:85%;}/*background:orange; not sure about this */
/* user discovery ONLY no longer need because fyi-container isn't next to form */
/*body.fixed #content.oauth_userDiscovery .appDetail-content{width:70%; float:left;}
body.fixed #content.oauth_userDiscovery .appDetail-content-inner{width:auto}*/
/* share location form - request page */
.shareLocation-content{padding:1em; margin:1em 0; background-color:#666; border:1px solid #909090; }
/* Questions or comments */
ul#appContactInfo{margin:1em 0;}
ul#appContactInfo li{line-height:25px; padding-left:35px; margin-bottom:1em;}
ul#appContactInfo li.phone{background:url(../images/icon-phone.png) 0 0 no-repeat;}
ul#appContactInfo li.url{background:url(../images/icon-computer.png) 0 0 no-repeat;}
ul#appContactInfo li.email{background:url(../images/icon-email.png) 0 0 no-repeat;}
/* Edit Permission */
/* accuracy, frequency & time restrictions */
ul#editPermissionSettings{margin:2em 0 1.5em 0; }
ul#editPermissionSettings li{margin-bottom:0; padding:1.5em 1em; border-top:1px dotted #CEDAE2;}
ul#editPermissionSettings li#time{padding-bottom:1em;}/* has too much padding already */
ul#editPermissionSettings li:last-child{border-bottom:1px dotted #CEDAE2; padding-bottom:1.5em;}
ul#editPermissionSettings li p{margin-bottom:0;}
/* bug:23082 - time restrictions list - this div also controls hide/show */
ul#timeRestrictionSetting{border:0; margin:0; padding:0;}
ul#timeRestrictionSetting li{border:0 !important; margin:0 0 1.5em 0; padding:0 0 0 1.5em; background: url(../images/arrow.gif) 0 3px no-repeat; }
ul#timeRestrictionSetting li:last-child{border:0; background-image: none; margin:2em 0 .5em 0; padding:0 0 0 1.5em;}
/* default time restriction */
div#timeRestrictionSetting{padding-bottom:.5em;}
/* location history and requests */
#locations-container,
#requests-container{position:relative; width:100%; margin-top:0;}
#requests-container{margin-top:4em;}
#locations-container ol.locations{margin-bottom:2em;}
#locations-container ol.locations:last-child{margin-bottom:0;}
#locations-container ol.locations,
#locations-container ol.locations li,
#requests-container ol.requests,
#requests-container ol.requests li{position:relative;}
/* list of each location */
#locations-container ol.locations li,
#requests-container ol.requests li{margin-bottom:1em; min-height:55px; height:auto; border-bottom:1px dotted #CEDAE2;}
#locations-container ol.locations li:last-child,
#requests-container ol.requests li:last-child{border-bottom:0;}
/* detail-content */
#locations-container .icon-sm,
#requests-container .icon-sm{position:absolute; top:0; left:0;}
#locations-container .locationDetail-content-inner,
#requests-container .requestDetail-content-inner{position:relative; margin-left:55px; min-height:40px;}
/* 1em ~ 16px - border-bottom ~ 1px =~ 15px ~= .9em (this tested best at 1x,2x and 3x zoom)
when 2-3x zoom view details link touches btm border - use em here because the btm margin of list item is in ems and they will match proportionally better and also taking into consideration the border which subtracts from 1em a slight amount form padding below - could just add margin-bottom: 1em to View Details link, but FF2 doesn't like inline-block */
#requests-container .requestDetail-content-inner{min-height:25px; padding-bottom:.9em;}
/* hide&show div (error msg and map) and prev and next container */
/* locations uses simplePager.tag */
/* had to add in jsp NOT the tag a container with a class added for btm pager ONLY (#prevNext-container.btm),
since styling for top must be on baseline of first H3 and this requires
negative btm margin and positive top margin */
/* ! pager on applications page uses pager.tag ! */
/* needs z-index in order to appear above H3 block */
/* couldn't get if statement to work on container, so it is there regardless,
but because it is absolute, it doesn't affect layout, it just shows up on view source :( */
#locations-container #prevNext-container{
position:relative;
display:block;
text-align:right;
margin-top:2em;
margin-bottom:-3.25em;
margin-bottom:0;
z-index:25;
position:absolute;
margin-top:0;
right:0;
}
#locations-container #prevNext-container.btm{margin-bottom:0; position:relative;}
#locations-container ol.locations li div.object-hidden{margin-bottom:1em;}
/* Registration - Choose Category - list items of phone categories */
ul#choosePhoneCategory{width:100%; position:relative; margin-top:2em; /*float:left; background:pink*/}
ul#choosePhoneCategory li{margin:0 4.5em 7em 0; display:inline; width:116px; height:111px; float:left;}
ul#choosePhoneCategory li .category-img{margin-bottom:.5em;} /* phone image */
ul#choosePhoneCategory li a{text-align:center; display:block;}/* phone name link*/
/* story 129: sprint registration - failure and success */
ul#reasonsNotCompatible{list-style:outside; list-style-type:disc;margin:-1em 0 2em 0;}
ul#reasonsNotCompatible li{margin-left:1.25em;}
#yesHelpMe-container{border:1px solid #222; background-color:#333; padding:1em; width:70%; margin:0 0 1em 0; margin-bottom:9%;}
#yesHelpMe-container.registerNotSupported{margin-top:2em;}
/* Registration Provisioning Steps 1,2,3 and 4 (for OFF DECK devices) */
ol#provisioningSteps{position:relative; margin-bottom:2em;}
ol#provisioningSteps li{position:relative; margin:0 0 .5em; line-height:25px; height:25px; display:block;}
/* Registration Provisioning spinner */
ol#provisioningSteps li .spinner{display:block; position:absolute; left:0; top:0;}
/* Registration Provisioning Steps 1,2,3 and 4 - ON & OFF graphics - using var so number is numeric vs. spelt out */
ol#provisioningSteps li.active .no1,
ol#provisioningSteps li.active .no2,
ol#provisioningSteps li.active .no3,
ol#provisioningSteps li.active .no4,
ol#provisioningSteps li.nonactive .no1,
ol#provisioningSteps li.nonactive .no2,
ol#provisioningSteps li.nonactive .no3,
ol#provisioningSteps li.nonactive .no4 {display:block; position:absolute;padding-left:35px; height:25px; width:25px; line-height:25px; left:35px; }
/* Registration Provisioning Steps 1,2,3,4 - information text - see typography.css for more */
ol#provisioningSteps li .step{display:block; position:absolute; left:70px;}
/* JAVASCRIPT */
.object-shown{display:block;}
.object-hidden{display:none;}
/* MAPS */
.map{border:1px solid #CEDAE2; width:auto; height:230px; position:relative;}
.status{display:none;}
/* BUG:24173*/
.VEAPI_Pushpin{cursor: -moz-grab}
/* Self-Locate */
#main-content.home div.map,
#main-content.home div.status{margin-bottom: 1em;}
/* LANDING PAGE */