chaloBEST/smsBEST/static/rapidsms/stylesheets/layout.css
2012-05-15 18:33:43 +05:30

319 lines
8.6 KiB
CSS
Executable File

/* vim:set et ts=4 sw=4 */
body {
background: #eee url("../images/body-bg.png");
font: 9pt "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
line-height: 1;
color: #333;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #33a7d2;
}
a:hover {
text-decoration: underline; }
abbr {
cursor: help; }
p {
line-height: 1.4; }
/* this is not okay. but it is, unfortunately, the least error-prone way
* (that i know) of fixing broken floaty layouts in IE6 */
div.clear-hack {
overflow: hidden;
clear: both;
height: 0;
}
#wrapper {
width: 80em;
background: #fff;
margin: 0.5em auto 0 auto;
/* a little pretty for the 10/dec demo */
-moz-box-shadow: 4px 4px 8px #aaa;
box-shadow: 4px 4px 8px #aaa;
-moz-border-radius-bottomright: 1em;
-moz-border-radius-bottomleft: 1em;
}
/* no scaling for ie6 */
* html #wrapper {
width: 960px; }
/* the header is based roughly upon unicef.org, with rapidsms colors */
#header {
height:122px;
width:960px;
text-align:right;
position: relative;
color: #CCF;
background: #94997e; /* Old browsers */
background: -moz-linear-gradient(top, #94997e 0%, #d2dab3 10%, #d2dab3 80%, #94997e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94997e), color-stop(10%,#d2dab3), color-stop(80%,#d2dab3), color-stop(100%,#94997e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94997e', endColorstr='#94997e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #94997e 0%,#d2dab3 10%,#d2dab3 80%,#94997e 100%); /* W3C */}
}
/* hide the log in/out links in the top right. this doesn't need to
* be especially discoverable; when the user tries to do something
* requiring a login, they should be redirected automatically */
#header #auth {
font-size: 80%;
position: absolute;
line-height: 22px;
margin: 0 10px;
right: 0;
top: 0;;}
#header #auth a {
color: #000;
padding-right:6px;
font-size:80%;
position:relative;
z-index:1;
}
#branding {
padding: 2px 10px;
}
/* align in the middle of the unicef blue stripe of header bg, and
* display logo on the right. TODO: extract the unicef branding */
#branding h1 {
background: url(../images/bessms_header07d.png) no-repeat;
height: 108px;
color: #fff;
margin: 0;
width:960px;
position:absolute;
top:6px;
left:0px;
}
* html #branding h1 {
width: 940px; }
#branding h1 a {
height: 115px;
width: 960px;
display: block;
/*background: url("../images/rapidsms-logo.png") no-repeat 0 50%;*/
/* float the RapidSMS logo, in case any app would like to
* append anything to the light blue (empty) stripe */
float: left;
}
#branding h1 a span {
position: absolute;
left: -9999px;
}
#tabs,
#page-tabs {
position: absolute;
height: 28px;
bottom: 0;
padding: 0;
margin: 0;
}
/* global tabs sit on the right, page-specific tabs sit on the left.
* to draw more attention. TODO: maybe re-think this */
#tabs { right: 0; }
#page-tabs { left: 0; }
#tabs li,
#page-tabs li {
display: block;
float: left;
line-height: 28px;
}
/* 5px spacing between each tab, to match the top gap, since
* we're using pixel-positioned backgrounds there */
#tabs li { margin-right: 5px; }
#page-tabs li { margin-left: 5px; }
#tabs li a,
#page-tabs li a {
color: white;
display: block;
padding: 0 1em;
border-right: 1px solid #FE0000;
border-left: 1px solid #FE0000;
outline: none;
background-color:#CE0000;
text-shadow: 1px 2px 1px #000; }
/* there are unread messages in this tab! TODO: is this just
* for the training app? if so, move it there! */
#tabs li.unread a span {
display: block;
padding-right: 21px;
background: url("../icons/silk/email_open.png") no-repeat 100% 50%;
}
/* always highlight the active (in the navigation sense, not
* the css :active sense) tab, even when it's being hovered
* or focused, since clicking it again is mostly useless */
#tabs li.active a, #page-tabs li.active a,
#tabs li.active a:hover, #page-tabs li.active a:hover,
#tabs li.active a:focus, #page-tabs li.active a:focus {
background: #fff url("../images/tab-bg-active.png") repeat-x;
text-decoration: none;
text-shadow: #000 1px 1px 2px;
color: #000;
/* the same color as the strip in header-bg.png */
border: 1px solid #cef1f5;
border-bottom: 0;
/* nudge the active tab north by one pixel, to line it
* up with the tops of the other tabs */
margin-top: -1px;
}
/* brighten up inactive tabs when hovering or tab-focusing
* with the keyboard (we removed the outline, above) */
#tabs li a:hover, #page-tabs li a:hover,
#tabs li a:focus, #page-tabs li a:focus {
/*background-image: url("../images/tab-bg-hover.png");*/
text-shadow: #000 1px 1px 2px;
text-decoration: none;
}
#breadcrumbs {
color: #ccc;
font-size: 2em;
line-height: 1;
padding: 0.5em;
text-shadow: #eee 2px 2px 2px;
border-bottom: 1px dotted #eee;
}
#breadcrumbs a {
color: #000;
}
.module a
{color:#CE0000;}
#inner {
padding: 1em;
position: relative;
}
/* some parts of the page title are dynamic (or otherwise really
* important), like search terms. highlight them! */
#inner h1 span.highlight {
background: #ffa;
-moz-border-radius: 5px;
border: 2px solid #ff0;
padding: 0 4px;
margin-left: -4px;
}
/* when an app has something really important to say, it can use the
* apps/webui/templates/message.html template to display a huge blob
* of text. this should probably be replaced with flash messages */
#inner div.message {
text-align: center;
padding: 4em 25%;
}
#inner div.message p {
margin: 0 0 0.5em 0;
font-size: 2em;
}
/* some apps (erm, just the querylog, actually) add big triggers to the
* bottom of the page to show or perform some action. */
div.trigger {
font-size: 80%;
text-align: center;
padding: 0.625em;
background: #f8f8f8;
cursor: pointer;
color: #aaa;
}
div.trigger.warn {
background: #fdd;
color: #f00;
}
#footer {
border-top: 1px dotted #eee;
padding: 0.5em;
clear: both;
color: #ccc;
/* reserve space for at two lines of links @ LH=1.4 (for the
* copyright and licensing/download info) */
min-height: 2.8em;
}
/* bump the footer links down a line, to align them with the second
* line of legal junk on the right. reduce the opacity until hover,
* to keep them out of view until they're needed. */
#footer .footer-region {
margin-top: 1.4em;
line-height: 1.4;
opacity: 0.25;
float: left;
}
#footer .footer-region:hover {
opacity: 1; }
#footer .footer-region a { margin-right: 0.5em; }
#footer .footer-region a:last-child { margin-right: 0; }
#footer a
{color:#CE0000;}
#footer p.rights {
text-align: right;
float: right;
margin: 0;
}