@charset "UTF-8";

a:link { color:#3366DD; text-decoration:underline }
a:visited { color:#3366DD; text-decoration:underline }
a:active { color:purple; text-decoration:underline }
a:hover { background-color: #CCFFFF;}
a:active {text-transform: bold;} 	

body { 
	margin:0px; 
	padding 0px; 
	background-color:#D2D4D9;  
	height:100;
	 }
	 
html { height:100% }
img { margin:0px; border-style:none }
img.floatleft{ float:left; margin:10px;}
img.floatright{ float:right; margin:10px;}
table { empty-cells:hide }
strong { font-weight:bold }

.style35 { font-family: "Trebuchet MS", verdana, Helvetica, sans-serif; color:#484848; font-size:13px; margin-left:0px; text-align:left }
.stylehaggis { font-family: "Trebuchet MS", verdana, Helvetica, sans-serif; color:#666; font-size:11px; margin-left:0px; text-align:left }
.stylehaggis2 { font-family: "Trebuchet MS", verdana, Helvetica, sans-serif; color:#666; font-size:13px; margin-left:0px; text-align:left }
.stylefooter { font-family: "Trebuchet MS", verdana, Helvetica, sans-serif; color:#666; font-size:11px; margin-left:0px; text-align:left }

div#pagediv {
	position:relative;
	margin: auto;
	width: 900px; 
	height: 660px;
  	top : 10px;
  	background-color:#FFF;
  	 /***
	 * Important Note on compatibility issue:
	 * =====================================
	 * The background image (repeating pattern) used in this container will not show
	 * in Mozilla Firefox and Opera if height is not set. This is because container the
	 * DIV will default to 0px height when there are <DIV>s nested in it. Therefore,
	 * the height in this CSS value is set using DHTML/Javascript in the template file.
	 *
	 * note : width of this jpg sets page X width - not the HTML or CSS! **/
	background: url(../pictures/body.jpg) top left repeat-y;  
	}
		
	/** just copy of the above for longer pages - 5 left pics length **/	
div#pagedivphotoindex {
	position:relative;
	margin: auto;
	width: 900px; 
	height: 2300px;
  	top : 10px;
  	background-color:#FFF;
	background: url(../pictures/body.jpg) top left repeat-y;  
	}

	/** just copy of the above for longer pages - 3 left pics length **/	
div#pagedivarticles {
	position:relative;
	margin: auto;
	width: 910px; 
	height: 1100px;
  	top : 10px;
  	background-color:#FFF;
	background: url(../pictures/body.jpg) top left repeat-y;  
	}

div#pagedivoffpiste {
	position:relative;
	margin: auto;
	width: 910px; 
	height: 1750px;
  	top : 10px;
  	background-color:#FFF;
	background: url(../pictures/body.jpg) top left repeat-y;  
	}

	/** just copy of the above for longer articles **/	
div#pagedivarticleslong {
	position:relative;
	margin: auto;
	width: 910px; 
	height: 1400px;
  	top : 10px;
  	background-color:#FFF;
	background: url(../pictures/body.jpg) top left repeat-y;  
	}
	
	
	/** just copy of the above for slide show / photo pages **/	
div#pagedivslide {
	position:relative;
	margin: auto;
	width: 900px; 
	height: 770px;
  	top : 10px;
  	background-color:#FFF;
	background: url(../pictures/body.jpg) top left repeat-y;  
	}		
						
div#bottomshadow {
	position:absolute;
  	left:0px; 
	width: 900px; 
	bottom:-20px;  
	overflow:visible 
	}		

	/***
	* Edit width & height of pagediv and bottomshadow together!
	***/
		
div#headphoto {
	position:absolute; 
	left:12px; 
	top:5px;  
	
	float: left}
	
div#headtext {
	position:absolute; 
	left:275px; 
	top:20px;  
	
	float: left
	}	
	
div#gif_dimensions {
	style="float: left;"
	width=90;
	height=12px;
	}
	
div#haggistrapgif {
	position: absolute; 
	left: 20px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}	
	
div#photos {
	position: absolute; 
	left: 130px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}
		
div#weather {
	position: absolute; 
	left: 240px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}
	
div#picofmonth {
	position: absolute; 
	left: 350px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}

/** use this for vertical pic of month **/	
div#picofmonth {
	position: absolute; 
	left: 350px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}
	
div#offpiste {
	position: absolute; 
	left: 460px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}
	
div#articles {
	position: absolute; 
	left: 570px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}
	
div#contact {
	position: absolute; 
	left: 680px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}
	
div#linkgif {
	position: absolute; 
	left: 790px; 
	top: 110px; 
	width: 100px; 
	height: 15px; 
	}
	
div#mainparagraph{
	position:absolute; 
	left:415px; 
	top:146px; 
	width:462px; 
	height:auto;  
	overflow:visible; 
	}
	
div#articleparagraph{
	position:absolute; 
	left:30px; 
	top:146px; 
	width:800px; 
	height:auto;  
	overflow:visible; 
	}	
	
div#leftphotoframe {
	position:absolute; 
	left:7px; 
	top:146px; 
	width:403px; 
	height:305px; 
	z-index:1; 
	}
	
div#leftphoto {
	position:absolute; 
	left:39px; 
	top:167px; 
	width:335px; 
	height:245px; 
	z-index:2; 
	}
	
div#photomonthframe {
	position:absolute; 
	left:135px; 
	top:450px;  
	z-index:1; 
	}

div#photomonthframe_vertical {
	position:absolute; 
	left:158px; 
	top:450px;  
	z-index:1; 
	}
		
div#photomonth {
	position:absolute; 
	left:148px; 
	top:458px; 
	z-index:2; 
	}

div#photomonth_vertical {
	position:absolute; 
	left:168px; 
	top:458px; 
	z-index:2; 
	}

div#photomonthtext {
	position:absolute; 
	left:180px; 
	top:570px;  
	z-index:1; 
	}

div#footer {
 	position:absolute; 
 	left:20px; 
 	top:630px; 
 	width:400px; 
 	height:18px;  
 	overflow:visible
 	}
 	
/*** CSS for the photo slide shows **/

div#slide_frame{
	position:absolute;		
	top: 175px;
	left: 110px;
	z-index: 1;
}

div#slide_box{
	position:absolute;	
	top: 195px;
	left: 140px;
	z-index: 2;
}
 	
div#slide_title{
	position:absolute;	
	top: 140px;
	left: 20px;
	z-index: 3;
}

div#slide_numbers{
	position:absolute;
	width: 580px;
	z-index: 4;
	top: 440px;
	left: 0px;
	text-align: center;
	}

div#slide_caption{
	font-style: verdana; 
	font-size: 14px;
	text-align: center;
	position:absolute;
	font: 10px verdana;
	width: 500px;
	top: 467px;
	left: 45px;
	z-index: 4;
}

div#slide_lbutton{
	position:absolute;
	top: 465px;
	left: 0px;
	z-index: 4;
}

div#slide_rbutton{
	position:absolute;
	top: 465px;
	left: 570px;
	z-index: 4;
}

div#slide_pic{	
	text-align: center;
	position:absolute;
	font: 10px verdana;
	width: 590px;
	top: 0px;
	left: 0px;
	z-index: 4;
}

div#slide_back{	
	text-align: center;
	position:absolute;
	font: 10px verdana;
	width: 590px;
	top: 700px;
	left: 510px;
	z-index: 4;
}

div#slide_panos{
	position:absolute;		
	top: 710px;
	left: 140px;
	z-index: 4;
}