css sample

css-sample.css

@charset "utf-8";
/* CSS Document */

/*GLOBAL */

body#home {
	line-height: 18px;
}

body {
	margin: 0px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	background: url(images/bokeh_bg.jpg) top repeat-x #dbe9ca;	
	background-size: 100%;
	font-size: 13px;
	line-height: 20px;
	color: #6d6659;
}


a {
	color: #539f94;	
	text-decoration: none;
}

a img {
	border: 0px;	
}

a:hover, a:active {
	color: #94bd84;	
}


h1 {
	font-family: "Avenir LT 65 Medium";
	color: #ac3c3c;	
	font-weight: normal;
	font-size: 29px;
	margin: 14px 0px 21px;
}

h2 {
	font-family: "Avenir LT 65 Medium";
	font-weight: normal;
	font-size: 20px;
}



h3 {
	font-family: "Avenir LT 45 Book";
	color: #ac3c3c;	
	font-weight: normal;
	font-size: 20px;
	margin: 7px 0px 18px;
}

h1 a, h2 a, h3 a {
	color: #ac3c3c;	
}

hr {
	height: 1px;
	background-color: #ccc;
	border: 0px;
	margin: 30px 0px;
}

#wrapper {
	width: 980px;
	margin: 0 auto;	
	position: relative;
}

.container {
	width: 100%;
	background-color: #FFF;	
	border-left: 1px solid #e0e5e5;
	border-right: 1px solid #e0e5e5;
}

.emphasis {
	color: #aa4646;
	font-family: "Avenir LT 65 Medium";
}

section#content {
	margin: 35px 0px 0px 40px;
	width:600px;
	min-height: 800px;
}

.button {
	background: #ab3b3b; /* Old browsers */
	background: -moz-linear-gradient(top, #ab3b3b 0%, #952525 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ab3b3b), color-stop(100%,#952525)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ab3b3b 0%,#952525 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ab3b3b 0%,#952525 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ab3b3b 0%,#952525 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ab3b3b 0%,#952525 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab3b3b', endColorstr='#952525',GradientType=0 ); /* IE6-9 */
		font-family: "Avenir LT 55 Roman";
		text-transform: uppercase;
		font-size: 13px;
		letter-spacing: 1px;
		float: right;
		border:0px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
}

.button:hover {
	background: #c44747; /* Old browsers */
	background: -moz-linear-gradient(top, #c44747 0%, #9b2828 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c44747), color-stop(100%,#9b2828)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c44747 0%,#9b2828 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c44747 0%,#9b2828 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #c44747 0%,#9b2828 100%); /* IE10+ */
	background: linear-gradient(to bottom, #c44747 0%,#9b2828 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c44747', endColorstr='#9b2828',GradientType=0 ); /* IE6-9 */
}

.button a {
	display: block;
	color: #fff;
	padding: 6px 10px;
}

ul {
	margin-bottom: 17px;	
}

.clear {
	clear: both;	
}

.image_border {
	border: 6px solid #FFF;
	box-shadow: 0px 1px 3px rgba(0,0,0,.5);
}	

.image_left {
	float: left;
	margin: 5px 25px 10px 0px;	
}

.image_right {
	float: right;
	margin: 0px 0px 15px 15px;
}

.right {
	float: right;
	margin: 0px 0px 15px 15px;
	padding: 0px 20px;	
}

/*** HEADER ***/

#logo {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 14px;
}


#address {
	float: right;
	font-family: "Avenir LT 45 Book";	
	color: #505050;
	font-size: 18px;
	text-align: right;
	line-height: 24px;
	margin: 20px 0px 19px;
}

.arial {
	font-family: Arial, Helvetica, sans-serif;	
}

#home_banner {
	margin: 0 auto;
	width: 100%;
	margin: 0px 0px 53px;
	position: relative;
	height: 416px;
}


/*** NAV ***/


nav {
	width: 962px;
	margin: 0 auto;	
	height: 56px;
	background: #c44747; /* Old browsers */
	background: -moz-linear-gradient(top, #c44747 0%, #952525 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c44747), color-stop(100%,#952525)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c44747 0%,#952525 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c44747 0%,#952525 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #c44747 0%,#952525 100%); /* IE10+ */
	background: linear-gradient(to bottom, #c44747 0%,#952525 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c44747', endColorstr='#952525',GradientType=0 ); /* IE6-9 */
	clear: both;
	z-index: 6;
	padding-right: 18px;
}

.sf-menu, .sf-menu * {
	padding: 0;
	list-style: none;
	letter-spacing: 2px;	
	font-family: "Avenir LT 55 Roman";
	text-transform: uppercase;
	font-size: 14px;
	margin: 0px;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 5px;
	z-index: 99;
	margin-top: 0px;
}
.sf-menu > li {
	float: right;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
	color: #fff;
}
.sf-menu ul ul {
	top: 0px;
	left: 100%;
}


.sf-menu a {
	padding: 1.3em 1.35em;
	text-decoration: none;
}

.sf-menu a:hover, .sf-menu .current {
	color: #FFF;	
}

.sf-menu li {
	white-space: nowrap; 
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #686052;
	border-bottom: 1px solid #7d7465;
}

.sf-menu ul li:hover {
	background: #6d6659;
}


.sf-menu ul li a {
	color: #ded8ce;
	letter-spacing: normal;	
	text-transform: none;
	font-family: "Avenir LT 45 Book";
	padding: 1em;
}
.sf-menu ul ul li {
	background: #686052;
	border-left: 1px solid #7d7465;
}

.sf-menu ul ul li:hover {
	background: #6d6659;	
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #ded8ce; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #ded8ce; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}



/*** SIDEBAR NAV ***/

#sidebar {
	width: 273px;	
	background: url(images/sidebar_shadow.png) top center no-repeat;
	position: absolute;
	right: 10px;
	margin-top: -30px;
}

#banner {
	position: relative;	
	margin-top: 0px;
}

#aside_bg {
	width: 247px;
	margin: 0 auto;
	background-color: #f6f6f6;	
	padding: 4px;
}

aside {
	border: 1px solid #e5e5e5;
	width: 205px;
	margin: 0px auto;
	padding: 35px 14px 20px 26px;
}

aside h2 {
	font-size: 22px;
	font-weight: normal;
	color: #ac3c3c;
	margin: 0px 0px 12px 14px;
	font-family: "Avenir LT 45 Book";
}

aside p {
	margin-left: 14px;	
	font-size: 14px;
	line-height: 22px;
	color: #6d6659;
}


aside .phone {
	font-size: 16px;
}

aside .directions {
	font-size: 13px;	
}

.aside_nav {
	list-style-type: none;
	font-size: 14px;
	padding: 0px;
	margin-bottom: 29px;
}

.aside_nav li {
	padding: 14px 10px 15px 13px;	
	line-height: 7px;
	display: block;
}

.aside_nav a {
	color: #6d6659;
}

.aside_nav a:hover, .aside_nav .active a {
	color: #539f94;	
}

.aside_nav .active  {
	background: url(images/sidebar_hover.png) top left no-repeat;	
}


/*** HOMEPAGE BUCKETS ***/

.home_bucket {
	width: 304px;
	float: left;
	margin-left: 17px;	
}

.home_bucket_text {
	margin: 0 auto;	
	width: 276px;
}
.home_bucket_text h2 {
	font-family: "Avenir LT 65 Medium";
	color: #ac3c3c;	
	font-weight: normal;
	font-size: 23px;
	margin: 14px 0px 21px;
}


/*** FOOTER ***/

#footer_wrapper {
	width: 100%; 
	background-color: #504a40;	
	margin-top: 47px;
}

body#home footer {
	background: url(images/hummingbird_footer.png) top left no-repeat #504a40;	
	padding: 50px 0px 30px;
}

footer {
	margin:0 auto;
	padding: 20px 0px 1px;
	color: #ded8ce;
	font-size: 13px;
	width: 93.5%;
}

footer a {
	color: #FFF;	
	font-size: 13px;
}

footer a:hover {
	color: #ded8ce;
}

footer h2, footer h1 {
	color: #FFF;
	font-family: "Avenir LT 45 Book";	
	font-size: 21px;
	font-weight: normal;
	margin: 15px 0px 35px;
}

#home footer h1 {
	margin-bottom: 0px!important;	
}

#home footer img {
	margin-bottom: 4px;	
}

#footer_right {
	width: 616px;
	float: right;	
}

#footer_menu {
	margin: 18px 0px 31px;
}

footer .phone {
	font-size: 15px;
}

.white {
	color: #FFF;
}

/*** HOMEPAGE SLIDER ***/


div#slide_header div#slide-holder div#slide-runner {
	left : 0px;
	width : 980px;
	height : 416px;
	overflow : hidden;
	position : absolute;
}
div#slide_header div#slide-holder img {
	margin : 0;
	display : none;
	position : absolute;
}
div#slide_header div#slide-holder div#slide-controls {
	right: 15px;
	bottom : 25px;
	width : 980px;
	height : 46px;
	display : none;
	position : absolute;
}
div#slide_header div#slide-holder div#slide-controls p.text {
	display: none;
}
div#slide_header div#slide-holder div#slide-controls p#slide-nav {
	float : right;
	height : 18px;
	display : inline;
}
div#slide_header div#slide-holder div#slide-controls p#slide-nav a {
	float : left;
	width : 18px;
	height : 18px;
	display : inline;
	font-size : 5px;
	margin : 0 5px 0 0;
	text-align : center;
	color: #5bb79a;
}
div#slide_header div#slide-holder div#slide-controls p#slide-nav a.on {
	background-position : 0 -18px;
	color: #ac3c3c;
}
div#slide_header div#slide-holder div#slide-controls p#slide-nav a {
	background-image : url(images/slide-nav.png);
}

/*testimonials*/

.testimonial {
	width: 620px;
	margin: 15px auto;
	color: #686f62;
}

.testimonial_top {
	line-height: 0px;
	background: url(images/speechbubble_top.png) no-repeat;
	height: 19px;
}

.testimonial_middle {
	background-color: #deecd2;
	padding: 10px 40px;
	text-align: justify;
}

.testimonial_bottom {
	line-height: 0px;
	background: url(images/speechbubble_bottom.png) no-repeat;
	height: 56px;
}

#testimonials{
	/* The main container div */
	position:relative;
	margin:0px auto;
	width:620px;
}

#testimonials_holder{
	padding: 0px;
	width:620px;
	overflow:hidden;
	position:relative;
	margin-bottom: 0px;

}

#testimonials_rotate {
	margin: 0px;
	padding: 0px;	
}


.swControls{
	position:absolute;
 	margin-top: -10px;
}

a.swShowPage{
	background-color:#5bb79a;
	float:left;
	height:15px;
	margin:4px 3px;
	text-indent:-9999px;
	width:15px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
}

a.swShowPage:hover,
a.swShowPage.active{
	background-color:#ac3c3c;
	
}


#testimonials_holder li{
	list-style:none outside none;
	float:left;
	margin: 0px;
	padding: 0px;
}

.ui-state-default {
	background: none #deecd2;
	border: 0px;
}

.ui-state-active, .ui-state-hover {
	background: none #c3d8b1;
	border: 0px;
}

.ui-accordion .ui-accordion-header {
	padding: .85em .5em .85em 2.2em;
	margin-top: 5px;
}

.ui-widget p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;	
	font-size: 13px;
	line-height: 20px;
	line-height: 18px;
	}
	
.ui-widget a {
	color: #ac3c3c;	
}

.ui-widget-content {
	border: 0px;
	background-image: none;
	}
	
.ui-accordion .ui-accordion-content {
	padding: .5em 2.2em;	
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
		-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}


/**  CONTACT **/

#contact_form {
	width: 620px;
	margin: 0px;
	border: 0px;	
}

#contact_form td {
	padding: 4px 7px 4px 0px;	
}


#contact_form .button {
	color: #eccdcd;	
	padding: 8px 18px;
	cursor: pointer;
}

#contact_form .button:hover {
	color: #FFF;	
}

input, textarea {
	background-color: #e4ddd1;
	border: 0px;
	padding: 4%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 5px;
	width: 92%;
}
.phone {
	font-size: 14px;
}

/** STATISTICS **/

.statistics table {
	margin-bottom:25px;
}

.statistics table th {
	text-align: left;
	border-bottom: 1px solid #ac3c3c;
	color: #ac3c3c;	
	font-family: "Avenir LT 65 Medium";
	text-transform: uppercase;
}

.statistics table td {
	min-width: 60px;
	border-bottom: 1px solid #DADADA;
	font-size: 13px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	line-height: 18px;
}

.smaller_table {
	width: 47%;	
}

#accordion_statistics .ui-accordion-content {
	padding: .5em 0;
}

.featured {
	padding: 20px 25px;
	background-color: #deecd2;
}

.featured h2 {
	margin: 0px	0px 10px 0px;
	font-size: 18px;
}

nav li .cufon-canvas  {margin-bottom:0px;}

.cufon-loading { visibility: hidden; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { color: #6d6659; }

.ui-widget-content {
	color: #5e5e5e;	
}