/* CSS Stylesheet for Tenerife Outdoors - http://www.tenerifeoutdoors.com */

/* CSS RESET */
* {
		vertical-align: top;
		font-size: 12pt;
		color: #000;
		font-family: Arial, Helvetica, sans-serif;
		letter-spacing: 0px;
		border: 0px none;
		padding: 0;
		margin: 0;
		line-height: normal;
		word-spacing: normal;
		text-align: left;
		font-weight: normal;
		font-size: 100%;
		}
.clear {clear: both; height: 0px;}
.spacer {height: 20px; width: 100%; overflow: hidden;}
@font-face {font-family: Swiss Light; src: url('fonts/swiss721light.TTF');}

/* BODY */
body {background: #fff;}
#frame {width: 959px; margin: 0 auto;}

/* HEADER */
#header {
		width: 959px;
		height: 93px;
		background: url(images/header-bg.jpg) center no-repeat;
		}
		#header img {margin: 20px 0 0 20px;}
#nav {
		width: 959px;
		height: 39px;
		border-bottom: 1px solid #fff;
		background: url(images/nav-bg.gif) center top repeat-x #000;
		margin: 0;
		position: absolute;
		z-index: 1000;
		}
		#nav ul {
				list-style: none;
				position: relative;
				left: -1px;
				}
				#nav ul a {
						display: block;
						color: #fff;
						padding: 0 20px;
						line-height: 39px;
						text-decoration: none;
						font-family: Arial, sans-serif;
						font-size: 14px;
						background: url(images/nav-separator.png) center left no-repeat;
						text-shadow: 2px 2px 2px #000;
						}
						#nav ul a img {margin: 0 0 0 10px; vertical-align: middle;}
				#nav ul li:hover {background: url(images/nav-hover-bg.png) top center repeat-x;}
				#nav ul li {float: left;}
						#nav ul li ul {display: none;}
						#nav ul li:hover ul {
								display: block;
								position: relative;
								left: 1px;
								z-index: 1000;
								-moz-box-shadow: 0px 5px 5px #080808;
								-webkit-box-shadow: 0px 5px 5px #080808;
								box-shadow: 0px 5px 5px #080808;
								}
						#nav ul li.walkingholidays:hover ul {width: 238px;}
						#nav ul li.discovertenerife:hover ul {width: 170px;}
								#nav ul li ul a {
										display: block;
										color: #fff;
										padding: 6px 20px;
										line-height: normal;
										text-decoration: none;
										font-family: Arial, sans-serif;
										font-size: 14px;
										background: #000;
										border-top: 1px solid #fff;
										text-align: center;
										}
								#nav ul li ul a:hover {background: #222;}
								#nav ul li ul li {float: none; background: none;}

/* MAIN CONTENT */
.slideshow {
		width: 959px;
		height: 300px;
		margin: 39px 0 0 0;
		padding: 0;
		overflow: hidden;
		border-bottom: 1px solid #fff;
		}
		.splash {
				width: 959px;
				height: 280px;
				margin: 0 auto;
				padding: 20px 0 0 0;
				background: #000;
				}
		.splash {margin-top: 39px; border-bottom: 1px solid #fff;}
		.slideshow .splash {margin-top: 0; border-bottom: 0px none;}
				.splash .titlecontainer { /* Required to provide the left white space when title is broken over two lines.*/
						width: 480px;
						border-left: 15px solid #fff;
						padding: 2px 0;
						}
						.splash h1.title a {
								font-size: 32pt;
								font-weight: normal;
								display: inline;
								height: auto;
								font-family: "Times New Roman", Times, serif;
								background: #fff;
								line-height: 45px;
								text-decoration: none;
								}
								.splash h1.title a em {
										font-size: 32pt;
										font-weight: normal;
										font-style: italic;
										font-family: "Times New Roman", Times, serif;
										line-height: 45px;
										}
				.splash p.description {
						font-family: "Times New Roman", Times, serif;
						font-size: 16px;
						letter-spacing: 0px;
						color: #000;
						background: #fff;
						width: 300px;
						height: auto;
						padding: 15px;
						margin: 15px 0 0 0;
						line-height: 14px;
						}
		.slide1 {background: url(images/splash-slide1-bg.jpg) center no-repeat;}
		.slide2 {background: url(images/splash-slide2-bg.jpg) center no-repeat;}
		.slide3 {background: url(images/splash-slide3-bg.jpg) center no-repeat;}
				.splash img.arrow {
						float: right;
						position: relative;
						top: 190px;
						}
/* Column Styling. */
.content-frame {
		position: relative;
		left: -1px;
		width: 960px;
		}
.threecolumnbg {background: url(images/threecolumnbg.gif) right repeat-y;}
.twocolumnbg {background: url(images/twocolumnbg.gif) right repeat-y;}
.onecolumnbg {background: url(images/onecolumnbg.gif) right repeat-y;}
.thirdcolumn, .twothirdscolumn {
		width: 320px;
		float: left;
		display: block;
		padding-bottom: 20px;
		}
.thirdcolumn {background: url(images/column-bg.png) center repeat-y;}
.twothirdscolumn {width: 640px;}
		h2 {
				width: 939px;
				height: 48px;
				line-height: 48px;
				padding: 0 0 0 20px;
				border-left: 1px solid #fff;
				border-bottom: 2px solid #fff;
				color: #fff;
				font-size: 18pt;
				font-family: Swiss Light, Arial Narrow, Arial, sans-serif;
				}
		.thirdcolumn h2 {width: 299px;}
		.twothirdscolumn h2 {width: 619px;}
		h2.light {background: #333;}
		h2.rightmountain-light {background: url(images/h2-left-right-light-bg.gif) right bottom no-repeat #333;}
		h2.leftmountain-dark{background: url(images/h2-right-left-dark-bg.gif) left bottom no-repeat #111;}
		h3 {
				color: #333;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 16pt;
				font-weight: normal;
				margin: 20px 20px 0 20px;
				letter-spacing: -1px;
				}
		h4 {
				color: #000;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 13pt;
				font-weight: bold;
				margin: 20px 20px 0 20px;
				}
		.content-frame p {
				font-family: Arial, Helvetica, sans-serif;
				color: #000;
				font-size: 12pt;
				margin: 15px 20px 0 20px;
				letter-spacing: 0px;
				}
		.thirdcolumn p, .twothirdscolumn p {
				font-family: Arial, Helvetica, sans-serif;
				color: #000;
				font-size: 12pt;
				margin: 15px 10px 0 20px;
				letter-spacing: 0px;
				}
		.twothirdscolumn p {margin: 20px 30px 0 30px;}
		.thirdcolumn img.floatrightnoborder {float: right; margin: 0 10px 20px 20px;}
		.thirdcolumn .fullwidthimg {margin: 20px auto 0 12px;}
strong {font-weight: bold;}
		.thirdcolumn ul {
				list-style: square;
				margin: 20px 10px 0 40px;
				font-size: 11pt;
				}
		.thirdcolumn li {padding-left: 10px; margin-left: 0;}
		.twothirdscolumn ul {list-style: square; margin: 20px 30px 0 50px;}
		.twothirdscolumn li {margin: 0 0 10px 0; padding-left: 10px;}
hr {
		width: 919px;
		margin: 20px 20px 0 20px;
		background: #333;
		height: 1px;
		border: 0px none;
		}
		.thirdcolumn hr {width: 280px;}
		.twothirdscolumn hr {width: 600px;}
		p.readmore, p.largebutton {
				float: right;
				margin-right: 20px;
				display: inline;
				background: url(images/button-readmore-bg.gif) center repeat-x;
				height: 25px;
				border: 2px solid #fff;
				-moz-box-shadow: 0px 0px 10px #666;
				-webkit-box-shadow: 0px 0px 10px #666;
				box-shadow: 0px 0px 10px #666;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				color: #fff;
				text-align: center;
				font-family: Swiss Light, Arial Narrow, Arial, sans-serif;
				line-height: 22px;
				padding: 0 10px;
				font-size: 14pt;
				text-shadow: 2px 2px 2px #000;
				text-transform: lowercase;
				}
		p.largebutton {
				float: none;
				margin: 0 auto 0 40px;
				background: url(images/button-largebutton-bg.gif) center repeat-x;
				font-size: 18pt;
				text-transform: none;
				padding: 6px 20px;
				line-height: 30px;
				font-weight: bold;
				position: relative;
				top: 30px;
				}
		p.bottommargin {margin-bottom: 20px;}
				.content-frame p a, .thirdcolumn p a {color: #24b; text-decoration: underline;}
				.content-frame p a:hover, .thirdcolumn p a:hover {
						background: #24b;
						color: #fff;
						text-decoration: none;
						}
				p.readmore a, p.largebutton a {
						color: #fff;
						text-decoration: none;
						font-family: Swiss Light, Arial Narrow, Arial, sans-serif;
						}
				p.readmore a:hover, p.largebutton a:hover {background: none;}
				.twothirdscolumn .description {
						background: url(images/content-description-bg.gif) top left no-repeat;
						width: 580px;
						margin: 20px 30px 0 30px;
						padding-top: 10px;
						}
						.twothirdscolumn .description p {margin: 0 0 20px 0; text-indent: 40px;}
				.twothirdscolumn .description:after {
						content: url(images/content-description-after.gif);
						float: right;
						position: relative;
						margin: 0 0 -38px 0;
						top: -38px;
						}
		p.smalltext {font-size: 10pt;}
		a.pagetop {float: right; margin: 20px 20px 30px 0;}
.gallery {
		width: 269px;
		height: 251px;
		margin: 20px 0 20px 36px;
		overflow: hidden;
		}
.gallery:hover {
		overflow-y: scroll;
		overflow-x: hidden;
		}
		.gallery img {margin-left: 1px; margin-bottom: 1px;}
img.mainimage {
		float: right;
		padding: 4px;
		border: 1px solid #999;
		-moz-box-shadow: 0px 10px 10px #999;
		-webkit-box-shadow: 0px 10px 10px #999;
		box-shadow: 0px 10px 10px #999;
		margin: 0 0 20px 20px;
		}
.liststyle {width: 899px; margin: 20px 30px 0 30px;}
		.liststyle th {
				height: 43px;
				line-height: 43px;
				font-family: Swiss Light, Arial Narrow, Arial;
				color: #fff;
				font-size: 14pt;
				font-weight: normal;
				padding: 0 0 0 20px;
				background: #000;
				}
				.liststyle th a {
						color: #fff;
						text-decoration: none;
						font-family: Swiss Light, Arial Narrow, Arial, sans-serif;
						font-size: 14pt;
						font-weight: normal;
						line-height: 43px;
						}
				.liststyle th img {float: right;}
				.liststyle td img.mainimage {margin: 20px;}
		.liststyle p.info {
				margin: 20px 0 20px 10px;
				background: #000;
				color: #fff;
				font-size: 9pt;
				display: block;
				height: 25px;
				line-height: 25px;
				padding: 0 5px;
				}
				.liststyle p.info img {float: left; margin: -5px 5px 0 0;}
				.liststyle p.info a {color: #fff; text-decoration: none; line-height: 25px;}
				.liststyle p.info a:hover {background: none;}
.photogallery {
		margin: 20px 36px 0 36px;
		width: 888px;
		}
		.photogallery .imgarea {
				text-align: center;
				padding: 5px;
				color: #333;
				font-family: 'Arial Narrow', sans-serif;
				font-size: 14pt;
				float: left;
				width: 212px;
				margin: 0;
				}
		.photogallery .imgarea .mainimage {float: none; margin: 0;}
		.photogallery .imgarea .caption {
				text-align: center;
				font-family: 'Arial Narrow', sans-serif;
				font-weight: normal;
				padding: 5px 5px 0 5px;
				font-size: 11pt;
				color: #333;
				}
.brochure {
		width: 598px;
		margin: 20px 20px 0 21px;
		padding: 0;
		background: #b7faa3;
		border: 1px solid #49783a;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 5px 5px 5px #bebebe;
		-webkit-box-shadow: 5px 5px 5px #bebebe;
		box-shadow: 5px 5px 5px #bebebe;
		}
		.brochure p {
				margin: 5px 10px;
				font-family: 'Arial Narrow', sans-serif;
				font-size: 12pt;
				font-weight: bold;
				padding: 0;
				}
				.brochure p img {vertical-align: middle; margin-right: 10px; border: 0px none; outline: none;}
				.brochure p a {
						color: #49783a;
						text-decoration: underline;
						margin: 0;
						padding: 0;
						font-family: 'Arial Narrow', sans-serif;
						font-size: 12pt;
						font-weight: bold;
						vertical-align: text-bottom;
						}
				.brochure p a:hover {background: none; color: #3c9f1d; text-decoration: none;}

#footer {
		width: 959px;
		background: #000 url(images/footer-bg.gif) right bottom no-repeat;
		color: #fff;
		font-family: Swiss Light, Arial Narrow, Arial, sans-serif;
		border-top: 2px solid #fff;
		font-size: 11pt;
		padding: 20px 0 40px 0;
		}
		#footer p {
				margin: 20px 40px 0 40px;
				color: #fff;
				font-family: Swiss Light, Arial Narrow, Arial, sans-serif;
				}
		#footer a {font-family: inherit; color: #fff;}
		#footer strong {
				font-size: 12pt;
				font-weight: bold;
				color: #fff;
				text-transform: uppercase;
				font-family: inherit;
				}
		#footer ul {
				list-style: none;
				margin: 20px 60px 0 60px;
				color: #fff;
				font-family: Swiss Light, Arial Narrow, Arial, sans-serif;
				}
				#footer ul li {color: #fff; font-family: Swiss Light, Arial Narrow, Arial, sans-serif;}
		#footer .thirdcolumn {
				background: none;
				display: inline;
				padding: 0;
				}
						#footer .thirdcolumn p a:hover {background: #000; text-decoration: underline;}
		#footer .last {background: none; width: 319px;}
		#footer img {
				float: left;
				vertical-align: middle;
				margin-right: 18px;
				margin-bottom: 8px;
				}
				#footer img.nomargin {margin-right: 0;}
				#footer a strong {display: block; background: #000;}