/* CSS Document */
html {overflow:auto}

.trailframe{
float:right;
width: 730px;
background-color: #657159;
}

.infoframe{
float:right;
width: 730px;
background-color: #657159;
color:white;}

.trailcontent{
float:left;
margin-left: 10px;
display:inline;
border: 12px solid #b1b6a6;
border: 12px solid #b1b6a6;
width: 666px;
background-color:#e9eee8 ;
color: #006600;

}

#menu{float:left; width: 150px; padding: 0 22px 0 22px}

#cover{
margin: 0 auto;
padding-bottom: 4px;
height: 1%;
width: 925px;
border-left: 1px solid white;
border-right: 1px solid white;
background-color: #657159;
text-align: center;
overflow:hidden;
}

body{
background-color: #4c5739;
text-align: center;
margin: 15px auto;
padding:0;
font-size:15px;
text-align:justify;
line-height: 130%;
color: white;
font-family:Arial, Helvetica, sans-serif;
}

a{text-decoration:none; color:#FFFFCC}
a:hover{text-decoration:underline; color:white}

.left{float:left}
.right{float:right}
.center {text-align:center; margin:0 auto}


/*Header*/

#topframe{
margin: 0 auto;
width: 925px;
height: 70px;
border-left: 1px solid white;
border-right: 1px solid white;
background-color: #657159;
}

#topcorner{
width: 925px;
height: 5px; 
background: url(images/common_image/dot.gif) 0 0 repeat-x;
background-color: #657159;
}

#tl{float:left; position:relative; left:-1px}
#tr{float:right; position:relative; right:-1px}

#oasistrek-logo{float: left; padding: 12px 0 0 35px;}
#oasistrek-logo img{border: 0}


#mainbutton{float: right; padding: 10px 10px 0 0;}
#mainbutton img {border:none; padding: 2px 0 0 20px}

/*Footer*/
#bottomframe{
margin: 0 auto;
width: 925px;
height: 14px;
background: url(images/common_image/dot.gif) 0 100% repeat-x;
background-color: #657159;
border-left: 1px solid white;
border-right: 1px solid white;
}

#bottomframe2{
margin: 0 auto;
width: 925px;
height: 26px;
background: url(images/common_image/dot.gif) 0 100% repeat-x;
border-left: 1px solid white;
border-right: 1px solid white;
background-color: #657159;
}

#bottomcorner{
width: 925px;
height: 5px;
padding-top:1px;
background-color: #657159;
}

#counter{width: 870px; margin: 0 auto; padding-top: 6px}

#bl{float:left;position:relative; left: -1px; top: 4px}
#bl2{float:left;position:relative; left: -1px; top: 15px}
#br{float:right; position:relative; right:-1px; top: 4px}
#br2{float:right; position:relative; right:-1px; top: 15px}

.coverleft {float:left; width: 210px; margin:5px 25px 5px 30px; text-align:left}
.coverright {float:right; width: 650px; margin:5px ; text-align:left}
.coverright span{float:left; padding-left:25px }

/*Green Lines*/
.green{background-color: white; height: 9px;}
.green2{background-color: #bfd597; height: 7px; }
.green3{background-color: #89a35c; height: 7px;}
.green4{background-color: #657159; height: 10px;}

.icon {position:absolute; bottom: 0; right: 240px}

/*Trail Buttons*/
#trailbutton{width: 870px; margin: 12px auto}
#trailbga{width: 450px; height: 122px; margin: 0 auto; background: url(images/common_image/trail_bga.jpg)}
#trailbgb{width: 720px; height: 70px; margin:0 auto; }
ul.bgb {list-style-type: none; margin: 0; padding: 0;}
ul.bgb li {display: inline; margin: 0; padding: 0;}

li.sk a{background-image:  url(images/common_image/sk.jpg); width: 90px; height: 70px; display:inline-block;}
li.ne a{background-image:  url(images/common_image/ne.jpg); width: 90px; height: 70px; display:inline-block;}
li.kl a{background-image:  url(images/common_image/kl.jpg); width: 90px; height: 70px; display:inline-block;}
li.nw a{background-image:  url(images/common_image/nw.jpg); width: 90px; height: 70px; display:inline-block;}
li.out a{background-image:  url(images/common_image/out.jpg); width: 90px; height: 70px; display:inline-block;}
li.ct a {background-image:  url(images/common_image/mt.jpg); width: 90px; height: 70px; display:inline-block;}
li.hk a {background-image:  url(images/common_image/hk.jpg); width: 90px; height: 70px; display:inline-block;}
li.lt a {background-image:  url(images/common_image/lt.jpg); width: 90px; height: 70px;  display:inline-block;}

li.sk a:hover, li.ne a:hover, li.kl a:hover,li.nw a:hover,li.out a:hover, li.ct a:hover, li.hk a:hover, li.lt a:hover {background-position: 0 -70px}

#trailbgc{width: 673px; height: 31px; margin: 0 auto; padding-left: 10px}
#trailbgd{width: 450px; height: 137px; margin: 0 auto; background: url(images/common_image/trail_bgd.jpg)}

.button {width: 860px; margin: 0 auto; padding:20px;}
.button img{border: 1px solid white; margin: 5px;}

/*Long Trail*/
#ltrailbga{width: 357px; height: 116px; margin: 0 0 0 280px; background: url(images/common_image/longtrail_a.gif)}
#ltrailbgb{width: 590px; height: 66px; margin:0 auto; }
#ltrailbgc{width: 388px; height: 157px; margin: 0 0 0 205px; background: url(images/common_image/longtrail_c.gif)}

ul.lbgb {list-style-type: none; margin: 0; padding: 0;}
ul.lbgb li {display: inline; margin: 0; padding: 0;}

li.mt a{background-image:  url(images/common_image/m_trail.gif); width: 172px; height: 66px; display:inline-block;}
li.wt a{background-image:  url(images/common_image/w_trail_t.gif); width: 147px; height: 66px; display:inline-block;}
li.lat a{background-image:  url(images/common_image/l_trail_t.gif); width: 133px; height: 66px; display:inline-block;}
li.ht a{background-image:  url(images/common_image/h_trail_t.gif); width: 138px; height: 66px; display:inline-block;}

li.mt a:hover, li.wt a:hover, li.lat a:hover,li.ht a:hover {background-position: 0 -66px}

.longtrail {
margin: 0 auto;
width: 620px; 
border: 2px solid #ccc; 
border-collapse:collapse;
font-size: 13px;
color: #666;
line-height: 125%;
}

.longtrail td{border: 2px solid #ccc; padding: 3px; line-height: 140%; text-align:left}

td.long {background-color: #7A9CB8; color:white; text-align: center}


/*Cover*/


/*Trail*/
#trail{
clear:both;
margin: 0 auto;
width: 925px;
height: 33px;
position:relative;
border-left: 1px solid white;
border-right: 1px solid white;
background-color: #657159;
}

#trail2{
clear:both;
margin: 0 auto;
width: 925px;
height: 17px;
border-left: 1px solid white;
border-right: 1px solid white;
background-color: #657159;
position: relative
}

#trailmenu{
margin: 0 auto;
width: 824px;
border: 1px solid white;
background-color: #657159;
}

/*Trail Content*/
#cover .grey{
}

.gbframe{
float:right;
width: 925px;
background-color: #657159;
}

.trailcontent a:link{color: #5c88ac; text: decoration:none}
.trailcontent a:hover{color: green;}
.trailcontent a:visited{color: #5c88ac;}

.name{
width: 620px;
margin: 25px auto 15px auto;
text-align:justify;}
.name img{vertical-align:text-bottom}

.name h1{font-size: 15px; font-weight:normal}

.name p{text-indent: 20px;}

.intro{
width: 620px;
margin: 15px auto;
text-align:justify;}

.intro img{vertical-align: text-bottom}

.route{ margin: 10px auto; text-align:justify; display:inline}

.route img{padding:0 10px; vertical-align: middle; border: 0}

#remark {width: 600px; 
border-top: 1px solid #b13a3a  ; ; border-bottom: 1px solid #b13a3a ;
background: #f0dddd ; color: #666; margin: 10px auto 0 auto; padding:1px 10px}

.trailcontent .photoh1, .trailcontent .photov1, 
.trailcontent .photoh2, .trailcontent .photov2, 
.trailcontent .photom1, .trailcontent .photom2,
.trailcontent .photohh1, .trailcontent .photohh2 
{
clear:both;
width: 615px;
margin: 20px auto 0 auto;
border-right: 5px solid white;
border-top: 5px solid white;
background-color: white;
}

.photoh1 {height: 155px;}
.photoh2 {height: 138px;}
.photohh1 {height: 310px;}
.photohh2 {height: 276px;}
.photov1 {height: 272px;}
.photov2 {height: 305px;}
.photom1 {height: 427px;}
.photom2 {height: 443px;}

.m{width: 205px; float: left}

.photoh1 img, .photov1 img, .photoh2 img, .photov2 img,
.photohh1 img, .photohh2 img, .m img 
{padding-left: 5px; padding-bottom: 5px; display: inline}

.imgteaser, .imgteaser2  {float: left; position: relative;}
.imgteaser .desc, .imgteaser2 .desc{display: none;}
.imgteaser:hover .desc{
	display: block;
	font-size: 12px;
	background: #111;
	filter:alpha(opacity=65);
	opacity:.65;
	color: #fff;
	position: absolute;
	bottom: 5px;
	left: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	width: 200px;
	border-top: 1px solid #999;
	text-align:center;
}
.photop {
clear:both;
width: 610px;
height: 340px;
padding: 5px;
margin: 20px auto 0 auto;
background-color: white;
}

.imgteaser2:hover .desc{
	display: inline;
	font-size: 12px;
	background: #111;
	filter:alpha(opacity=65);
	opacity:.65;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	padding-top: 1px;
	padding-bottom: 1px;
	width: 610px;
	border-top: 1px solid #999;
	text-align:center;
	z-index:1
}

.c400 {float:left; width: 380px; padding: 15px; text-align:justify}

.c400left {float:left; width:380px; padding: 5px 15px;text-align:justify;margin-top: -155px}

.c200 {float:left; width:190px; padding: 5px;text-align:justify}

.c200left {float:left; width:190px; padding: 5px;text-align:justify;margin-top: -155px}

.c200right {float:right; width:190px; padding: 5px;text-align:justify;}


.distance, .transport {
margin: 0 auto;
width: 620px; 
border: 2px solid #ccc; 
border-collapse:collapse;
background-color: #D9E4E6;
font-size: 13px;
color: #666;
line-height: 125%;
}

.distance td, .transport td{border: 2px solid #ccc; padding: 3px; line-height: 140%}

td.corner {background-image:url(images/content_images/corner.gif); background-position:right top; background-repeat:no-repeat}
.trans {margin: 20px auto 0 auto; width: 620px; height: 22px; padding-bottom: 1px}
.trans img, .info img {float: left; padding-right: 10px}
.star  {height: 21px}
.star img{float: left; padding-right: 4px; }
tr.type {background-color: #7A9CB8; color:white}

.info
{clear: both; width: 620px; margin: 15px auto 0 auto; text-align: justify;}
.info ul {margin-bottom: 0}
.info ul li{margin-left:40px;}

.ref {margin-left: -20px; list-style:none}

.info p{text-indent: 30px; text-align: justify; text-justify: inter-ideograph }

/*Menu.htm*/


.menubutton, .menubutton2, .progressbutton  {width: 152px; margin: 0 auto;}
.menubutton img{margin-bottom:2px; border: 1px solid white}
.menubutton2 img{margin-bottom:2px; border: 0}
.progressbutton img{margin-bottom:2px; border: 1px solid #798170}

.longtrailb img {margin-left:4px}
.progressbutton2 img{margin-left:4px; border: 1px solid #798170}


/* CONTACT US */

form.a {
	width: 496px;
	background: #657159;
	color: #333;
	border: 10px solid #657159;
	text-align: left;
	margin: 0 auto;
}
label {
	clear: left;
	float: left;
	width: 100px;
	margin: 4px 0 10px 0;
	color:  white;
	font-size: 15px
}
fieldset {
	border: 0;
}
legend {
	display: none;
}
input, select, textarea {
	float: left;
	margin-bottom: 10px;
	width: 340px;
	background: #e8e7e7;
	color: #333;
	border: 2px solid #aaa;
	font: 100% "Arial", "Verdana", "Tahoma", sans-serif;
}
input.inputbutton {
	clear: both;
	float: none;
	display: block;
	margin:20px 0 0 100px;
	width: 80px;
	cursor: hand;
	cursor: pointer;
	color: #444;
	font-size: 15px
}

/*Pop-up*/

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 10;
left: 0px; /*position where enlarged image should offset horizontally */
}

/* PROFILE*/
#profile{width:554px; margin: 0 auto; padding: 15px; background-image:url(images/common_image/trial_bg.jpg); background-repeat:no-repeat; text-align: justify; font-size: 13px}

.others{width: 650px; margin: 0 auto; padding: 15px; text-align:justify;}
.others .guide img {vertical-align: middle; padding: 8px 0}
.others img.dir {margin: 0 auto; padding:0}
.others p{text-align:justify;}
	
/*Corners*/
.t {background: url(images/common_image/dot.gif) 0 0 repeat-x;}
.b {background: url(images/common_image/dot.gif) 0 100% repeat-x}
.l {background: url(images/common_image/dot.gif) 0 0 repeat-y}
.r {background: url(images/common_image/dot.gif) 100% 0 repeat-y}
.bl {background: url(images/common_image/bottomleft2.gif) 0 100% no-repeat}
.br {background: url(images/common_image/bottomright2.gif) 100% 100% no-repeat}
.tl {background: url(images/common_image/topleft2.gif) 0 0 no-repeat}
.tr {background: url(images/common_image/topright2.gif) 100% 0 no-repeat; padding:10px} 



/*Blog*/
.tr p {padding: 10px; text-align:justify;}
.title {float:left; padding-left: 10px}
.title img{vertical-align: middle}
.date {float:right; padding-right: 10px}

/*Diary*/
#diary{
margin: 0 auto;
width: 620px; 
border-collapse:collapse;
font-size: 15px;
text-align:center
}

#diary td{border-bottom: 2px dotted #ccc; padding: 8px;}
#diary img{vertical-align: middle}
	
/*Summary*/
#summary{
margin: 0 auto;
width: 620px; 
border-collapse:collapse;
font-size: 15px;
line-height: 115%;
text-align:left;
}

#summary td{border-bottom: 2px dotted #ccc; padding: 2px}
#summary img{padding-left: 5px}
	
/*Links*/
.links{
margin: 0 auto;
width: 620px; 
border-collapse:collapse;
font-size: 15px;
line-height: 150%;
text-align:center
}

/*Wallpaper*/
.wall {float:left; width: 200px; padding: 8px; margin: 0 auto; text-align:center}
.wall img { border:1px solid white}	
.wall div {text-align:center; font-size: 13px; margin: 0 auto}

/*Timetable*/
.timetable{
margin: 0 auto;
width: 700px; 
border: 2px solid #ccc; 
border-collapse:collapse;
color: white;
line-height: 125%;
}

.timetable td{border: 2px solid #ccc; padding: 2px}

tr.timetable2 {color: #006600; line-height: 180%; background-color: #FFFFCC}

tr.timetable3 {line-height:180%;}

td.timetable4, tr.timetable4 {background-color: #5C7E5A}

/*Facebook*/
.fan_box a:hover{
  text-decoration: none;
}
.fan_box .full_widget{
  height: 200px;
  border: 0 !important;
  background: none !important;
  position: relative;
}
.fan_box .connect_top{
  background: none !important;
  padding: 0 !important;
}
.profileimage img,{
  display: none;
}
.fan_box .connect_action{
  padding: 0 !important;
}
.fan_box .connections{
  padding: 0 !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #666;
}
span.total{
  color: #FF6600;
  font-weight: bold;
}
.fan_box .connections .connections_grid {
  padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
  font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  font-weight: normal;
  color: #666 !important;
  padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

.like {float:left; margin: 14px 0 10px 24px}

.subscribe {clear:both; margin: 20px 0 0 0}

.logo {clear: both; margin: 20px 0 30px 0}

/* MAP */


#ce {float: right; width: 70px; padding:5px; margin: 10px 20px 0 24px}
#ce img {margin-top: 1px; border:none}

/* SUBSCRIPTION */
form.sub {
	width: 320px;
	color: #333;
	text-align: left;
	margin: 0 auto;
}
label.sub {
	clear: left;
	float: left;
	width: 50px;
}

input.sub, select.sub, textarea.sub {
	float: left;
	width: 180px;
	height:20px;
	background: #ccc;
	color: #333;
	border: 2px solid #aaa;
	font: 100% "Arial", "Verdana", "Tahoma", sans-serif;
}
input.subbutton {
	float: left;
	margin-left:10px;
	width: 60;
	height:24px;
	padding-bottom:2px;
	cursor: hand;
	cursor: pointer;
	background: #70975e;
	color: white
}

.subtext {font-size:13px; color:#0099cc}
.subbutton {width: 60px; display: inline; border:2px solid white;
padding: 1px 4px; background:#70975e; color:white;text-align: center}
.subbutton a:link, .subbutton a:hover {text-decoration:none; color:white}