Seven Cogs SASS File

.css

@import "compass";

/* ---------- Global ---------- */

body {
	background-color: #EEF0F2;
	color: #333;
	font: 12px/1 Arial, Helvetica, Verdana, sans-serif;
}

a {
	color: #D05B00;
}

a:hover,
a:focus {
	color: #06C;
}

.obscured,
#skip-to-content,
#heading .company-title span,
#heading .page-title,
#heading .site-title,
#navigation h1,
#navigation .child-menu,
#breadcrumbs h1 {
	clip: rect(0 0 0 0);
	position: absolute;
}

/* ---------- Wrapper ---------- */

#wrapper {
	margin: 43px auto;
	position: relative;
	width: 940px;
}

/* ---------- Skip to content ---------- */

#skip-to-content:focus {
	left: auto;
	right: 0;
	top: -2.4em;
}

/* ---------- Banner ---------- */

#heading {
	margin-bottom: 26px;
	min-height: 40px;
}

#heading .company-title {
	margin: 0;
}

/* ---------- Sign In ---------- */

#sign-in {
	background: url(../images/custom/login_icon.png) no-repeat 3px 50%;
	font-weight: bold;
	position: absolute;
	right: 0;
	top: -1em;
}

/* ---------- Navigation ---------- */

#navigation {
	position: absolute;
	right: 0;
	top: 11px;
}

#navigation ul {
	@include background(#10354A);
	@include background-image(linear-gradient(top left, #215172, #10354A));
	border: 1px solid;
	border-color: #597D95 #506E82 #879AA5;
	@include border-radius(4px);
	float: right;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

#navigation li,
#navigation a {
	display: inline-block;
	position: relative;
}

.ie6 #navigation li,
.ie7 #navigation li,
.ie6 #navigation a,
.ie7 #navigation a {
	display: inline;
	zoom: 1;
}

#navigation a {
	color: #FFF;
	outline: 0;
	padding: 11px 13px;
	text-decoration: none;
}

#navigation .selected a,
#navigation a:hover,
#navigation a:active,
#navigation a:focus {
	color: #BBB;
}

#navigation a:active,
#navigation a:focus {
	@include background(#154661);
	@include background-image(linear-gradient(top left, #1D4663, #154661));
	@include border-radius(3px);
}

#navigation a:active span,
#navigation a:focus span {
	position: relative;
	top: 2px;
}

/* ---------- Layout ---------- */

.portlet-column-content {
	padding: 0 10px 20px;
}

.portlet-column-content-first,
.portlet-column-content-only {
	padding-left: 0;
}

.portlet-column-content-last,
.portlet-column-content-only {
	padding-right: 0;
}

/* ---------- Portlet ---------- */

.portlet .portlet-topper {
	@include background(#215172);
	@include border-radius(4px);
	font-weight: bold;
	list-style: none;
	margin: 0;
	padding: 0;
}

.portlet .portlet-topper-toolbar {
	right: 6px;
	top: 7px;
}

.portlet .portlet-title {
	color: #FFF;
	font-weight: normal;
	margin: 0;
	min-height: 1em;
	padding: 9px 13px;
}

.portlet-sign-in .portlet-title {
	background-image: url(../images/custom/login_icon.png);
}

.portlet-body {
	margin: 0;
}

#page-banner {
	background: #215172 url(../images/custom/page-banner_bg.png) no-repeat right center;
	@include border-radius(3px);
	color: #FFF;
	font-size: 2.2em;
	margin: 0;
	padding: 0.5em 0.8em;
}

/* ---------- Footer ---------- */

#footer {
	text-align: right;
}

.callout {
	@include background(#EEEFEF);
	@include background-image(linear-gradient(top left, #D2D2D3, #EEEFEF));
	border: 1px solid;
	border-color: #808080 #777 #404040;
	@include border-radius(4px);
}

.callout-extraborder {
	border: 1px solid #EEE;
	@include border-radius(4px);
}

.home .callout-extraborder img {
	height: auto !important;
	width: 846px !important;
}

a:hover .callout-extraborder,
a:focus .callout-extraborder {
	@include background-image(linear-gradient(top left, #DDD, #EEE));
	border-color: #FFF;
}

.callout-content {
	height: 95px;
	padding: 14px 24px;
}

.after-icon-callout {
	margin: 0 0 16px 132px;
}

.small-after-icon-callout {
	border-bottom: 1px solid #777;
	padding: 5px 0 5px 85px;
}

.portlet-journal-content .portlet-body .small-after-icon-callout h1 {
	margin: 0 0 3px;
}

.portlet-journal-content .portlet-body h1 {
	font-size: 1.25em;
	line-height: 1.125;
	margin: 0 0 12px;
}

.portlet-journal-content .portlet-body ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 2px;
}

.portlet-journal-content .portlet-body li {
	background: url(../images/custom/marker.png) no-repeat 0 0.4em;
	margin-bottom: 6px;
	padding-left: 20px;
}

.article h1 {
	color: #215172;
	font-size: 2.2em;
	font-weight: normal;
	line-height: 1.125;
	margin: 0 0 12px;
}

.article h2 {
	color: #484A4C;
	font-size: 1.2em;
	line-height: 1.125;
	margin: 0 0 12px;
}

.article p {
	line-height: 1.7;
}

.small-article {
	margin-bottom: 20px;
}

.small-article h1 {
	font-size: 1.2em;
	margin: 0.5em 0;
}

.small-article h2 {
	font-size: 1em;
	margin: 0.25em 0;
}

.small-article p {
	font-size: 90%;
	line-height: 2;
}

.after-icon-callout h1 {
	color: #215172;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.125;
	margin: 0 0 2px;
}

.after-icon-callout p {
	color: #474A4B;
	line-height: 1.75;
	margin: 0;
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
	margin-bottom: 1.5em;
}

.breadcrumbs li {
	background: url(../images/arrows/05_right.png) no-repeat 100% 50%;
	display: inline;
	margin-right: 5px;
	padding-right: 15px;
}

.breadcrumbs .last {
	background-image: none;
	font-weight: bold;
	margin-top: 0.2em;
}

.breadcrumbs .last a {
	color: #555;
}

/* ---------- Site breadcrumbs ---------- */

.site-breadcrumbs {
	margin: 0 0 5px;
	width: auto;
}

.site-breadcrumbs ul {
	background-color: #FFF;
	border: 1px solid #DEDEDE;
	border-color: #C0C2C5;
	height: 1.8em;
	margin: 0;
}

.site-breadcrumbs li {
	background-image: none;
	float: left;
	line-height: 1.8em;
	margin-right: 0;
	padding-left: 0.75em;
	padding-right: 0;
}

.site-breadcrumbs li span {
	background: url(../images/common/breadcrumbs.png) no-repeat 100% 50%;
	display: block;
	line-height: 1.8em;
	padding: 0 15px 0 0;
}

.site-breadcrumbs li span a {
	text-decoration: none;
}

.site-breadcrumbs li.first a {
	color: #369;
	font-weight: bold;
}

.site-breadcrumbs li.last a {
	color: #4B5567;
	font-size: 1.3em;
}

.site-breadcrumbs .last {
	display: inline;
	font-size: 1em;
	margin-top: 0;
	padding-right: 0;
}

.site-breadcrumbs .last span {
	background-image: none;
	padding: 0;
}

.lfr-hudcrumbs {
	position: fixed;
	top: 0;
	z-index: 200;
}

.lfr-hudcrumbs ul {
	background: rgba(0, 0, 0, 0.8);
}

.lfr-hudcrumbs .breadcrumbs li a,
.lfr-hudcrumbs .breadcrumbs li span {
	color: #FFF;
}

.lfr-hudcrumbs li span {
	background-image: url(../images/common/breadcrumbs_hud.png);
}

/* -------- Custom Seven Cogs Panels ------------ */

.lfr-panel-container {
	background: transparent;
}

/* -------- Custom Seven Cogs Web Content Mixin -------- */

@mixin customContent($viewClass, $width){
	&.#{$viewClass} {
		.home .callout-extraborder img {
			height: auto !important;
			padding: 12px !important;
			width: $width - 24px !important;
		}
	}
}
/* -------- Width Selector Mixin -------- */

@mixin viewSelector($viewSelector, $width) {
	&.#{$viewSelector} {
		#wrapper {
			margin: 20px auto 0;
			width: $width !important;
		}
		.portlet-layout {
			display: inline-block;
			clear: both;
			.portlet-column {
				clear: both;
				float: left;
				padding: inherit 0 !important;
				width: $width !important;
				.portlet-column-content {
					padding-left: 0;
					padding-right: 0;
				}
			}
		}
		#navigation li {
			width: $width !important;
		}
	}
}

/* -------- Width Selector Mixin -------- */

@mixin widthSelector($selector, $sWidth, $mWidth, $lWidth) {
	html.#{$selector}{
		@if $selector != device-brand-unknown {	
			
/* -------- Custom Seven Cogs Web Content -------- */

			@include customContent("aui-view-4", $sWidth);
			@include customContent("aui-view-320", $sWidth);
			@include customContent("aui-view-480", $mWidth);
			@include customContent("aui-view-720", $lWidth);

/* -------- Seven Cogs Mobile Views -------- */	
			
			&.aui-view-4,
			&.aui-view-320,
			&.aui-view-480,
			&.aui-view-720 {
				#navigation:after,
				#navigation:before {
					clear: both;
					content: " ";
					display: block;
					height: 0;
					visibility: "hidden";
				}
				#navigation {
					background: none repeat scroll 0 0 transparent;
					@include border-radius(5px);
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
					clear: both;
					color: #444444;
					display: block;
					margin: 0 0 40px;
					padding: 0;
					position: relative;
					@include transition-property(color);
					@include transition-duration(333ms);
					ul {
						display: block;
						float: none;
						list-style: none;
						margin: 0;
						padding: 0;
						background: none;
						li {
							clear: both;
							color: #444;
							float: none;
							a {
								border-image: none;
								border-color: transparent transparent transparent transparent;
								color: inherit;
								display: block;
								@include background-image(linear-gradient(top left, #FDFDFD, #EEEEEE));
								border-color: #CCCCCC;
								border-style: solid;
								border-width: 1px 1px 0;
								font-size: 16px;
								line-height: 27px;
								padding: 9px 20px 8px;
							}
						}
						li a:hover,
						li.selected a{
							@include background-image(linear-gradient(top left, #1D4663, #154661));
							border-color: #5E87B0;
							color: #FFFFFF;
						}
						li.first a {
							border-radius: 5px 5px 0 0;
						}
						li.last a {
							border-radius: 0 0 5px 5px;
						}
					}
				}
				#breadcrumbs {
					display: none;
				}
			}
			@include viewSelector("aui-view-4", $sWidth);
			@include viewSelector("aui-view-320", $sWidth);
			@include viewSelector("aui-view-480", $mWidth);
			@include viewSelector("aui-view-720", $lWidth);
		}
	}
}

/* -------- Execute Mobile Function -------- */
/* -------- (DEVICE CLASS, SM VIEW, LG VIEW) -------- */

/* -------- To target specific mobile devices: -------- */
/* -------- Download "wurfl-web" from liferay-plugins -------- */

@include widthSelector("device-os-android.touch", 320px, 580px, 720px);
@include widthSelector("device-os-iphone-os.touch", 300px, 460px, 720px);

/* -------- Default Mobile -------- */

@include widthSelector("device-brand-unknown", 960px, 960px, 960px);
@include widthSelector("touch", 300px, 460px, 720px);

This is good, will try this.