Oasis Sass

main.sass

//Live
$images: "../../img/oasis";
//Local
//$images: "../img";
//===================//
//  Standard styles  //
//===================//

$body: #333;
$fonts: "Merriweather, Georgia, Times New Roman, serif";
$shadow: #fbf9de;

h2, h3, h4{
	color:$body;
	font-family: #{$fonts};
	text-shadow: 0 2px $shadow;
}

a:hover{
	color: #fff;
}

h2{
	font-size: 36px;
    font-weight: 900;
}

h3{
	font-weight:800;
	font-size:22px;
}

h4{
	font-size:20px;
}
p{padding-top:15px;}

p, div{
	color: $body;
	font-family: #{$fonts};
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	//text-shadow: 0 1px 0px #fcfae0;
}

hr{
	margin: 0 auto;
	width:95%;
	height:1px;
	border-left:none;
	border-right: none;
	border-top: 1px solid $body;
	border-bottom:1px solid $body;
}

//=========================//
//  End Basic Styles       //
//  Begin Page Styles      //
//=========================//

#sunrise{
	width:100%;
	float:left;
	background:url("#{$images}/sunrise.jpg") repeat-x 0% 100%;
	position:absolute;
	top:0;
	left:0;
	height:160px;
}

body{
	background: url('#{$images}/back.jpg') repeat;
	-webkit-font-smoothing: subpixel-antialiased;
}

header{

}
#logo{
	background: url('#{$images}/logo.png') no-repeat top center;
	height:240px;
	text-indent: -9991px;
	margin-top:30px;
}

#banner{
	background: url('#{$images}/banner.png') no-repeat center center;
	height: 70px;
	font-weight: 900;
	font-size: 34px;
	text-align:center;
	padding-top: 18px;
	text-shadow: 0 1px #f0f0f0;
	position: relative;
	top:165px;
}

.intro{
	padding-top:25px;
}

.calltoday{
	margin-top:20px;
	width:100%;
	text-align:center;
	float: left;
	font-weight:900;
	font-size: 20px;
	background: rgb(255, 255, 255);
	background: rgba(255 ,255 ,255, 0.5);
	border-radius: 5px;
	padding: 10px 0;
}

#letter{
	background: url("#{$images}/letter.png") no-repeat top left;
	height: 300px;
	margin-top:15px;   
    p{
    	font: 18px "Handlee";
    	padding: 15px 25px 0px 20px;	
    }
    #sue{
    	line-height:50px;
    	font-size:24px;
    }
}

#clipped{
	background: url("#{$images}/clipped.png") no-repeat;
	width:165px;
	height:170px;
	float:right;
	position: relative;
	bottom:75px;

}

#learnmore h2{
	position:relative;
	top:15px;
}

//
//Form Stuff
//

form input.input-text{
	width:200px;
	margin-left:10px;
	margin-bottom:17px;
	float:left;
	border-radius: 5px;
	border: 1px solid #e5ddaa;
	font-size:16px;
	height:24px;
	background-color: #f0f0f0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(240, 240, 240)), to(rgb(250, 250, 250)));
	background-image: -webkit-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
	background-image: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
	background-image: -o-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
	background-image: -ms-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
	background-image: linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#fafafa');
}

form textarea{
	@extend input.input-text; 
	width:418px;
	height:80px;
	color:#999;
	&:focus{
		color:#000;
	}
}

form label{
	display:none;
}

.lt-ie9 {
	form label{
		width:90px;
		display:block;
		float:left;
		margin-left:10px;
		
	}
	form input{
		width:100%;
		float:left;
	}
}
 

button{
	@extend .learnbutton;
	padding: 10px 10px;
	width:200px;
	font: 700 18px #{$fonts};
	color:white;
	text-shadow: 0 1px 0 #111;
	&:active{
		background-color: #519c1a;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(81, 156, 26)), to(rgb(106, 203, 37)));
		background-image: -webkit-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: -moz-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: -o-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: -ms-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25');
	}
	&:hover{
		cursor: pointer;
	}
}

#whyoasis{
	position:relative;
	bottom:40px;
}

#whyoasis ul li{
	background: url("#{$images}/check.jpg") no-repeat center left;
	padding-left: 55px;
}

.custombutton{
	text-align:center;
	a{
		padding: 7px 0;
		display: block;
		font-weight:600;
		color:white;
		font-size:14px;
		text-shadow: 0 1px 0px #111;
	}
}

.bluebutton{
	@extend .custombutton;
	border:1px solid #1174bf;
	box-shadow: 0 0 0px 1px #47aff9 inset;
	background-color: #1997fa;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(25, 151, 250)), to(rgb(17, 116, 190)));
	background-image: -webkit-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
	background-image: -moz-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
	background-image: -o-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
	background-image: -ms-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
	background-image: linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1997fa', EndColorStr='#1174be');
	&:active{
		background-color: #1275c0;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(18, 117, 192)), to(rgb(25, 150, 248)));
		background-image: -webkit-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
		background-image: -moz-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
		background-image: -o-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
		background-image: -ms-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
		background-image: linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1275c0', EndColorStr='#1996f8');
	}
}

#ragged{
	margin-top:20px;
	padding: 40px 0 20px 0;
	height:420px;
	p{
		font-size: 16px;
		line-height:22px;
	}
	.icon{
		width:110px;
		height:90px;
		margin:0 auto;
	}

	.half.icon{
		background: url("#{$images}/half.jpg") no-repeat center center;
	}

	.moon.icon{
		background: url("#{$images}/moon.jpg") no-repeat center center;
	}

	.sun.icon{
		background: url("#{$images}/sun.jpg") no-repeat center center;
	}

	h3{
		text-shadow:none;
	}
	h2{
		text-shadow: 0 1px #fff;
		text-align:center;
		margin-bottom:20px;
	}
}

.breakout{
	background: url("#{$images}/jagged.png") repeat-x top left;
	width:100%;
	margin-bottom:10px;
}

#threecol article p{
	font-size:16px;
	line-height:23px;
	font-weight:400;
}

#about{
	margin-top:20px;
	div p{
		font-size:14px;
	}
}

.learnbutton{
	@extend .custombutton;
	width:295px;
	margin-left:140px;
	border:1px solid #315e0b;
	box-shadow: 0 0 0 1px #8fda4c inset;
	background-color: #6bcd25;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(107, 205, 37)), to(rgb(81, 155, 26)));
	background-image: -webkit-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
	background-image: -moz-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
	background-image: -o-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
	background-image: -ms-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
	background-image: linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6bcd25', EndColorStr='#519b1a');
	a{
		font-weight:900;
		font-size:18px;
	}
	&:active{
		background-color: #519c1a;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(81, 156, 26)), to(rgb(106, 203, 37)));
		background-image: -webkit-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: -moz-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: -o-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: -ms-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		background-image: linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25');
	}
}

#polaroids{
	background:url("#{$images}/pictures.jpg") no-repeat;
	height:300px;
}

footer {
	width: 100%;
	float: left;
	background: rgb(1, 1, 1);
	background: rgba(1, 1, 1, 0.7);
	ul {
		padding: 10px 0;
		width: 940px;
		margin: 0 auto;
		li{
			color: #fff;
			font: 12px Merriweather, Georgia, Times New Roman, serif;
			display: inline;
			a{
				float:right;
				padding-right:20px;
				color:#ccc;
				text-decoration:underline;
			}
		}
	}
}

oasis.css

h2,h3,h4 {
    color: #333;
    font-family: Merriweather, Georgia, Times New Roman, serif;
    text-shadow: 0 2px #fbf9de
}

a:hover {
    color: #fff
}

h2 {
    font-size: 36px;
    font-weight: 900
}

h3 {
    font-weight: 800;
    font-size: 22px
}

h4 {
    font-size: 20px
}

p {
    padding-top: 15px
}

p,div {
    color: #333;
    font-family: Merriweather, Georgia, Times New Roman, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px
}

hr {
    margin: 0 auto;
    width: 95%;
    height: 1px;
    border-left: none;
    border-right: none;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333
}

#sunrise {
    width: 100%;
    float: left;
    background: url("../../img/oasis/sunrise.jpg") repeat-x 0% 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 160px
}

body {
    background: url("../../img/oasis/back.jpg") repeat;
    -webkit-font-smoothing: subpixel-antialiased
}

#logo {
    background: url("../../img/oasis/logo.png") no-repeat top center;
    height: 240px;
    text-indent: -9991px;
    margin-top: 30px
}

#banner {
    background: url("../../img/oasis/banner.png") no-repeat center center;
    height: 70px;
    font-weight: 900;
    font-size: 34px;
    text-align: center;
    padding-top: 18px;
    text-shadow: 0 1px #f0f0f0;
    position: relative;
    top: 165px
}

.intro {
    padding-top: 25px
}

.calltoday {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    float: left;
    font-weight: 900;
    font-size: 20px;
    background: #fff;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    padding: 10px 0
}

#letter {
    background: url("../../img/oasis/letter.png") no-repeat top left;
    height: 300px;
    margin-top: 15px
}

#letter p {
    font: 18px "Handlee";
    padding: 15px 25px 0px 20px
}

#letter #sue {
    line-height: 50px;
    font-size: 24px
}

#clipped {
    background: url("../../img/oasis/clipped.png") no-repeat;
    width: 165px;
    height: 170px;
    float: right;
    position: relative;
    bottom: 75px
}

#learnmore h2 {
    position: relative;
    top: 15px
}

form input.input-text,form textarea {
    width: 200px;
    margin-left: 10px;
    margin-bottom: 17px;
    float: left;
    border-radius: 5px;
    border: 1px solid #e5ddaa;
    font-size: 16px;
    height: 24px;
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#fafafa));
    background-image: -webkit-linear-gradient(top, #f0f0f0, #fafafa);
    background-image: -moz-linear-gradient(top, #f0f0f0, #fafafa);
    background-image: -o-linear-gradient(top, #f0f0f0, #fafafa);
    background-image: -ms-linear-gradient(top, #f0f0f0, #fafafa);
    background-image: linear-gradient(top, #f0f0f0, #fafafa);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#fafafa')
}

form textarea {
    width: 418px;
    height: 80px;
    color: #999
}

form textarea:focus {
    color: #000
}

form label {
    display: none
}

.lt-ie9 form label {
    width: 90px;
    display: block;
    float: left;
    margin-left: 10px
}

.lt-ie9 form input {
    width: 100%;
    float: left
}

button {
    padding: 10px 10px;
    width: 200px;
    font: 700 18px Merriweather, Georgia, Times New Roman, serif;
    color: white;
    text-shadow: 0 1px 0 #111
}

button:active {
    background-color: #519c1a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#519c1a), to(#6acb25));
    background-image: -webkit-linear-gradient(top, #519c1a, #6acb25);
    background-image: -moz-linear-gradient(top, #519c1a, #6acb25);
    background-image: -o-linear-gradient(top, #519c1a, #6acb25);
    background-image: -ms-linear-gradient(top, #519c1a, #6acb25);
    background-image: linear-gradient(top, #519c1a, #6acb25);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25')
}

button:hover {
    cursor: pointer
}

#whyoasis {
    position: relative;
    bottom: 40px
}

#whyoasis ul li {
    background: url("../../img/oasis/check.jpg") no-repeat center left;
    padding-left: 55px
}

.custombutton,.bluebutton,.learnbutton,button {
    text-align: center
}

.custombutton a,.bluebutton a,.learnbutton a,button a {
    padding: 7px 0;
    display: block;
    font-weight: 600;
    color: white;
    font-size: 14px;
    text-shadow: 0 1px 0px #111
}

.bluebutton {
    border: 1px solid #1174bf;
    box-shadow: 0 0 0px 1px #47aff9 inset;
    background-color: #1997fa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1997fa), to(#1174be));
    background-image: -webkit-linear-gradient(top, #1997fa, #1174be);
    background-image: -moz-linear-gradient(top, #1997fa, #1174be);
    background-image: -o-linear-gradient(top, #1997fa, #1174be);
    background-image: -ms-linear-gradient(top, #1997fa, #1174be);
    background-image: linear-gradient(top, #1997fa, #1174be);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1997fa', EndColorStr='#1174be')
}

.bluebutton:active {
    background-color: #1275c0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1275c0), to(#1996f8));
    background-image: -webkit-linear-gradient(top, #1275c0, #1996f8);
    background-image: -moz-linear-gradient(top, #1275c0, #1996f8);
    background-image: -o-linear-gradient(top, #1275c0, #1996f8);
    background-image: -ms-linear-gradient(top, #1275c0, #1996f8);
    background-image: linear-gradient(top, #1275c0, #1996f8);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1275c0', EndColorStr='#1996f8')
}

#ragged {
    margin-top: 20px;
    padding: 40px 0 20px 0;
    height: 420px
}

#ragged p {
    font-size: 16px;
    line-height: 22px
}

#ragged .icon {
    width: 110px;
    height: 90px;
    margin: 0 auto
}

#ragged .half.icon {
    background: url("../../img/oasis/half.jpg") no-repeat center center
}

#ragged .moon.icon {
    background: url("../../img/oasis/moon.jpg") no-repeat center center
}

#ragged .sun.icon {
    background: url("../../img/oasis/sun.jpg") no-repeat center center
}

#ragged h3 {
    text-shadow: none
}

#ragged h2 {
    text-shadow: 0 1px #fff;
    text-align: center;
    margin-bottom: 20px
}

.breakout {
    background: url("../../img/oasis/jagged.png") repeat-x top left;
    width: 100%;
    margin-bottom: 10px
}

#threecol article p {
    font-size: 16px;
    line-height: 23px;
    font-weight: 400
}

#about {
    margin-top: 20px
}

#about div p {
    font-size: 14px
}

.learnbutton,button {
    width: 295px;
    margin-left: 140px;
    border: 1px solid #315e0b;
    box-shadow: 0 0 0 1px #8fda4c inset;
    background-color: #6bcd25;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6bcd25), to(#519b1a));
    background-image: -webkit-linear-gradient(top, #6bcd25, #519b1a);
    background-image: -moz-linear-gradient(top, #6bcd25, #519b1a);
    background-image: -o-linear-gradient(top, #6bcd25, #519b1a);
    background-image: -ms-linear-gradient(top, #6bcd25, #519b1a);
    background-image: linear-gradient(top, #6bcd25, #519b1a);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6bcd25', EndColorStr='#519b1a')
}

.learnbutton a,button a {
    font-weight: 900;
    font-size: 18px
}

.learnbutton:active,button:active {
    background-color: #519c1a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#519c1a), to(#6acb25));
    background-image: -webkit-linear-gradient(top, #519c1a, #6acb25);
    background-image: -moz-linear-gradient(top, #519c1a, #6acb25);
    background-image: -o-linear-gradient(top, #519c1a, #6acb25);
    background-image: -ms-linear-gradient(top, #519c1a, #6acb25);
    background-image: linear-gradient(top, #519c1a, #6acb25);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25')
}

#polaroids {
    background: url("../../img/oasis/pictures.jpg") no-repeat;
    height: 300px
}

footer {
    width: 100%;
    float: left;
    background: #010101;
    background: rgba(1,1,1,0.7)
}

footer ul {
    padding: 10px 0;
    width: 940px;
    margin: 0 auto
}

footer ul li {
    color: #fff;
    font: 12px Merriweather, Georgia, Times New Roman, serif;
    display: inline
}

footer ul li a {
    float: right;
    padding-right: 20px;
    color: #ccc;
    text-decoration: underline
}