@import "reset.css";
@import "typography.css";
@import "forms.css";

body {
	margin: 0;
	padding: 0;
	text-align:center;
}

a {
  text-decoration:none;
  color:#600;
}
a:hover {
  text-decoration:underline;
}
em {
  background:none;
}
h1, h2, h3, h4 {
  color:#600;
  text-transform:uppercase;
}

#splash {
  position:absolute;
  width:800px;
  height:350px;
  top:50%;
  left:50%;
  margin:-175px -400px;
}
#container {
  padding:50px;
}
#header {
  position:relative;
  height:170px;
}
#content {
  float:left;
  width:800px;
  text-align:left;
  margin:0 0 0 130px;
}

#navigation {
  list-style:none;
  padding:0;
  position:absolute;
  top:217px;
  left:-20px;
  text-transform:uppercase;
  text-align:right;
  font-size:1.5em;
}
#navigation li {
  margin:0 0 1px;
}
#navigation li a {
  color:#000;
}
#navigation li a:hover,
#navigation li a.selected {
  color:#600;
  text-decoration:none;
}

#container h1 {
  position:absolute;
  left:130px;
  height:170px;
  width:800px;
  padding:0;
  margin:0;
  background-repeat:no-repeat;
}
#container h1 span {
  display:none;
}

#home h1 {
  background-image:url('../images/layout/home.png');
}
#news h1 {
  background-image:url('../images/layout/news.png');
}
#about h1 {
  background-image:url('../images/layout/about.png');
}
#works h1 {
  background-image:url('../images/layout/works.png');
}
#gallery h1 {
  background-image:url('../images/layout/gallery.png');
}
#contact h1 {
  background-image:url('../images/layout/contact.png');
}

#about h3 {
  margin-top:50px;
}
#gallery h3 {
  clear:both;
}

.post {
  margin:0 0 50px;
}
h3 {
  margin-top:50px;
}

#news #content {
  width:360px;
}
#about #content {
  width:400px;
}
#works #content {
  width:450px;
}
#gallery #content {
  width:545px;
}
#about #content,
#contact #content {
  margin-top:50px;
}

#image {
  top:50px;
  position:absolute;
}
#news #image {
  left:600px;
}
#about #image {
  left:640px;
}
#works #image {
  left:670px;
}

ul.thumbnails {
  list-style:none;
  margin:25px 0 25px;
}
ul.thumbnails li {
  float:left;
}
ul.thumbnails li a {
  display:block;
  border:solid 3px #CCC;
  width:100px;
  height:100px;
  margin:0 25px 50px 0;
}
ul.thumbnails li a:hover {
  border:solid 3px #600;
}

#works .gallery {
  position:absolute;
  width:240px;
  top:270px;
  left:675px;
  text-align:left;
}
#works .gallery ul.thumbnails li a {
  margin:0 10px 10px 0;
}