Skip to content

Instantly share code, notes, and snippets.

@mraichelson

mraichelson/project-example.less.css

Created March 5, 2010 00:50
Show Gist options
  • Save mraichelson/322337 to your computer and use it in GitHub Desktop.
Save mraichelson/322337 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
project-example.less.css
/**
* CLIENT-NAME.COM CSS Styles
* The layout for the site depends on the 960 Grid System
*
* @author MRaichelson
* @link http://www.navigationarts.com/
* @see http://www.960.gs/
* @media screen, projection
*/
/* !Imports : Open Source */
// files for 960 grid system
@import "open-source/reset.css";
@import "open-source/text.css";
@import "open-source/960.css";
// fancybox lightbox system
@import "open-source/jquery.fancybox-1.2.6.css";
/* !Variables */
@light1: #222;
@light2: #444;
@light3: #666;
@light4: #888;
@light5: #aaa;
@light6: #ccc;
@light7: #ddd;
@light8: #eee;
@light9: #fff;
@dark1: #000;
@dark2: @light2;
@dark3: @light2;
@dark4: @light3;
@blue1: #0a4c78;
@blue2: #0a7fa3;
@blue3: #11b0e0;
/* !Mixins */
.preText { // pre-formatted/code/monospace text styles
font-family:"Bitstream Vera Sans Mono","Andale Mono","Courier New",Courier,monospace;
font-size:0.9em;
}
.abbrAcro { // styles for both ABBR and ACRONYM
cursor:help;
border-bottom:1px dotted #ccc;
}
.useSpritePng { // main sprite background image
background-image:url(/_res/img/sprites.png);
background-repeat:no-repeat;
}
.serif {
font-family:Georgia,"Times New Roman",Times,serif;
}
.sansSerif {
font-family:Arial,Helvetica,sans-serif;
}
.macType {
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
.ieRoundedCorners {
behavior:url(/_res/htc/border-radius.htc);
}
/* !HTML Elements */
* { margin-top:0; }
a {
color:@blue3;
:link {
text-decoration:none;
}
:visited {
text-decoration:none;
}
:hover {
text-decoration:underline;
}
:active {
text-decoration:underline;
}
:focus {
text-decoration:underline;
}
}
abbr {
.abbrAcro;
}
acronym {
.abbrAcro;
}
address {}
area {}
b {}
base {}
bdo {}
big {
font-size:1.25em;
}
blockquote {
color:@blue3;
.macType;
font-size:15px;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
background-color:#fff;
color:#666;
}
br {}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="image"],
input[type="checkbox"],
input[type="radio"]
{
cursor:pointer;
font-weight:normal;
vertical-align:middle;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input.button {
_border-style:none;
border:1px solid @light4;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#fff;
color:#000;
display:inline-block;
height:26px;
line-height:26px;
font-size:15px;
padding:0 5px;
vertical-align:middle;
:hover,:focus {
box-shadow:0 0 4px @blue2;
-moz-box-shadow:0 0 4px @blue2;
-webkit-box-shadow:0 0 4px @blue2;
}
}
button::-moz-focus-inner {
border:0;
padding:0;
}
cite {}
code {
.preText;
}
del {}
dfn {}
div {}
dl {
dt {
float:left;
width:140px;
clear:both;
font-weight:bold;
}
dd {
float:right;
clear:right;
margin-bottom:0.5em;
}
}
em {}
fieldset {
border:1px solid @light6;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
.ieRoundedCorners;
background-color:@light9;
background:-moz-linear-gradient(top,@light9,@light8);
background:-webkit-gradient(linear,left top,left bottom,from(@light9),to(@light8));
}
font {}
form {
margin:0;
padding:0;
}
head {}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
margin-bottom:5px;
}
h1 {
font-size:32px;
.macType;
margin-bottom:10px;
border-bottom:1px solid @light7;
color:@dark1;
}
h2 {
font-size:22px;
line-height:26px;
.macType;
color:@dark1;
}
h3 {
font-size:18px;
color:@dark1;
.macType;
border-bottom:1px dotted @light7;
_border-bottom-style:solid;
margin-bottom:10px;
line-height:24px;
}
h4 {
font-size:14px;
color:@dark1;
margin-bottom:5px;
}
h5 {
font-size:14px;
color:@dark1;
}
h6 {
font-size:14px;
color:@dark1;
}
hr {
border-top:1px dotted @light7;
_border-top-style:solid;
}
html {}
i {}
iframe {}
img {}
input {
vertical-align:middle;
:focus {
outline:none !important;
box-shadow:0 0 4px @light5;
-moz-box-shadow:0 0 4px @light5;
-webkit-box-shadow:0 0 4px @light5;
}
}
ins {
background-color:#ffd;
}
kbd {
.preText;
}
label {
cursor:pointer;
}
legend {
border:1px solid @light6;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 5px;
}
link {}
map {}
meta {}
noframes {}
noscript {}
object {}
ol {
margin-bottom:10px;
li {
margin-left:30px;
margin-bottom:5px;
li {
margin-bottom:0;
padding-top:5px;
}
}
}
optgroup {}
option {}
p {}
param {}
pre {
.preText;
}
q { quotes: '\201C' '\201D' '\2018' '\2019';
:before {
content: open-quote;
}
:after {
content: close-quote;
}
}
samp {
.preText;
}
select {
vertical-align:middle;
}
small { font-size:90%; }
span {}
strong {}
style {}
sub {
vertical-align:sub;
font-size:95%;
}
sup {
vertical-align:super;
font-size:95%;
}
table {
clear:both;
width:100%;
border-collapse:collapse;
border-spacing:0;
tr {}
td {
text-align:left;
vertical-align:top;
}
th {
text-align:left;
font-weight:normal;
vertical-align:top;
}
thead {}
tbody {}
tfoot {}
caption { font-weight:bold; }
colgroup {}
col {}
}
textarea {
vertical-align:top;
.preText;
}
title {}
tt {
.preText;
}
ul {
margin-bottom:10px;
li {
margin-left:20px;
margin-bottom:5px;
li {
margin-bottom:0;
padding-top:5px;
}
}
}
var {}
u {}
:target {
background-color:#ffc;
}
// set custom colors for selected text
::-moz-selection { // mozilla
background-color:@blue3;
color:#fff;
zoom:1;
}
::selection { // webkit
background-color:@blue3;
color:#fff;
}
/* !ID Elements */
#breadcrumb {
height:61px;
line-height:40px;
font-size:11px;
color:@dark3;
a { color:@dark3; }
.divider { color:@light6; }
}
#doc {
background-position:50% 0;
background-repeat:no-repeat;
}
#footer {
padding-top:30px;
font-size:11px;
a { color:@dark3; }
.grid_12 {
padding:10px 0;
border-top:1px solid @light7;
}
#social,.omega {
text-align:right;
}
#social {
color:@dark2;
}
}
#header {
height:125px;
overflow:hidden;
margin-bottom:1px;
#branding {
padding-top:25px;
height:54px;
}
#navGlobal {
padding-top:30px;
text-align:right;
}
#globalLinks {
display:inline;
a {
color:@light3;
}
}
#globalSearch {
display:inline;
padding:0 20px;
form,div { display:inline; }
span.searchField {
padding:0 4px 0 20px;
.useSpritePng;
background-position:0 -124px;
display:inline-block;
input {
border-style:none;
background-color:transparent;
height:20px;
width:165px;
color:@light5;
}
input.not-default {
color:@light2;
}
}
}
#login {
display:inline;
img {
width:9px;
height:9px;
.useSpritePng;
background-position:0 -35px;
_display:none;
}
}
}
#navLocal {
position:relative;
zoom:1;
div.heading {
background-color:@light7;
background:-moz-linear-gradient(top,@light7,@light6);
background:-webkit-gradient(linear,left top,left bottom,from(@light7),to(@light6));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dddddd,endColorstr=#cccccc);
border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
font-size:15px;
color:@dark2;
.macType;
text-shadow:1px 1px 2px rgba(255,255,255,0.5);
-moz-text-shadow:1px 1px 2px rgba(255,255,255,0.5);
-webkit-text-shadow:1px 1px 2px rgba(255,255,255,0.5);
a {
display:block;
padding:10px 40px 10px 10px;
color:@dark2;
:hover {
text-decoration:none;
}
}
}
div.body {
ul {
padding:0;
margin:0;
list-style:none;
li {
padding:0;
margin:0;
border-bottom:1px solid @light7;
a {
display:block;
color:@light4;
text-decoration:none;
span {
display:block;
padding:5px 5px 5px 20px;
.useSpritePng;
background-position:-2945px -390px;
}
:hover {
span {
background-position:-2895px -425px;
}
}
}
a.active {
background:-moz-linear-gradient(top,@light9,@light8);
background:-webkit-gradient(linear,left top,left bottom,from(@light9),to(@light8));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#eeeeee);
color:#000;
span {
background-position:-2895px -425px;
}
}
li {
border-bottom:none;
border-top:1px solid @light7;
a {
span {
padding-left:40px;
background-position:-2925px -390px;
}
:hover {
span{
background-position:-2875px -425px;
}
}
}
a.active {
span {
background-position:-2875px -425px;
}
}
}
}
}
}
div.c-nl-tl,div.c-nl-tr {
width:5px;
height:5px;
overflow:hidden;
zoom:1;
position:absolute;
.useSpritePng;
}
div.c-nl-tl {
background-position:-1010px -25px;
left:0;
top:0;
}
div.c-nl-tr {
background-position:-1015px -25px;
top:0;
right:0;
}
}
#navMain {
font-family:"Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
ul {
padding:0;
margin:0;
list-style:none;
li {
float:left;
font-size:18px;
margin-left:0;
margin-right:40px;
a {
display:block;
text-indent:-9999px;
.useSpritePng;
height:47px;
:focus,:active {
outline:none;
}
}
}
#navProducts {
a {
width:187px;
background-position:-1000px -400px;
:hover {
background-position:-1000px -450px;
}
}
a.active {
background-position:-1000px -500px;
}
}
#navReports {
a {
width:184px;
background-position:-1229px -400px;
:hover {
background-position:-1229px -450px;
}
}
a.active {
background-position:-1229px -500px;
}
}
#navSubscriber {
a {
width:166px;
background-position:-1453px -400px;
:hover {
background-position:-1453px -450px;
}
}
a.active {
background-position:-1453px -500px;
}
}
#navAbout {
a {
width:110px;
background-position:-1658px -400px;
:hover {
background-position:-1658px -450px;
}
}
a.active {
background-position:-1658px -500px;
}
}
}
}
#pageBody {
background-image:url(/_res/img/bg-body.png);
background-position:50% 0;
background-repeat:no-repeat;
min-height:720px;
}
#whatsHappening {
clear:both;
width:940px;
height:200px;
.useSpritePng;
background-position:-1000px -100px;
overflow:hidden;
position:relative;
margin:0 10px 40px;
.heading {
height:45px;
line-height:33px;
color:#fff;
font-size:20px;
.macType;
padding-left:20px;
padding-right:20px;
text-shadow:1px 0 2px #333;
-moz-text-shadow:1px 0 2px #333;
-webkit-text-shadow:1px 0 2px #333;
}
.grid_4 {
padding-top:10px;
h4 {
margin-left:10px;
margin-right:10px;
}
.meta {
margin-left:10px;
margin-right:10px;
color:@light5;
}
p {
margin-left:10px;
margin-right:10px;
color:#fff;
}
}
}
/* !Class Elements */
// button styles
input.goButton {
width:27px;
height:21px;
.useSpritePng;
background-position:0 -100px;
vertical-align:middle;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
:hover,:focus {
box-shadow:0 0 4px @blue2;
-moz-box-shadow:0 0 4px @blue2;
-webkit-box-shadow:0 0 4px @blue2;
}
}
button.wideButton,input.wideButton {
width:140px;
zoom:1;
position:relative;
}
a.wideButton {
width:130px;
}
button.button,button.blueButton,button.darkButton,button.lightButton,
input.button,input.blueButton,input.darkButton,input.lightButton {
height:26px;
outline:none;
}
a.button,a.blueButton,a.darkButton,a.lightButton {
height:24px;
*height:23px;
line-height:24px;
text-decoration:none;
zoom:1;
:hover,:focus,:active { text-decoration:none; }
}
button.button,input.button,a.button {
_border-style:none;
border:1px solid @light4;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
background-color:#fff;
color:#000;
display:inline-block;
height:24px;
*height:23px;
line-height:24px;
font-size:15px;
padding:0 5px;
vertical-align:middle;
.ieRoundedCorners;
zoom:1;
:hover,:focus {
text-decoration:none;
box-shadow:0 0 4px @blue2;
-moz-box-shadow:0 0 4px @blue2;
-webkit-box-shadow:0 0 4px @blue2;
}
}
button.blueButton,input.blueButton,a.blueButton {
border:1px solid @blue1;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
background-color:@blue2;
background:-moz-linear-gradient(top,@blue3,@blue2);
background:-webkit-gradient(linear,left top,left bottom,from(@blue3),to(@blue2));
.ieRoundedCorners;
color:#fff;
display:inline-block;
font-size:15px;
padding:0 5px;
vertical-align:middle;
.macType;
:hover,:focus {
box-shadow:0 0 4px @blue2;
-moz-box-shadow:0 0 4px @blue2;
-webkit-box-shadow:0 0 4px @blue2;
}
}
button.darkButton,input.darkButton,a.darkButton {
border:1px solid @dark2;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
background-color:@dark3;
background:-moz-linear-gradient(top,@dark4,@dark3);
background:-webkit-gradient(linear,left top,left bottom,from(@dark4),to(@dark3));
.ieRoundedCorners;
color:#fff;
display:inline-block;
font-size:15px;
padding:0 5px;
vertical-align:middle;
.macType;
:hover,:focus {
box-shadow:0 0 4px @blue2;
-moz-box-shadow:0 0 4px @blue2;
-webkit-box-shadow:0 0 4px @blue2;
}
}
button.lightButton,input.lightButton,a.lightButton {
border:1px solid @light5;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
background-color:@light8;
background:-moz-linear-gradient(top,@light8,@light7);
background:-webkit-gradient(linear,left top,left bottom,from(@light8),to(@light7));
.ieRoundedCorners;
color:#000;
display:inline-block;
font-size:15px;
padding:0 5px;
vertical-align:middle;
.macType;
:hover,:focus {
box-shadow:0 0 4px @blue2;
-moz-box-shadow:0 0 4px @blue2;
-webkit-box-shadow:0 0 4px @blue2;
}
}
button.smallButton,input.smallButton,a.smallButton {
font-size:12px !important;
line-height:19px !important;
height:19px !important;
}
body.img-grad {
button.blueButton,input.blueButton,a.blueButton {
background-image:url(/_res/img/grad-blue.png);
background-repeat:no-repeat;
background-position:0 0 !important;
background-color:transparent;
}
button.darkButton,input.darkButton,a.darkButton {
background-image:url(/_res/img/grad-dark.png);
background-repeat:no-repeat;
background-position:0 0 !important;
}
button.lightButton,input.lightButton,a.lightButton {
background-image:url(/_res/img/grad-light.png);
background-repeat:no-repeat;
background-position:0 0 !important;
}
}
// text alignment modifiers
.right { text-align:right; }
.center { text-align:center; }
// metadata (mostly dates)
.meta {
font-size:11px;
color:@light3;
}
// links
a.addthis_button_print,a.addthis_button_compact {
cursor:pointer;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
:hover,:focus {
box-shadow:0 0 4px @blue2;
-moz-box-shadow:0 0 4px @blue2;
-webkit-box-shadow:0 0 4px @blue2;
}
img {
width:100px;
height:25px;
vertical-align:middle;
.useSpritePng;
}
}
a.addthis_button_print {
float:left;
img { background-position:0 -400px; }
}
a.addthis_button_compact {
float:right;
img { background-position:0 -425px; }
}
a.arrow {
white-space:nowrap;
padding-right:16px;
.useSpritePng;
background-position:100% 0;
}
body.ie {
a.arrow { background-position:100% 2px; }
}
// DIVs
div.pageTools {
float:right;
width:220px;
margin-bottom:20px;
}
div.container_12 { // for debugging purposes
// background-image:url(/_res/img/grid/12_col.gif);
}
div.contentRelated {
h4 { margin-bottom:0; }
}
div.f-right {
float:right;
margin-left:20px;
}
div.f-left {
float:left;
margin-right:20px;
}
div.grid_6 {
#contentMain {
padding-right:19px;
border-right:1px solid @light7;
}
dl {
dd { width:280px; }
}
blockquote {
float:right;
margin-left:20px;
width:220px;
}
div.split {
div.col1 {
width:200px;
float:left;
}
div.col2 {
width:220px;
float:right;
}
}
div.callout {
div.split {
div.col1 {
width:200px;
float:left;
}
div.col2 {
width:200px;
float:right;
}
}
}
}
div.grid_9 {
dl {
dd { width:540px; }
}
blockquote {
float:right;
margin-left:20px;
width:300px;
}
}
div.grid_12 {
dl {
dd { width:780px; }
}
blockquote {
float:right;
margin-left:20px;
width:460px;
}
}
div.callout {
clear:both;
margin-bottom:20px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0 2px 0 @light5;
-moz-box-shadow:0 2px 0 @light5;
-webkit-box-shadow:0 2px 0 @light5;
position:relative;
zoom:1;
_overflow:hidden;
div.heading {
background-color:@light7;
background:-moz-linear-gradient(top,@light7,@light6);
background:-webkit-gradient(linear,left top,left bottom,from(@light7),to(@light6));
padding:10px 11px;
border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
font-size:15px;
color:@dark2;
.macType;
text-shadow:1px 1px 2px rgba(255,255,255,0.5);
-moz-text-shadow:1px 1px 2px rgba(255,255,255,0.5);
-webkit-text-shadow:1px 1px 2px rgba(255,255,255,0.5);
}
div.body {
border:1px solid @light6;
border-top-style:none;
background-color:#fff;
background:-moz-linear-gradient(top,#fff,@light8);
background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(@light8));
padding:10px 9px 1px;
border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
}
h2 {
margin-bottom:10px;
}
// added via JS and used to create rounded corners in IE
div.c-c-tl,div.c-c-tr,div.c-c-bl,div.c-c-br {
width:5px;
height:5px;
font-size:1px;
line-height:0;
overflow:hidden;
position:absolute;
.useSpritePng;
zoom:1;
}
div.c-c-tl {
left:0;
_left:1px;
top:0;
background-position:-1010px -25px;
}
div.c-c-tr {
right:0;
top:0;
background-position:-1015px -25px;
}
div.c-c-bl {
left:0;
_left:1px;
bottom:0;
background-position:-1010px -40px;
}
div.c-c-br {
right:0;
_right:-1px;
bottom:0;
background-position:-1015px -40px;
}
}
div.calloutNull {
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
div.body {
border-style:none;
background:transparent;
background-image:none !important;
}
div.c-c-tl,div.c-c-tr,div.c-c-bl,div.c-c-br { display:none; }
}
div.calloutNoHeading {
div.body {
border-top-style:solid;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
}
div.calloutDark {
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
div.c-c-bl {
left:0;
bottom:0;
_bottom:-1px;
background-position:-1010px -30px;
}
div.c-c-br {
right:0;
bottom:0;
_bottom:-1px;
background-position:-1015px -30px;
}
div.body {
filter:none;
background:none;
background-color:@light3;
border-style:none !important;
padding-bottom:10px;
div.bodyWrapper {
background-color:#fff;
padding:10px 10px 1px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
zoom:1;
position:relative;
div.cd-c-tl,div.cd-c-tr,div.cd-c-bl,div.cd-c-br {
position:absolute;
.useSpritePng;
width:5px;
height:5px;
overflow:hidden;
}
div.cd-c-tl{
top:0;
*top:-1px;
_top:0;
left:0;
background-position:-1000px -35px;
}
div.cd-c-tr{
top:0;
*top:-1px;
_top:0;
right:0;
_right:-1px;
background-position:-1005px -35px;
}
div.cd-c-bl{
bottom:0;
left:0;
background-position:-1000px -40px;
}
div.cd-c-br{
bottom:0;
right:0;
_right:-1px;
background-position:-1005px -40px;
}
}
}
}
// browser specific div.callout mods
body.ie { // all versions of IE
div.callout {
div.body {
border-bottom-width:3px;
}
}
}
// landing page interactive component
div.interactiveComponent {
margin-bottom:20px;
}
// slideshow rail component
div.slideshow {
width:200px;
ul.slides {
width:200px;
height:275px;
overflow:hidden;
position:relative;
padding:0;
margin:0;
list-style:none;
li.slide {
position:absolute;
top:0;
left:0;
width:200px;
height:275px;
overflow:hidden;
padding:0;
margin:0;
display:none;
div.img { margin-bottom:10px; }
div.txt {
h2 { margin-bottom:10px; }
}
}
li.slide:first-child,
li.first {
display:block;
}
}
div.ctrl {
padding:10px 0;
text-align:center;
display:none;
img { vertical-align:middle; }
a.next {
img {
width:25px;
height:25px;
.useSpritePng;
background-position:-100px -60px;
}
:hover {
img {
background-position:-100px -35px;
}
}
}
a.prev {
img {
width:25px;
height:25px;
.useSpritePng;
background-position:-125px -60px;
}
:hover {
img {
background-position:-125px -35px;
}
}
}
span.pagination {
padding:0 7px;
a {
margin:0 3px;
img {
width:7px;
height:7px;
.useSpritePng;
background-position:-116px -26px;
}
}
a.activeSlide {
img {
background-position:-100px -26px;
}
}
}
}
}
body.with-js {
div.slideshow {
div.ctrl {
display:block;
}
ul.slides {
li.slide {
display:block;
}
}
}
}
// heading modifications
h1.plain,h3.plain {
border-bottom-style:none;
margin-bottom:none;
}
// images
img.icon-facebook {
width:20px;
height:20px;
.useSpritePng;
background-position:-100px 0;
vertical-align:middle;
}
img.icon-linkedin {
width:20px;
height:20px;
.useSpritePng;
background-position:-120px 0;
vertical-align:middle;
}
img.icon-youtube {
width:20px;
height:20px;
.useSpritePng;
background-position:-140px 0;
vertical-align:middle;
}
img.icon-rss { // orange RSS icon
width:20px;
height:20px;
.useSpritePng;
background-position:-160px 0;
vertical-align:middle;
}
img.icon-feed { // grey buttton with RSS icon and "Feed" text
width:49px;
height:16px;
.useSpritePng;
background-position:-50px -100px;
vertical-align:baseline;
margin-left:10px;
}
// SPANs
span.divider {
padding:0 5px;
}
// table styles
table.zebra {
border-bottom:1px solid @light5;
th {
border-bottom:1px solid @light5;
color:@dark2;
}
tr:nth-child(even),tr.even{}
tr:nth-child(odd),tr.odd{
td {
background-color:@light8;
}
}
}
table.quickPollResult {
td { padding-bottom:0.25em; }
td.val {
color:#000;
width:40px;
}
td.desc {}
}
// list styles
ul.arrow {
li {
margin-left:0;
padding-left:20px;
list-style:none;
.useSpritePng;
background-position:-2945px -396px;
zoom:1;
li {
background-position:-2945px -391px;
}
}
}
ul.divided {
li {
padding-bottom:0.5em;
border-bottom:1px dotted @light7;
_border-bottom-style:solid;
margin-left:0;
list-style:none;
*:last-child, .last-element {
margin-bottom:0;
}
}
li.last, li:last-child {
border-bottom:none;
padding-bottom:0;
}
ul {
border-top:1px dotted @light7;
_border-top-style:solid;
margin-bottom:0;
margin-top:5px;
margin-left:20px;
}
}
/* !lightBox window items */
body.lightBox {
h3 { width:300px; }
p { width:300px; }
.right {
width:300px;
}
//hr { width:300px; }
textarea {
display:block;
width:295px;
height:70px;
overflow:auto;
}
}
/* !Homepage items */
body#homePage {
#pageBody {
background-image:none;
}
#hpCols {
background-image:url(/_res/img/bg-hp-cols.png);
background-repeat:repeat-y;
margin-bottom:40px;
}
#hpInteractive {
width:940px;
height:505px;
overflow:hidden;
margin-bottom:40px;
position:relative;
.main {
width:100%;
height:100%;
img {
width:940px;
height:506px;
}
}
.hpPopup {
position:absolute;
top:340px;
.useSpritePng;
width:200px;
padding:10px 15px 20px;
background-position:-1225px -550px;
z-index:5;
a {
:hover { text-decoration:none; }
}
.img {
margin-bottom:10px;
}
.txt {
padding:5px 10px 20px;
.useSpritePng;
background-position:-1455px -550px;
}
}
.hpPopup:hover, .hpPopupHover {
background-position:-995px -550px;
h3 {
color:@blue3;
}
}
#hpPopup1 {
left:17px;
cursor:pointer;
}
#hpPopup2 {
left:242px;
cursor:pointer;
}
#hpPopup3 {
right:243px;
cursor:pointer;
}
#hpPopup4 {
right:18px;
padding-bottom:10px;
height:150px;
}
.hpShadow {
position:absolute;
width:940px;
height:25px;
.useSpritePng;
bottom:0;
left:0;
z-index:10;
background-position:-1455px 100%;
}
}
.split {
.col1 {
width:200px;
}
.col2 {
width:220px;
}
}
.hpWrapper {
padding-right:20px;
}
.omega {
.hpWrapper {
padding-right:0;
}
}
.homeLink { display:none; }
}
/* !img-grad : browsers that don't support CSS gradients */
body.img-grad {
div.callout div.body
{
background-image:url(/_res/img/bg-callout-grad.png);
background-repeat:no-repeat;
background-position:100% 100% !important;
}
div.calloutDark div.body {
background-image:none;
}
}
/* !fancybox */
#fancy_ajax {
overflow:hidden;
}
#fancy_content {
object,embed {
margin:0;
padding:0;
display:inline;
float:left;
}
}
/* !IE Only items */
.c-tl, .c-tr, .c-bl, .c-br {
width:5px;
height:5px;
overflow:hidden;
position:absolute;
.useSpritePng;
}
.c-tl { background-position:-1010px -25px; }
.c-tr { background-position:-1015px -25px; }
.c-bl { background-position:-1010px -30px; }
.c-br { background-position:-1015px -30px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment