a CSS framework (requires Sass)

simpl.css

@import "reset";
@import "mixins";
///* === The basic styles =================================================>> */
@include Headings();
@include Selected();
body {
    color: $ForegroundColor;
    background: $BackgroundColor;
    }
body, button, textarea, input, table, select, optgroup {
    @include BaseFont();
    }
.ConstrainWidth {
	background: #fff;
	@include BoxShadow();
	}
a, td, tr:hover .Icon, button {
    @include transitions(); 
    }
a {
    color: $LinkColor;
	border-bottom: 1px dotted $LinkColor4;
    }
a:hover, a:focus {
	color: complement($LinkColor3);
    }
b, strong, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    } 
h2, h3, h4, h5, h6, p, ol, ul {
    margin-bottom: $Margin;
    }
br {
    clear: both;
    }
sup {
    font-size: .80em;
    vertical-align: text-top;
    }
hr {
    border-top: 1px solid $ForegroundColor;
	border-bottom: 1px solid $ForegroundColor2;
    margin: $Margin 0;
    }
.TableBorder {
	background: #fff;
    margin-bottom: $Margin;
    @include Border();
    @include Padding(2px);
    @include BorderRadius();
    @include BoxShadow();
    }
table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    line-height: 20px;
    }
caption {
    position: relative;
    display: table-caption;
    font-weight: 700;
    color: #fff;
    padding: 5px $Padding;
    @include TextShadow();
    @include LinearGradient(#999);
    @include BorderRadius(4px 4px 0 0);
   }
thead td, tfoot td {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    @include LinearGradient(#fff);
   }
td {
    vertical-align: middle;
    border: 1px solid #eee;
    padding: 2px 10px;
    }
td {
    background: #fff;
    }
td:hover {
    padding: 2px 5px 2px 15px;
    }
tr:hover, tr:hover td, .Selected {
    @include LinearGradient(#fff, #e7f4ff);
    }
fieldset {
    border-bottom: $Border;
    padding-bottom: $Padding;
    margin-bottom: $Margin;
    }
fieldset h6 {
    color: #ff7a00;
    }
label {
    float: left;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 25%;
    padding-right: 5%;
    margin-bottom: 5px;
    text-align: right;
    }
input[type='text'], input[type='password'], textarea {
    width: 60%;
    }  
input {
    margin:-1px -1px  0.2em -1px;
    }
input, textarea {
	@include Border();
    @include BorderInset();
    @include BorderRadius();
	@include LinearGradient(#f9f9f9, #fff);
	&:hover {
		@include BorderOutset();
		@include LinearGradient(#fff);
		}
    }
textarea {
    height: 8em;
    overflow: auto;
    }
select {
    min-width: 60%;
    max-width: 100%;
    }
table select {
    width: 100%;
    }
optgroup {
    font-weight: 700;
    margin-bottom: 1em;
    }
optgroup option {
    text-indent: 1em;
    }
.Buttons {
	text-align: center;
	padding: $Padding;
	@include BorderRadius();
	@include LinearGradient(#eee, #fff);
	}
button, .Button {
	line-height: 16px;
	margin: 0 $Margin $Margin 0;
    cursor: pointer;
	border: 0;
	padding: $Padding $WidePadding;
	color: $BackgroundColor;
	text-align: center;
	min-width: 125px;
	@include LinearGradient($LinkColor);
	@include BorderRadius();
	@include TextShadow();
	&:hover {
		background: #004071;
		color: #fff;
		@include BoxShadow(0, 0, 10px, #246);
		}
    }
button.Secondary {
	@extends button();
	@include LinearGradient(#999);
	&:hover {
		background: #555;
		@include BoxShadow(0, 0, 10px, #222);
		}
	}
form table input[type='text'], form table select, form table textarea {
    min-width: 0;
    width: 100%;
    }
acronym {
    border-bottom: 1px dotted;
    }
.Header {
    display: block;
    position: relative;
    padding: $WidePadding $Padding 0 $Padding;
    @include LinearGradient(#555);
    }
.Logo {
    float: right;
    width: 200px; 
    height: 32px;
    background: #fff url(logo.gif);
    text-indent: -99em;
    @include Opacity(.05);
    }
.Logo:hover {
    @include Opacity(.66);
    }
.Menu {
    margin-bottom: 0;
    }
.Menu li {
    @include InlineBlock();
    @include MinWidth(135px);
    }
.Menu li a {
    color: $LinkColor4;
    display: block;
    margin-bottom: 2px;
    padding: $Padding $WidePadding;
	border-bottom: 0;
    @include LinearGradient($ForegroundColor);
    @include BorderRadius();
	&:hover {
		color: #ccc;
		background: $LinkColor;
		}
    }
.Menu ul {
    position: absolute;
    top: -999em;
    z-index: 99;
    width: 250px;
	@include MinHeight(250px);
    padding: 15px;
    @include LinearGradient(#555);
    @include BorderRadius();
	@include BoxShadow(0, 0, 10px, $LinkColor);
    @include Opacity(0);
      }
.Menu ul li{
	display: block;
    }
.Menu ul li a{
	background: 0;
	padding: 5px 10px;
	&:hover {
		border: 0;
		background: #444;
		color: #fff;
		}
    }
.Menu li:hover ul {
    top: 44px;
    @include Opacity(1);
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out
    }
.SubHeader {
    position: relative;
    padding: 5px $Padding;
    @include LinearGradient(#fff);
	.Menu {
		text-align: right;
		}
	.Menu li {
		min-width:0;
		}
    .Menu li a {
		padding: 0 5px;
		@include BorderOutset();
        @include LinearGradient(#ccc);
        &:hover {
			background: #444;
			} 
        }
    }
.ContextMenu {
    display: none;
    position: absolute;
    width: 180px;
    z-index: 111;
    border: solid 1px #ddd;
    background: #eee;
    padding: 5px;
    .Menu li a {
        color: orange;
        &:hover {
			background: #ddd;
			}
        }
    }
.Footer .ConstrainWidth,
.Header .ConstrainWidth {
	background: 0;
	@include BoxShadow(0,0,0,0);
	}
.Footer {
    padding: $WidePadding;
    @include Border();
    @include LinearGradient(#fff, #dedede);
	.ConstrainWidth{
		text-align: center;
		}
    }
.Footer a {
    padding: 5px;
    border: 0px solid #fff;
    background: rgba(0, 0, 0, 0);
    @include BorderRadius($MoreRoundness);
    }
.Footer a:hover {
    padding: $Padding $WidePadding;
    background: #ededed;
    border: 1px solid #fff;
    @include TextShadow(0 0 20px yellow);
    }
.Footer a span {
    display: none;
    }
.Footer a:hover span {
    display: inline;
    }
.Message {
    padding: $Padding;
    margin-bottom: $Margin;
    @include Border();
    @include LinearGradient(#fff, #f90);
    @include BorderRadius();
    @include BoxShadow (0, 0, 20px, #246);
	@include Opacity(.9);
    }
.Message:hover {
    @include Opacity(1);
    }
.Tooltip {
    position: absolute;
    z-index: 999;
    color: #fff;
    }
.Tooltip .Content {
    padding: $Padding;
    @include MaxWidth(270px);
    @include LinearGradient(#555, #111);
    @include BorderRadius();
    @include TextShadow();
    @include BoxShadow(0, 0, 10px, #246);
    }
.Icon{
    margin: -8px 8px -8px 0;
    @include Opacity(.5);
    }
tr:hover .Icon {
    @include Opacity(1);
    @include Scale();
    }
.inlinesparkline {
    @include InlineBlock();
    padding-top: 5px;  
    line-height: 12px;
     }
///* Utilities ====================================================>>  */ 
.Marker                     {background:lighten($LinkColor, 70%)}
.Hide                       {display:none}

.Margin			{margin:$Margin}
.MarginTop		{margin:$Margin}
.MarginRight		{margin-right:$Margin}
.MarginBottom		{margin-bottom:$Margin}
.MarginLeft		{margin-left:$Margin}

.Padding		{padding:$Padding}
.PaddingTop		{padding:$Padding}
.PaddingRight		{padding-right:$Padding}
.PaddingBottom		{padding-bottom:$Padding}
.PaddingLeft		{padding-left:$Padding}

.TextRight               {text-align:right}
.TextCenter                 {text-align:center}
.TextLeft                   {text-align:left}

.FloatRight                 {float:right}
.FloatLeft                  {float:left}
// SiteMappr ====================================================>>
.SiteMap {
	margin: $WideMargin; 
	@include ClearFix();
	}
#primaryNav ul {
	margin-bottom: 0;
	}
#primaryNav li {
	width: 25%;
	}
#primaryNav li ul li {
	width: 99.9% !important;
	}
#primaryNav.col1 li {
	width: 99.9%;
	}
#primaryNav.col2 li {
	width: 50.0%;
	}
#primaryNav.col3 li {
	width: 33.3%;
	}
#primaryNav.col4 li {
	width: 25.0%;
	}
#primaryNav.col5 li {
	width: 20.0%;
	}
#primaryNav.col6 li {
	width: 16.6%;
	}
#primaryNav.col7 li {
	width: 14.2%;
	}
#primaryNav.col8 li {
	width: 12.5%;
	}
#primaryNav.col9 li {
	width: 11.1%;
	}
#primaryNav.col10 li {
	width: 10.0%;
	}
/* -------- Top Level --------- */
#primaryNav {
	margin: 0;
	float: left;
	width: 100%;
	}
#primaryNav #home {
    background: $BackgroundColor url("../images/L1-left.png") no-repeat scroll center bottom;
    display: block;
    float: none;
    padding: 0 0 30px;
    position: relative;
    z-index: 2;
	}
#primaryNav li {
	float: left;
	background: $BackgroundColor url("../images/L1-center.png") center top no-repeat;
	margin-top: -30px;
	padding: 30px 0;
	}
#primaryNav li a {
	position: relative;
	z-index: 3;
	margin: 0 20px 0 0;
	padding: 7px 0;
	display: block;
    @include LinearGradient(#f5fbff);
	@include BorderOutset();
    @include BorderRadius();
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
#primaryNav li a:hover, #primaryNav li a:focus {
	background-color: #e2f4fd;
	overflow: visible;
	position: relative;
	z-index: 222;
	@include BoxShadow();
	@include Scale();
	}
#primaryNav li:last-child {
	background: $BackgroundColor url("../images/L1-right.png") center top no-repeat;
	}
#primaryNav a:link:before, #primaryNav a:visited:before {
	content: "" attr(href) "" ;
	display: block;
	font-size: 8px;
	word-wrap: break-word;
	text-transform: uppercase;
	}
#primaryNav li a:link:before, #primaryNav li a:visited:before {
	color: #333;
	@include Opacity(.40);
	}
/* -------- Second Level --------- */
#primaryNav li li {
	margin-top: 0;
	padding: 10px 0 0 0;
	background-image: url("../images/vertical-line.png");
	}
#primaryNav li li a {
	@include LinearGradient(#fff);
	}
#primaryNav li li:first-child {
	padding-top: 20px;
	}
#primaryNav li li:last-child {
	background-image: url("../images/vertical-line.png");
	}	
/* -------- Third Level --------- */
#primaryNav li li ul {
	float: left;
	width: 99.9%;
	padding-top: 10px;
	background: $BackgroundColor url("../images/L3-ul-top.png") center top no-repeat;
	}
#primaryNav li li li {
	background: $BackgroundColor url("../images/L3-center.png") left center no-repeat;
	}
#primaryNav li li li a {
	width: 80%;
	float: right;
	@include LinearGradient(#f5fbff);
	}
#primaryNav li li li:first-child {
	background: url("../images/L3-li-top.png") left center no-repeat;
	}
#primaryNav li li li:last-child {
	background: url("../images/L3-bottom.png") left -50px no-repeat;
	}
/* -------- Fourth Level --------- */
#primaryNav li li li ul {
	background: $BackgroundColor url("../images/L3-ul-top.png") center top no-repeat;
	}
#primaryNav li li li li {
	background: url("../images/L3-center.png") left center no-repeat;
	}
#primaryNav li li li li a {
	width: 70%;
	float: right;
	@include LinearGradient(#fff);
	}
#primaryNav li li li li:first-child {
	background: url("../images/L3-li-top.png") left center no-repeat;
	}
#primaryNav li li li li:last-child {
	background: url("../images/L3-bottom.png") left -60px no-repeat;
	}
/* -------- Fifth Level --------- */
#primaryNav li li li li ul {
	margin: 0;
	width: 100%;
	float: right;
	padding: 10px 0 0 0;
	background: $BackgroundColor url("../images/L3-ul-top.png") center top no-repeat;
	}
#primaryNav li li li li li {
	background: url("../images/L3-center.png") left center no-repeat;
	padding: 5px 0;
	}
#primaryNav li li li li li a {
	width: 60%;
	@include LinearGradient(#f5fbff);
	}
#primaryNav li li li li li:first-child {
	padding: 15px 0 5px 0;
	background: url("../images/L3-li-top.png") left center no-repeat;
	}
#primaryNav li li li li li:last-child {
	background: url("../images/L3-bottom.png") left -60px no-repeat;
	}
/* -------- Sixth Level --------- */
#primaryNav li li li li li ul {
	margin: 0;
	width: 100%;
	float: right;
	padding: 10px 0 0 0;
	background: $BackgroundColor url("../images/L3-ul-top.png") center top no-repeat;
	}
#primaryNav li li li li li li {
	background: url("../images/L3-center.png") left center no-repeat;
	padding: 5px 0;
	}
#primaryNav li li li li li li a {
	width: 50%;
	@include LinearGradient(#fff);
	}
#primaryNav li li li li li li:first-child {
	padding: 15px 0 5px 0;
	background: url("../images/L3-li-top.png") left center no-repeat;
	}
#primaryNav li li li li li li:last-child {
	background: url("../images/L3-bottom.png") left center no-repeat;
	}
#utilityNav {
	float: right;
	margin-right: $Margin;
	}
#utilityNav li {
	float: right;
	margin-bottom: 10px;
	}
#utilityNav li a {
	position: relative;
	margin-left: -1px;
	padding: 5px 10px;
	display: block;
    @include LinearGradient(#fff);
	@include BorderOutset();
    @include BorderRadius();
	}
.Hidden {
	opacity: 0.40;
	}
.Hidden:hover {
	opacity: 1.0;
	}
.None {
	display:none;
	}
.Mobile {
	outline: 1px dotted orange;
	}
.Stacked {
	margin: -50px 0 -5px 5px !important;
	background: none !important;
	}
.Cracks {
	float: right;
	min-width: 30%;
	color: #777;
	margin: $Margin;
	padding: 20px 20px 0;
	@include Border();
	@include BorderRadius();
	@include LinearGradient(#fff);
	@include BoxShadow();
	@include Opacity(.75);
		&:hover {
		@include Opacity(1);
		}
	}
.Small {
    font-size: 8px;
	line-height:1px;
	color: #777;
	}