@import "reset.css";
@import "typography.css";
@import "layout.css";
@import "view.css";
@import "form.css";
@import "calendarview.css";

body {
	background-attachment:fixed;
	overflow-x:hidden;
	font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
	font-size: 1em;
	line-height: 1.6;
	color:#fff;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat;
}

#wrapper{
	position:absolute;
	left: 25%;
	width:80em;
	margin-left: -15em;
	height: 100%;
}


img {border:none;}


#toplogo {
	width:255px;
	height:85px;
	position:absolute;
	top:0px;
	left:-40px;
}
.spacer {
	height:10px;
}
#topnav {
	background:url(../images/op60.png) repeat;
	height:175px;
	width:180px;
	position:absolute;
	top:222px;
	left:0px;
	z-index:10;
}

#aboutcontainer {
	background:url(../images/op60.png) repeat;
	height:650px;
	width:691px;
	position:absolute;
	top:155px;
	left:0px;
	z-index:10;
padding:20px;
}

#aboutcontainer ul {
list-style:none;
white-space: nowrap;
margin:0px;
padding:0px;
}

#aboutcontainer ul li{
display:block;
margin:5px;
padding:5px;
width:210px;
float:left;
text-align:center;
}

#aboutcontainter ul li:hover {
background-color:#000;
}
#aboutcontainer img {float:left; width:210px;}

#aboutcontainer h2 {
display:inline;

}

#topnav table {margin-left:20px; margin-top:7px;}
#topnav table tr td {padding-left:px;}

a.about {background:url(../images/about.png) repeat 0px 0px; width:113px; height:40px; display:block;}
a.about:hover {background:url(../images/about.png) repeat 0px -43px;}
a.about span{display:none;}

a.projects {background:url(../images/projects.png) repeat 0px 0px; width:152px; height:40px; display:block;}
a.projects:hover {background:url(../images/projects.png) repeat 0px -44px;}
a.projects span{display:none;}

a.contact {background:url(../images/contact.png) repeat 0px 0px; width:143px; height:40px; display:block;}
a.contact:hover {background:url(../images/contact.png) repeat 0px -42px;}
a.contact span{display:none;}

a.price {background:url(../images/prices.png) repeat 0px 0px; width:113px; height:40px; display:block;}
a.price:hover {background:url(../images/prices.png) repeat 0px -43px;}
a.price span{display:none;}


div.sc_menu_wrapper {
	position: absolute;
	height: 100%;
	/* Make bigger than a photo, because we need a place for a scroll-bar. */
	width: 800px;
	top: 0px;
	left: 280px;
	overflow: hidden;
	z-index: 0;
}


#content-scroll {
	position: absolute;
	height: 100%;
	width: 800px;
	top: 0px;
	left: 280px;
	overflow: hidden;
	z-index: 0;
}

#content-holder {
	padding: 15px 0;
}
#content-scroll a {
	display: block;
	margin-bottom: 15px;
	width: 740px;
	padding:10px;
	background-image: url(../images/op60.png);

}
#contact-form {
	position: absolute;
	height: 100%;
	width: 800px;
	top: 0px;
	left: 280px;
	overflow: hidden;
	z-index: 0;
}
.sc_menu img {
  display: block;
  border: none;
}

.sc_menu_wrapper .loading {
  position: absolute;
  top: 50%;
  left: 35%;

  margin: 0 auto;
  padding: 10px;

  width: 100px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;      

  text-align: center;
  color: #fff;
  border: 1px solid rgb(79, 79, 79);
  background: #1F1D1D;
}


/* Styling tooltip */
.sc_menu_tooltip {
  display: block;
  position: absolute;

  padding: 6px;
  font-size: 12px;
  color: #fff;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;      

  border: 1px solid rgb(79, 79, 79);
  background: rgb(0, 0, 0);
  /* Make background a bit transparent for browsers that support rgba */
  background: rgba(0, 0, 0, 0.5);
}
#palette {
	position: absolute;
	height: 231px;
	width: 190px;
	left: -5px;
	top: 420px;
	z-index: 0;
}