danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * @file
danielebarchiesi@0:  * Basic styling for the Overlay child pages.
danielebarchiesi@0:  */
danielebarchiesi@0: 
danielebarchiesi@0: html.js {
danielebarchiesi@0:   background: transparent !important;
danielebarchiesi@0:   overflow-y: scroll;
danielebarchiesi@0: }
danielebarchiesi@0: html.js body {
danielebarchiesi@0:   background: transparent !important;
danielebarchiesi@0:   margin-left: 0;
danielebarchiesi@0:   margin-right: 0;
danielebarchiesi@0:   padding: 20px 0;
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: #overlay {
danielebarchiesi@0:   display: table;
danielebarchiesi@0:   margin: 0 auto;
danielebarchiesi@0:   min-height: 100px;
danielebarchiesi@0:   min-width: 700px;
danielebarchiesi@0:   position: relative;
danielebarchiesi@0:   padding: .2em;
danielebarchiesi@0:   padding-bottom: 2em;
danielebarchiesi@0:   padding-right: 26px; /* LTR */
danielebarchiesi@0:   width: 88%;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-titlebar {
danielebarchiesi@0:   padding: 0 20px;
danielebarchiesi@0:   position: relative;
danielebarchiesi@0:   white-space: nowrap;
danielebarchiesi@0:   z-index: 100;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-content {
danielebarchiesi@0:   background: #fff;
danielebarchiesi@0:   clear: both;
danielebarchiesi@0:   color: #000;
danielebarchiesi@0:   padding: .5em 1em;
danielebarchiesi@0:   position: relative;
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: #overlay-title-wrapper {
danielebarchiesi@0:   overflow: hidden;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-title {
danielebarchiesi@0:   color: #fff;
danielebarchiesi@0:   float: left; /* LTR */
danielebarchiesi@0:   font-size: 20px;
danielebarchiesi@0:   margin: 0;
danielebarchiesi@0:   padding: 0.3em 0;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-title:active,
danielebarchiesi@0: #overlay-title:focus {
danielebarchiesi@0:   outline: 0;
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: .overlay #skip-link {
danielebarchiesi@0:   margin-top: -20px;
danielebarchiesi@0: }
danielebarchiesi@0: .overlay #skip-link a {
danielebarchiesi@0:   color: #fff; /* This is white to contrast with the dark background behind it. */
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: #overlay-close-wrapper {
danielebarchiesi@0:   position: absolute;
danielebarchiesi@0:   right: 0; /* LTR */
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-close,
danielebarchiesi@0: #overlay-close:hover {
danielebarchiesi@0:   background: transparent url(images/close.png) no-repeat; /* LTR */
danielebarchiesi@0:   -moz-border-radius-topleft: 0; /* LTR */
danielebarchiesi@0:   -webkit-border-top-left-radius: 0; /* LTR */
danielebarchiesi@0:   border-top-left-radius: 0; /* LTR */
danielebarchiesi@0:   display: block;
danielebarchiesi@0:   height: 26px;
danielebarchiesi@0:   margin: 0;
danielebarchiesi@0:   padding: 0;
danielebarchiesi@0:   /* Replace with position:fixed to get a scrolling close button. */
danielebarchiesi@0:   position: absolute;
danielebarchiesi@0:   width: 26px;
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * Tabs on the overlay.
danielebarchiesi@0:  */
danielebarchiesi@0: #overlay-tabs {
danielebarchiesi@0:   line-height: 27px;
danielebarchiesi@0:   margin: -28px 0 0 0;
danielebarchiesi@0:   position: absolute;
danielebarchiesi@0:   right: 20px; /* LTR */
danielebarchiesi@0:   text-transform: uppercase;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-tabs li {
danielebarchiesi@0:   display: inline;
danielebarchiesi@0:   list-style: none;
danielebarchiesi@0:   margin: 0 0 0 -3px; /* LTR */
danielebarchiesi@0:   padding: 0;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-tabs li a,
danielebarchiesi@0: #overlay-tabs li a:active,
danielebarchiesi@0: #overlay-tabs li a:visited,
danielebarchiesi@0: #overlay-tabs li a:hover {
danielebarchiesi@0:   background-color: #a6a7a2;
danielebarchiesi@0:   -moz-border-radius: 8px 8px 0 0;
danielebarchiesi@0:   -webkit-border-top-left-radius: 8px;
danielebarchiesi@0:   -webkit-border-top-right-radius: 8px;
danielebarchiesi@0:   border-radius: 8px 8px 0 0;
danielebarchiesi@0:   color: #000;
danielebarchiesi@0:   display: inline-block;
danielebarchiesi@0:   font-size: 11px;
danielebarchiesi@0:   font-weight: bold;
danielebarchiesi@0:   margin: 0 0 2px 0;
danielebarchiesi@0:   outline: 0;
danielebarchiesi@0:   padding: 0 14px;
danielebarchiesi@0:   text-decoration: none;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-tabs li.active a,
danielebarchiesi@0: #overlay-tabs li.active a.active,
danielebarchiesi@0: #overlay-tabs li.active a:active,
danielebarchiesi@0: #overlay-tabs li.active a:visited {
danielebarchiesi@0:   background-color: #fff;
danielebarchiesi@0:   margin: 0;
danielebarchiesi@0:   padding-bottom: 2px;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-tabs li a:focus,
danielebarchiesi@0: #overlay-tabs li a:hover {
danielebarchiesi@0:   color: #fff;
danielebarchiesi@0: }
danielebarchiesi@0: #overlay-tabs li.active a:focus,
danielebarchiesi@0: #overlay-tabs li.active a:hover {
danielebarchiesi@0:   color: #000;
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * Add to shortcuts link
danielebarchiesi@0:  */
danielebarchiesi@0: #overlay-titlebar .add-or-remove-shortcuts {
danielebarchiesi@0:   padding-top: 0.9em;
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * IE6 shows elements with position:fixed as position:static so replace
danielebarchiesi@0:  * it with position:absolute;
danielebarchiesi@0:  */
danielebarchiesi@0: * html #overlay-close,
danielebarchiesi@0: * html #overlay-close:hover {
danielebarchiesi@0:   position: absolute;
danielebarchiesi@0: }
danielebarchiesi@0: 
danielebarchiesi@0: /**
danielebarchiesi@0:  * Disable message.
danielebarchiesi@0:  */
danielebarchiesi@0: #overlay-disable-message {
danielebarchiesi@0:   background-color: #fff;
danielebarchiesi@0:   margin: -20px auto 20px;
danielebarchiesi@0:   width: 80%;
danielebarchiesi@0:   -moz-border-radius: 0 0 8px 8px;
danielebarchiesi@0:   -webkit-border-bottom-left-radius: 8px;
danielebarchiesi@0:   -webkit-border-bottom-right-radius: 8px;
danielebarchiesi@0:   border-radius: 0 0 8px 8px;
danielebarchiesi@0: }
danielebarchiesi@0: .overlay-disable-message-focused {
danielebarchiesi@0:   padding: 0.5em;
danielebarchiesi@0: }
danielebarchiesi@0: .overlay-disable-message-focused a {
danielebarchiesi@0:   display: block;
danielebarchiesi@0:   float: left;
danielebarchiesi@0: }
danielebarchiesi@0: .overlay-disable-message-focused #overlay-dismiss-message {
danielebarchiesi@0:   float: right;
danielebarchiesi@0: }