base.scss

base.scss

@import url(http://fonts.googleapis.com/css?family=Karla);

html {
  background:url("#{$img}/stucco.png");
  body {
    width:900px;
    margin:0 auto;
    color:$color;
  }
  a {
    &:link {
      color:#198DCD;
      text-decoration:none;
    }
    &:hover {
      text-decoration:underline;
    }
    &:visited {
      @extend :link;
    }
  }
}

#header {
  position:fixed;
  z-index:1000;
  width:900px;
  margin:0 auto;
  background:url("#{$img}/stucco.png");
  border-bottom:1px solid $color;
  ul#navi {
    @include clearfix;
    padding:0;
    margin:30px 5px -2px 420px;
    list-style:none;
  }
}
#navi {
  li {
    float:left;
    padding-right:10px;
    font-family:$web_font;
    font-size:26px;
    a {
      padding-top:13px;
      color:$color;
      text-decoration:none;
      &:link {
      
      }
      &:visited {
        color:$color;
      }
      &:hover {
        color:#198DCD;
        text-decoration:underline;
      }
      &:before {
        float:left;
        width:25px;
        height:25px;
        margin-right:3px;
        content:"";
        background:url("#{$img}/navi_icon.png") no-repeat left top;
      }
    }
    &.top a:before {
      background-position:0 0;
    }
    &.available a:before {
      background-position:-26px 0;
    }
    &.profile a:before {
      background-position:-51px 0;
    }
    &.contact a:before {
      background-position:-73px 0;
    }
  }
}

#footer {
  border-top:1px solid $color;
  padding:10px 0 20px;
  margin-bottom:160px;
  small#copyright {
    display:block;
    font-family:$web_font;
    font-size:14px;
    text-align:center;
    margin-bottom:30px;
  }
}

#contents {
  width:870px;
  padding:15px;
}

//index 
#index {
  h2 {
    font-family:$web_font;
    font-size:32px;
    font-weight:normal;
    margin:1em 0 0.75em;
    &:before {
      float:left;
      width:28px;
      height:33px;
      margin-right:5px;
      content:"";
      background:url("#{$img}/contents_icon.png") no-repeat;
    }
    span {
      font-family:$base_font;
      font-size:14px;
      padding-left:1.3em;
    }
  }
  #notice {
    display:none;
    width:563px;
    padding:5px;
    border:1px solid red;
    margin:62px auto 0;
    p {
      margin:0;
    }
    div {
      width:100%;
      text-align:right;
    }
  }
  #top {
    text-align:center;
    margin-bottom:55px;
    h1 {
      margin:0;
      padding:0;
      img {
        padding-top:130px;
      }
    }
    p.description {
      font-size:18px;
      padding:20px;
    }
  }
  #available {
    @include clearfix;
    margin-bottom:50px;
    h2:before {
      background-position:0 0; 
    }
    div {
      float:left;
      width:258px;
      height:200px;
      padding:15px;
      border:1px solid #FBFBFB;
      &.box {
        border:1px solid #aaa;
      }
      &.right {
        width:257px;
      }
    }
    h3 {
      border-left:5px solid $color;
      padding:5px 0 2px 0.5em;
    }
    p {
      line-height:1.48;
    }
  }
  #profile {
    @include clearfix;
    h2:before {
      background-position:-96px 0; 
    }
    img {
      display:block;
      float:left;
      width:270px;
      padding:9px;
      background:#fff;
      border:1px solid #ccc;
    }
    div {
      float:right;
      width:540px;
      margin-left:10px;
      *margin-left:5px;
      margin-right:15px;
      span {
        font-size:16px;
      }
      h3 {
        font-size:24px;
        font-weight:normal;
        margin:13px 0;
      }
      dl {
        margin-top:2.5em;
        margin-left:0;
        dt {
          font-size:16px;
          margin-bottom:0.7em;
          &:before {
            content:'- ';
          }
        }
        dd {
          margin-bottom:1.8em;
        }
      }
      ul {
        margin:0.5em 0.7em;
        padding:5px auto;
        li {
          line-height:1.33;
        }
      }
    }
  }
  #contact {
    h2:before {
      background-position:-48px 0;
    }
    #loader {
      display:none;
      position:relative;
      top:340px;
      left:200px;
      height:52px;
      width:100%;
      &.show {
        display:block !important;
      }
    }
    form {
      display:block;
      float:left;
      width:435px;
      position:related;
    }
    label {
      display:block;
      margin:0.5em 0;
      padding:0 2px;
    }
    input#email {
      @extend label;
      width:250px;
      margin:0.5em 0 0.8em;
      background:#f6f6f6;
      border:1px solid #aaa;
    }
    textarea {
      @extend input#email;
      width:430px;
      height:270px;
    }
    input#submit {
      display:block;
      margin-top:15px;
      margin-left:355px;
      font-size: 12px;
      color: #5c5c5c;
      padding: 3px 8px;
      background: -moz-linear-gradient(
      top,
      #ffffff 0%,
      #e0e0e0);
      background: -webkit-gradient(
      linear, left top, left bottom, 
      from(#ffffff),
      to(#e0e0e0));
      border-radius: 29px;
      -moz-border-radius: 29px;
      -webkit-border-radius: 29px;
      border: 1px solid #b8b8b8;
      -moz-box-shadow:
      0px 0px 0px rgba(000,000,000,0),
      inset 1px 1px 1px rgba(255,255,255,1);
      -webkit-box-shadow:
      0px 0px 0px rgba(000,000,000,0),
      inset 1px 1px 1px rgba(255,255,255,1);
      text-shadow:
      0px -1px 0px rgba(000,000,000,0.1),
      0px 1px 0px rgba(255,255,255,0.9);
      &:active {
        border:1px solid #666;
        background:#d0d0d0;
      }
    }
    dl {
      display:none;
      float:right;
      width:365px;
      margin:10px 45px 10px 10px;
      *margin:10px 22px 10px 5px;
      dd ul {
        margin:12px 5px;
        li {
          line-height:1.4;
          padding-bottom:0.6em;
        }
      }
    }
    margin-bottom:50px;
    @include clearfix;
  }
}

mixin.scss

/* 
Uility Settings 
author:yterjaima/e2esound.com
*/
@mixin clearfix {
	zoom:1;

	&:after {
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}
}

@mixin opacity($int) {
	filter: alpha(opacity=$int);
	-moz-opacity:$int/100;
	opacity:$int/100;
}

.clearfix {
  @include clearfix
}