michael@0: body {
michael@0:   background-color: rgb(241, 244, 248);
michael@0:   margin-top: 2em;
michael@0:   font: message-box;
michael@0:   font-size: 100%;
michael@0: }
michael@0: 
michael@0: p {
michael@0:   font-size: .8em;
michael@0: }
michael@0: 
michael@0: #error-box {
michael@0:   background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px;
michael@0:   -moz-padding-start: 30px;
michael@0: }
michael@0: 
michael@0: #error-box:-moz-locale-dir(rtl) {
michael@0:   background-position: right 4px;
michael@0: }
michael@0: 
michael@0: #main-error-msg {
michael@0:   color: #4b4b4b;
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: #report-box {
michael@0:   text-align: center;
michael@0:   width: 75%;
michael@0:   margin: 0 auto;
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .crashDumpAvaible #report-box {
michael@0:   display: block
michael@0: }
michael@0: 
michael@0: #button-box {
michael@0:   text-align: center;
michael@0:   width: 75%;
michael@0:   margin: 0 auto;
michael@0: }
michael@0: 
michael@0: @media all and (min-width: 300px) {
michael@0:   #error-box {
michael@0:     max-width: 50%;
michael@0:     margin: 0 auto;
michael@0:     background-image: url('chrome://global/skin/icons/information-32.png');
michael@0:     min-height: 36px;
michael@0:     -moz-padding-start: 38px;
michael@0:   }
michael@0: 
michael@0:   button {
michael@0:     width: auto !important;
michael@0:     min-width: 150px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media all and (min-width: 780px) {
michael@0:   #error-box {
michael@0:     max-width: 30%;
michael@0:   }
michael@0: }
michael@0: 
michael@0: button {
michael@0:   font: message-box;
michael@0:   font-size: 0.6875em;
michael@0:   -moz-appearance: none;
michael@0:   -moz-user-select: none;
michael@0:   width: 100%;
michael@0:   margin: 2px 0;
michael@0:   padding: 2px 6px;
michael@0:   line-height: 1.2;
michael@0:   background-color: hsla(210,30%,95%,.1);
michael@0:   background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
michael@0:   background-clip: padding-box;
michael@0:   border: 1px solid hsla(210,15%,25%,.4);
michael@0:   border-color: hsla(210,15%,25%,.3) hsla(210,15%,25%,.35) hsla(210,15%,25%,.4);
michael@0:   border-radius: 3px;
michael@0:   box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
michael@0:               0 0 0 1px hsla(0,0%,100%,.3) inset,
michael@0:               0 1px 0 hsla(0,0%,100%,.1);
michael@0: 
michael@0:   transition-property: background-color, border-color, box-shadow;
michael@0:   transition-duration: 150ms;
michael@0:   transition-timing-function: ease;
michael@0: 
michael@0: }
michael@0: 
michael@0: button:hover {
michael@0:   background-color: hsla(210,30%,95%,.8);
michael@0:   border-color: hsla(210,15%,25%,.45) hsla(210,15%,25%,.5) hsla(210,15%,25%,.55);
michael@0:   box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
michael@0:               0 0 0 1px hsla(0,0%,100%,.3) inset,
michael@0:               0 1px 0 hsla(0,0%,100%,.1),
michael@0:               0 0 3px hsla(210,15%,25%,.1);
michael@0:   transition-property: background-color, border-color, box-shadow;
michael@0:   transition-duration: 150ms;
michael@0:   transition-timing-function: ease;
michael@0: }
michael@0: 
michael@0: button:hover:active {
michael@0:   background-color: hsla(210,15%,25%,.2);
michael@0:   box-shadow: 0 1px 1px hsla(210,15%,25%,.2) inset,
michael@0:               0 0 2px hsla(210,15%,25%,.4) inset;
michael@0:   transition-property: background-color, border-color, box-shadow;
michael@0:   transition-duration: 10ms;
michael@0:   transition-timing-function: linear;
michael@0: }