* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
}

body {
  background: #101111 url('img/bg.jpg') no-repeat 50% 30%;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 11px;
  line-height: 16px;
  color: #000;
  padding: 40px 0 40px 0;
}

#container {
  position: relative;
  background: #fff;
  width: 960px;
  min-height: 400px;
  margin: 0 auto 0 auto;
  padding: 50px 0 40px 0;
  text-align: left;
}

#container.hidden {
  display: none;
}

#image-container {
  position: relative;
  background: #000 url('img/ajax-loader.gif') no-repeat 50% 300px;
  width: 960px;
  min-height: 600px;
  margin: 0 auto 0 auto;
  padding: 0 0 0 0;
  text-align: center;
  overflow: hidden;
}

#image-container.hidden {
  display: none;
}

#image-container img {
  width: 960px;
}

#image-text {
  background: url('img/kuvateksti.png');
  padding: 8px 140px 8px 15px;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  color: #fff;
  text-align: left;
  height: 16px;
  line-height: 16px;
}

#image-container h1 {
  position: absolute;
  top: 55px;
  left: 55px;
  background: url('img/header-h1-img.png') no-repeat;
  width: 248px;
  height: 42px;
}

#image-container a.close {
  position: absolute;
  top: 9px;
  right: 20px;
  background: url('img/close_img.png') no-repeat;
  width: 110px;
  height: 25px;
  cursor: pointer;
}

#image-container a.close:hover {
  opacity: 0.8;
}

#image-container p {
  margin: 0;
}

#header {
  position: relative;
  margin: 0 0 50px 0;
  padding: 10px 200px 0 55px;
}

#header h1 {
  background: url('img/header-h1.png') no-repeat;
  width: 241px;
  height: 35px;
  text-indent: -10000px;
  margin-bottom: 30px;
}

#header h2 {
  font-size: 35px;
  line-height: 45px;
}

#header a {
  display: block;
  height: 18px;
  cursor: pointer;
  text-indent: -10000px;
  overflow: hidden;
}

#header a.float {
  position: absolute;
  bottom: 8px;
  right: 60px;
}

#header a.read-more-about-me {
  width: 108px;
  background: url('img/read-more-about-me.png') no-repeat top right;
}

#header a.get-back-to-frontpage {
  width: 96px;
  background: url('img/get-back-to-frontpage.png') no-repeat top right;
}

#header a:hover {
  background-position: bottom right;
}

#news-filter {
  background: #eee;
  font-family: 'Arial', sans-serif;
  font-size: 11px;
  color: #9e9e9e;
  height: 32px;
  line-height: 32px;
  padding: 4px 56px 4px 56px;
}

#news-filter p, #news-filter a {
  float: left;
  margin: 0;
}

#news-filter p {
  font-weight: bold;
  margin-right: 25px;
}

#news-filter a {
  background: #fff url('img/selarrow.png') no-repeat 11px 50%;
  padding: 0 15px 0 26px;
  margin-right: 4px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
}

#news-filter a.disabled {
  background: #eee url('img/selcross.png') no-repeat 11px 50%;
}

#content {
  margin-top: -30px;
  padding: 0 56px 0 56px;
}

#content h1 {
  font-size: 35px;
  line-height: 45px;
  margin: 0;
}

#content p.date {
  font-family: 'Arial', sans-serif;
  font-size: 11px;
  color: #9e9e9e;
  margin: 0 0 50px 0;
}

#content p {
  width: 440px;
}

#thumbs {
  float: right;
  width: 340px;
}

#thumbs img {
  float: left;
  margin: 0 5px 5px 0;
  cursor: pointer;
}

#thumbs img:hover {
  /*opacity: 0.8;*/
}

#about-me {
  background: url('img/divider.png') no-repeat top;
  padding: 0 56px 0 56px;
}

#about-me img {
  float: left;
  margin: 10px 15px 5px -6px;
}

#about-me .column-left {
  float: left;
  width: 370px;
}

#about-me .column-right {
  float: right;
  width: 370px;
}

#about-me a {
  color: #03b0db;
  text-decoration: none;
}

#about-me a:hover {
  text-decoration: underline;
}

p {
  margin: 16px 0 16px 0;
}

blockquote {
  background: url('img/quote.png') no-repeat top left;
  margin: 22px 0 26px -30px;
  padding: 4px 0 0 30px;
  font-size: 20px;
  line-height: 26px;
  color: #a4a095;
}

blockquote span.author {
  display: block;
  font-size: 11px;
  color: #55534c;
}

span.author {
  font-variant: small-caps;
}

.clear {
  clear: both;
}


#news {
  position: relative;
  margin: 30px 56px 0 56px;
  height: 400px;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

#news-scoller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100000px;
}

.month {
  position: relative;
  width: 250px;
  float: left;
  margin-right: 50px;
  padding: 50px 0 0 0;
}

div.month.hidden {
  width: 0;
  margin-right: 0;
}

div.month.hidden * {
  display: none;
}

.month a {
  text-decoration: none;
}

.month h1 {
  background: #fff;
  position: absolute;
  top: 0;
  color: #888;
  border-top: 4px solid #eee;
  padding-top: 10px;
  font-size: 18px;
}

div.month.hidden h1 {
  display: block;
}

.month h2 {
  font-size: 17px;
  text-transform: uppercase;
  color: #aaa;
}

.month ul {
  margin: 15px 0 0 0;
  list-style-type: none;
}

.month li {
  position: relative;
  padding: 0 0 0 70px;
  clear: both;
  zoom: 1;
  height: 70px;
  overflow: hidden;
}

/*
.month li.news {
  padding: 15px 0 0 0;
  clear: both;
}
*/

.month img {
  position: absolute;
  margin: 0 0 0 -70px;
}

.month h3 {
  padding-top: 5px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #00b1dd;
}

.month li.projects h3, .month li.collections h3 {
  color: #67bc0c;
}

.month p {
  margin: 0;
  color: #9e9e9e;
}

.month a:hover h3 {
  color: #6ed4ff;
}

.month li.projects a:hover h3, .month li.collections a:hover h3 {
  color: #89ec1f;
}

#news-arrows {
  position: relative;
  margin: 0 15px 0 15px;
}

#news-arrows a {
  position: absolute;
  top: 38px;
  width: 28px;
  height: 28px;
  background: url('img/arrows.png') no-repeat;
  cursor: pointer;
}

#news-arrows a.disabled {
  opacity: 0.25;
  cursor: default;
}

#news-arrows a.left {
  left: 0;
  background-position: left bottom;
}

#news-arrows a.right {
  right: 0;
  background-position: right bottom;
}

#news-arrows a.left:hover {
  background-position: left top;
}

#news-arrows a.right:hover {
  background-position: right top;
}

a img {
  border: 0;
}