/* Used on all pages except the cover */

body {
	font: 13px/17px "Trebuchet MS", verdana, arial, sans-serif;
	text-align: center;
	background: black url(../images/page-backgroundh.gif) top center repeat-y;
}

* {
	margin: 0;
	padding: 0;
}


#container {
	margin: 0 auto 0 auto;
	width: 896px;
	height: 888px;
	background: rgb(60%,60%,60%) url(../images/page-background.jpg) top center repeat-x;
}

/* Header area for the front page */
#header {
	margin: 0 auto 0 auto;
	width: 100%;
	height: 240px;
	background: url(../images/intro-header.jpg) 50% 17px no-repeat;
	position: relative;
	font: bold 10px/13px arial, verdana, sans-serif;
  	color: rgb(55%,55%,55%);
}

#header #mblick a {
	width: 349px;
	height: 33px;
	position: absolute;
	display: block;
	top: 72px;
	left: 94px;
	background: url(../images/intro-mblick-hover.jpg) -500px 0px no-repeat;
}
#header #mblick a:hover {
	background: url(../images/intro-mblick-hover.jpg) top center no-repeat;
}

#header #chalritz a {
	width: 83px;
	height: 33px;
	position: absolute;
	display: block;
	top: 72px;
	left: 716px;
	background: url(../images/intro-ritz-hover.jpg) -500px 0px no-repeat;
}
#header #chalritz a:hover {
	background: url(../images/intro-ritz-hover.jpg) top center no-repeat;
}




#header #langbox {
	width: 230px;
	position: absolute;
	display: block;
	text-align: left;
	top: 210px;
	left: 100px;
	color: rgb(50%,50%,50%);
	letter-spacing: 0.12em;
}
#header #langbox a {
	text-decoration: none;
  	font-weight: normal;
  	color: rgb(65%,65%,65%);
}
#header #langbox a:hover {
	text-decoration: none;
	color: rgb(255,187,0);
}



#header #titlebox {
	width: 460px;
	position: absolute;
	display: block;
	top: 212px;
	left: 350px;
	text-align: right;
	letter-spacing: 1.4em;
  	color: rgb(60%,60%,60%);
}





/* The two main columns, that hold all the content */
#menuCol {
	margin: 15px 0 0 80px;
	width: 251px;
	float: left;
	display: inline;
	text-align: left;
  	color: rgb(60%,60%,60%);
}
#contentsCol {
	margin: 15px 0 0 0;
	width: 491px;
	float: left;
	display: inline;
	text-align: left;
  	color: rgb(60%,60%,60%);
	overflow: hidden;			/* Sovles a bug with IE where the contents were to wide... */
}


/* The main menu */
#menuCol #menubox {
	margin: 0 0 17px 0;
	width: 189px;
	float: left;
	display: inline;
	text-align: left;
	background: url(../images/menu-backg.gif) top left repeat-y;
	font: 12px/13px arial, verdana, sans-serif;
	letter-spacing: 0.04em;
}
#menubox #topbar {
	width: 189px;
	height: 28px;
	background: url(../images/menu-top.jpg) top left no-repeat;
}
#menubox #bottombar {
	width: 189px;
	height: 5px;
	background: url(../images/menu-bottom.jpg) top left no-repeat;
	clear: both;
}

#menubox .menuitem {
	margin: 0 0 2px 9px;
	width: 170px;
	height: 22px;
	float: left;
	display: inline;
	background: rgb(74,69,84) url(../images/triangles.gif) 151px -2px no-repeat;
	text-indent: 5px;
	line-height: 1.7em;
}
#menubox .menuitem#selected {
	background: rgb(74,69,84) url(../images/triangles.gif) 151px -24px no-repeat;
	color: rgb(255,187,0);
}
#menubox .menuitem#selectedOpen {
	background: rgb(74,69,84) url(../images/triangles.gif) 151px -48px no-repeat;
	color: rgb(255,187,0);
}
#menubox .menuitem a {
	width: 170px;
	height: 22px;
	display: block;
  	color: white;
	text-decoration: none;
}
#menubox .menuitem a:hover {
	color: rgb(255,187,0);
	text-decoration: none;
}

#menubox .submenuitem {
	margin: 0 0 2px 19px;
	width: 160px;
	height: 21px;
	float: left;
	display: inline;
	background: rgb(119,115,127) url(../images/submenu-end.gif) top left no-repeat;
	text-indent: 23px;
	line-height: 1.7em;
}
#menubox .submenuitem a {
	width: 160px;
	height: 21px;
	display: block;
	color: rgb(202,200,215);
	text-decoration: none;
}
#menubox .submenuitem a:hover {
	width: 160px;
	height: 21px;
	display: block;
	color: rgb(255,187,0);
	text-decoration: none;
}
#menubox .submenuitem#subselected {
	background: rgb(119,115,127) url(../images/submenu-end.gif) left bottom no-repeat;
	color: rgb(255,187,0);
}


/* --- Sidebar --- */
#menuCol .sidebox {
	margin: 0 0 17px 0;
	width: 242px;
	float: left;
	clear: both;
	display: inline;
	background: url(../images/sidebar-mid.gif) top left repeat-y;
	color: rgb(202,200,215);	
}
.sidebox .sbbottombar {
	width: 251px;
	height: 5px;
	background: url(../images/sidebar-bottom.gif) top left no-repeat;
	clear: both;
}
.sidebox .title {
	font: 11px/12px "Trebuchet MS", verdana, arial, sans-serif;
	color: white;
	display: inline;
	font-weight: bold;
}
.sidebox p {
	margin: 0 0 3px 12px;
	font: 11px/12px "Trebuchet MS", verdana, arial, sans-serif;
}
.sidebox p a {
	text-decoration: none;
	color: rgb(80%,80%,80%);
}
.sidebox p a:hover {
	text-decoration: none;
	color: orange;
}

/* Live Matterhorn Sidebar */
.sidebox #livehorntopbar {
	width: 242px;
	height: 27px;
	background: url(../images/top-live-horn.jpg) top left no-repeat;
}
.sidebox #livecam {
	margin: 4px 0 7px 10px;
	width: 220px;
	height: 85px;
	background: url("http://zermatt.ch/html/bergbahnen/webcams/kirche.jpg") -130px -90px no-repeat;
	border: 1px white solid;
}

/* News Sidebar */
.sidebox #newstopbar {
	width: 242px;
	height: 27px;
	background: url(../images/top-news.jpg) top left no-repeat;
}



/* Contents Box */
#contentsCol h1 {
	margin: 0 0 0 32px;
	color: white;
	font: bold 20px/22px "Trebuchet MS", verdana, arial, sans-serif;
}

#contentsCol #cctopbar {
	width: 491px;
	height: 37px;
	background: url(../images/cb-top.jpg) center center no-repeat;
}
#cctopbar #tbleft {
	width: 19px;
	height: 37px;
	float: left;
	display: inline;
	background: url(../images/cb-topleft.gif) top left no-repeat;
}
#cctopbar #tbright {
	width: 19px;
	height: 37px;
	float: right;
	display: inline;
	background: url(../images/cb-topright.gif) top left no-repeat;
}
#contentsCol #ccbottombar {
	width: 491px;
	height: 22px;
	background: url(../images/cb-bottom.gif) center center no-repeat;
}
#ccbottombar #bbleft {
	width: 19px;
	height: 22px;
	float: left;
	display: inline;
	background: url(../images/cb-bottomleft.gif) top left no-repeat;
}
#ccbottombar #bbright {
	width: 19px;
	height: 22px;
	float: right;
	display: inline;
	background: url(../images/cb-bottomright.gif) top left no-repeat;
}

#contentsCol #midsectionblend {
	width: 100%;
	height: 100%;
	font: 12px/1.3em "Trebuchet MS", verdana, arial, sans-serif;
	background: rgb(185,185,191) url(../images/cb-backblend.jpg) top left repeat-x;
	color: black;
}
#midsectionblend #midsection {
	width: 100%;
	height: 100%;
	font: 12px/1.3em "Trebuchet MS", verdana, arial, sans-serif;
	background: url(../images/cb-mid.gif) top left repeat-y;
	color: black;
}
#midsection p {
	margin: 0 10px 5px 10px;
}



#midsection .textbox {
	margin: 0 0 0 32px;
	padding: 10px 0 10px 0;
	width: 424px;
	background-color: rgb(213,212,216);
	border: 1px rgb(60%,60%,60%) solid;
}
.textbox img {
	margin: 0 10px 5px 10px;
	float: right;
	display: inline;
	border: 1px black solid;
	
}



.centerbox {
	margin: 0 auto 0 auto;
	text-align: center;
}

#contentsCol .spacer {
	height: 5px;
	width: 414px;
}
#contentsCol .bigspacer {
	height: 15px;
	width: 414px;
	clear: both;
}
#midsection #startbox {
	margin: 0 0 0 32px;
	padding: 10px 0 10px 0;
	width: 424px;
	background-color: rgb(170,168,175);
	border: 1px rgb(60%,60%,60%) solid;
	text-align: center;
	position: relative;
}

#startbox #btnmblick {
	margin: 0 auto 0 auto;
	width: 276px;
	height: 86px;
	background: url(../images/welcome-mblick.gif) 0px -87px no-repeat;
}
#btnmblick a {
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/welcome-mblick.gif) left top no-repeat;
}
#btnmblick a:hover {
	background: none;
}

#startbox #btnritz {
	margin: 0 auto 0 auto;
	width: 276px;
	height: 86px;
	background: url(../images/welcome-ritz.gif) 0px -87px no-repeat;
}
#btnritz a {
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/welcome-ritz.gif) left top no-repeat;
}
#btnritz a:hover {
	background: none;
}


#startbox #ornament {
	height: 130px;
	width: 133px;
	position: absolute;
	display: block;
	top: 155px;
	left: 369px;
	background: url(../images/ornament-wood.gif) 0px 0px no-repeat;
	overflow: visible;
}

.textboxwoodleft {
	margin: 0 0 0 32px;
	padding: 10px 0 10px 0;
	width: 424px;
	border: 1px rgb(60%,60%,60%) solid;
	background: rgb(213,212,216) url(../images/ornament-wood-backg.jpg) -10% 110% no-repeat;
}


/* Picture Gallery */
#thumbbox {
	margin: 0 0 0 32px;
	width: 100%;
}
.thumb {
	margin: 10px 5px 0 0;
	float: left;
	display: inline;
	width: 103px;
	height: 70px;
	background-color: white;
	text-align: center;
}
.thumb img{
	margin: 3px auto 0 auto;
	width: 95px;
	height: 62px;
	border: 1px black solid;
}
.thumboverview {
	margin: 10px 5px 0 0;
	float: left;
	display: inline;
	text-align: center;
}
.thumboverview .thumb {
	margin: 0 auto 3px auto;
	float: none;
	display: block;
	text-align: center;
}
.thumboverview p {
	clear: both;
	text-align: center;
}
#iframebox {
	margin: 0 0 0 32px;
	width: 424px;
	height: 235px;
	background-color: rgb(213,212,216);
	border: 1px rgb(60%,60%,60%) solid;
}
#iframe {
	width: 99%;
	height: 99%;
}

/* Apartment Overview */
#aptbox {
	margin: 0 0 0 32px;
	width: 424px;
	height: 200px;
	border: 1px red solid;
}
#aptbox .apt {
	margin: 10px 5px 0 0;
	float: left;
	display: inline;
	width: 103px;
	height: 70px;
	background-color: white;
	text-align: center;
}


/* Footer */
#footerbox {
	margin: 35px 0 0 0;
	font: 11px/1.2em "Trebuchet MS", verdana, arial, sans-serif;
	color: rgb(30%,30%,30%);
	float: left;
	clear: both;
	width: 893px;
}
#footerbox a {
	color: white;
	text-decoration: none;
}
#footerbox a:hover {
	color: rgb(255,187,0);
	text-decoration: underline;
}
#copyright {
	margin: 5px 0 15px 0;
	font: 10px/1.5em "Trebuchet MS", verdana, arial, sans-serif;
	float: left;
	clear: both;
	width: 893px;
	color: rgb(30%,30%,30%);
}
#copyright a {
	color: rgb(20%,20%,20%);
	text-decoration: none;
}
#copyright a:hover {
	color: rgb(20%,20%,20%);
	text-decoration: underline;
}