@import "/wp-content/themes/alyssastrip/reset.css";
@import "/wp-content/themes/alyssastrip/base.css";
@import "/wp-content/themes/alyssastrip/fontembeds.css";
@import "/wp-content/themes/alyssastrip/animations.css";

@colour-red: #da554a;
@colour-red-lighter: #e4564a;
@colour-blue: #667f83;
@colour-blue-lighter: #83a8af;
@colour-cream: #fcfcdf;
@colour-lightbrown: #d6d5c4;
@colour-white: #fff;
@georgia: Georgia, serif;
@hoeflerText: "Hoefler Text", Georgia, serif;
@baskerville: Baskerville, Georgia, serif;
@base-img-url: "/wp-content/themes/alyssastrip/images/";

.textReplace(@imageURL,@width:"auto",@height:"auto") {
	background: url("/wp-content/themes/alyssastrip/images/@{imageURL}") 0 0 no-repeat;
	display: block;
	text-indent: -5000px;
	height:@height;
	width:@width;
}
.absolute(@left:0,@top:0){
	position: absolute;
	top:@top;
	left:@left;
}
.container(@width:960px){
	margin:0 auto;
	width:@width;
}
.whiteDropLine(@opacity:0.44){
	text-shadow:0 1px 0 rgba(255, 255, 255, @opacity);
}
.blackDropLine(@opacity:0.44){
	text-shadow:0 1px 0 rgba(0, 0, 0, @opacity);
}

.columns(@numColumns:2,@columnGap:20px) {
	-moz-column-count: @numColumns;
	-webkit-columns: @numColumns;
	-o-columns: @numColumns;
	columns: @numColumns;
	-webkit-column-gap:@columnGap;
	-moz-column-gap:@columnGap;
	column-gap:@columnGap;
}
.transition(@transition) {
	-webkit-transition: @transition;
	-moz-transition: @transition;
	transition: @transition;
}


/* -- General Styles --*/

html										{ background: @colour-white url(/wp-content/themes/alyssastrip/images/bg_map.jpg) top center repeat-x; }
body										{ font-family:Cabin, Arial, sans-serif; }
a											{ color: @colour-red; }


/* -- Header --*/

header {
	.container(980px);
	height:408px;
	position: relative;
	h1 {
		span {
			z-index:10;
			.absolute(132px,172px);
			.textReplace("title_lukeAndKarenFlyAround.png",418px,108px);
		}
		strong {
			z-index:5;
			.absolute(2px,199px);
			.textReplace("title_australia.png",603px,180px);
		}
	}
	h6 {
		font-size: 18px;
		letter-spacing:4px;
		color: @colour-blue-lighter;
		z-index: 15;
		text-shadow:0 1px 0 rgba(255, 255, 255, 0.7);
		.absolute(139px,319px);
		span {
			font-weight: normal;
		}
	}
	.plane {
		.absolute(355px, 247px);
		.textReplace("ill_plane_solid.png",451px,85px);
		z-index:15;
	}
	.planeShadow {
		.absolute(355px, 277px);
		.textReplace("ill_plane_shadow.png",184px,53px);
		z-index:14;
	}
	.clouds {
		.textReplace("ill_cloud.png",80px,53px);
	}
	.cloud1 {
		z-index:10;
		.absolute(355px, 247px);
	}
	.cloud2 {
		z-index:16;
		.absolute(475px, 280px);
	}
	.cloud3 {
		z-index:10;
		.absolute(225px, 340px);
	}
	.cloud4 {
		z-index:16;
		.absolute(20px, 222px);
	}
	.cloud5 {
		z-index:16;
		.absolute(60px, 107px);
	}

}



/* -- Content --*/

section.generalStats {
	position: relative;
	.container;
	.whiteDropLine;
	.title_downUnder {
		.textReplace("header_theLandDownUnder.png",260px,59px);
	}
	.aboutTheTrip {
		.absolute(270px,0);
		background: url(/wp-content/themes/alyssastrip/images/bg_description.jpg) top left no-repeat;
		width: 460px;
		height: 137px;
		padding: 13px 20px 0;
		.columns;
		p {
			padding:0 0 18px 0;
		}
		em {
			color: @colour-blue;
		}
		.instructions {
			color: @colour-blue;
			font-weight: bold;
		}
	}
	.title_progress {
		.absolute(0,183px);
		.textReplace("header_ourProgress.png",260px,59px);
	}
	.stats {
		.absolute(270px,183px);
		h6 {
			color: @colour-blue-lighter;
			font-weight: bold;
			letter-spacing:2px;
			text-transform: uppercase;
			padding:18px 0 6px 0;
		}
		li {
			width: 220px;
		}
		.kms {
			.absolute(22px,-21px);
			h6 {
				background: url(/wp-content/themes/alyssastrip/images/info_plane.png) 152px 16px no-repeat;
			}
		}
		.days {
			.absolute(260px,-21px);
			h6 {
				background: url(/wp-content/themes/alyssastrip/images/info_roo.png) 106px 0 no-repeat;
			}
		}
		p {
			color: @colour-red-lighter;
			font-weight: bold;
			letter-spacing:3px;
			font-size: 11px;
			padding:36px 0 0 0;
			text-align: center;
			width: 210px;
		}
		.chart {
			display: block;
			background-color: #f87f73;
			box-shadow:inset 0 0 10px rgba(0,0,0,0.3);
			width: 0;
			height: 20px;
			.absolute(0px,47px);
			border-radius:10px;
			z-index:205;
		}
		.chartBack {
			display: block;
			background-color: #ecece6;
			border:5px solid @colour-white;
			width: 210px;
			box-shadow:inset 0 0 10px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.22);
			height: 20px;
			.absolute(-5px,42px);
			border-radius:15px;
			z-index:200;
		}
		span {
			color: #949480;
			font-family: @hoeflerText;
			font-weight: normal;
			font-style: italic;
			letter-spacing:0;
			font-size: 14px;
			margin:0 3px 0 -1px;
		}
	}
}


/* -- City Explanations --*/
.explanation {
	.absolute(50%,400px);
	width:960px;
	margin:0 0 0 -480px;
	display:none;
	min-height:320px;
	h2 {
		.absolute(0, 10px);
		z-index:18;
	}
	.hereFor {
		.absolute(0, 140px);
		.whiteDropLine;
		text-align:center;
		width:200px;
		text-transform:uppercase;
		letter-spacing:1px;
		color:#8a8879;
		font-size:11px;
		span {
			font-family:@hoeflerText;
			color:#83a8af;
			font-size:30px;
			font-style:italic;
		}
	}
	article {
		.absolute(200px,0);
		z-index:20;
		box-shadow: 0 1px 15px rgba(0,0,0,0.2);
		width:600px;
		background: #f9f8f5 url("/wp-content/themes/alyssastrip/images/bg_content_city.jpg") 0 0 no-repeat;
	}
	.intro {
		float:left;
		width:210px;
		padding:27px 20px 20px 30px;
		h4 {
			margin:0 0 3px 0;
		}
		.credit {
			opacity:0.7;
			font-size:12px;
			font-style:italic;
		}
	}
	.hopeToDo {
		float:right;
		width:310px;
		padding:27px 20px 20px 0;
		h4 {
			.textReplace("text_whatwehopetodo.png",237px,31px);
		}
		ul {
			padding:0 0 0 20px;
			color:#94b3b9;
			list-style:disc;
		}
		li {
			padding:3px 0;
			font-style:italic;
			color:#6c6a63;
		}
	}
}

.explanation.sydney {
	background: url("/wp-content/themes/alyssastrip/images/ill_operaHouse_content.jpg") 0 200px no-repeat;
	h2 				{ .textReplace("text_city_sydney.gif", 200px, 115px); }
	.intro h4 		{ .textReplace("text_hifrom_sydney.png",237px,31px); }
}
.explanation.melbourne {
	background: url("/wp-content/themes/alyssastrip/images/ill_coffee.png") 60px 190px no-repeat;
	h2 				{ .textReplace("text_city_melbourne.gif", 200px, 115px); }
	.intro h4 		{ .textReplace("text_hifrom_melbourne.png",237px,31px); }
}
.explanation.adelaide {
	background: url("/wp-content/themes/alyssastrip/images/koala.png") 40px 180px no-repeat;
	h2 				{ .textReplace("text_city_adelaide.gif", 200px, 115px); }
	.intro h4 		{ .textReplace("text_hifrom_adelaide.png",237px,31px); }
}
.explanation.kangaroo {
	background: url("/wp-content/themes/alyssastrip/images/ill_roo_both.png") 0 172px no-repeat;
	h2 				{ .textReplace("text_city_kangaroo.gif", 200px, 115px); }
	.intro h4 		{ .textReplace("text_hifrom_kangaroo.png",237px,31px); }
}
.explanation.cairns {
	background: url("/wp-content/themes/alyssastrip/images/ill_reef_invert.png") 0 150px no-repeat;
	h2 				{ .textReplace("text_city_cairns.gif", 200px, 115px); }
	.intro h4 		{ .textReplace("text_hifrom_cairns.png",237px,31px); }
}
.explanation.whitsunday {
	background: url("/wp-content/themes/alyssastrip/images/ill_sails_invert.png") 40px 180px no-repeat;
	h2 				{ .textReplace("text_city_whitsundays.gif", 200px, 115px); }
	.intro h4 		{ .textReplace("text_hifrom_whitsundays.png",237px,31px); }
}



/* -- Stops (or locations) --*/

.stops {
	background: url(/wp-content/themes/alyssastrip/images/routes.png) top left no-repeat;
	margin:0 0 0 -480px;
	width:960px;
	height:770px;
	.absolute(50%, 220px);
	.start {
		.textReplace("arrow_start.png", 76px, 35px);
		.absolute(955px,607px);
	}
	.finish {
		.textReplace("arrow_finish.png", 87px, 72px);
		.absolute(815px,460px);
	}
	li {
		background: url(/wp-content/themes/alyssastrip/images/stop_marker.png) 0 8px no-repeat;
	}
	article {
		display: none;
	}
	a {
		.transition(opacity .4s ease);
		z-index:5;
		&:hover{
			opacity:0.4;
		}
	}
	.illustration {
		opacity:0;
		z-index:0;
	}
	.sydney {
		.absolute(856px,550px);
		.illustration {
			background: url(/wp-content/themes/alyssastrip/images/ill_operaHouse_bg.png) top left no-repeat;
			width: 179px;
			height: 78px;
			.absolute(-180px, 10px);
		}
		a {
			.textReplace("location_sydney.png",122px,38px);
			background-position: 27px 0;
		}
	}
	.melbourne {
		.absolute(652px,641px);
		background-position: 13px 43px;
		.illustration {
			background: url(/wp-content/themes/alyssastrip/images/ill_coffee.png) top left no-repeat;
			width: 71px;
			height: 50px;
			.absolute(-85px, 00px);
		}
		a {
			.textReplace("location_melbourne.png",147px,68px);
		}
	}
	.adelaide {
		.absolute(484px,570px);
		.illustration {
			background: url(/wp-content/themes/alyssastrip/images/koala.png) top left no-repeat;
			width: 113px;
			height: 121px;
			.absolute(42px, 64px);
		}
		background-position: 0px 16px;
		a {
			.textReplace("location_adelaide.png",142px,38px);
			background-position: 25px 0;
		}
	}
	.kangaroo {
		.absolute(360px,628px);
		background-position: 90px 0;
		.illustration {
			background: url(/wp-content/themes/alyssastrip/images/ill_roo_both.png) top left no-repeat;
			width: 227px;
			height: 142px;
			.absolute(-202px, -10px);
		}
		a {
			.textReplace("location_kangarooIsland.png",131px,84px);
			background-position: 0 23px;
		}
	}
	.cairns {
		z-index:100;
		.absolute(700px,6px);
		.illustration {
			background: url(/wp-content/themes/alyssastrip/images/ill_reef.png) top left no-repeat;
			width: 210px;
			height: 172px;
			.absolute(85px, -162px);
		}
		a {
			.textReplace("location_cairns.png",117px,38px);
			background-position: 27px 0;
		}
	}
	.whitsunday {
		.absolute(786px,83px);
		background-position: 0 31px;
		.illustration {
			background: url(/wp-content/themes/alyssastrip/images/ill_sails.png) top left no-repeat;
			width: 142px;
			height: 88px;
			.absolute(190px, -10px);
		}
		a {
			.textReplace("location_whitsunday.png",187px,85px);
			background-position: 24px 0;
		}
	}
}


/* -- Nav bar, fixed to the bottom of the page --*/

nav {
	background: url(/wp-content/themes/alyssastrip/images/bg_navbar.jpg) top left repeat-x;
	width: 100%;
	height: 59px;
	position:fixed;
	z-index:2000;
	overflow: hidden;
	bottom:20px;
	letter-spacing:2px;
	text-transform: uppercase;
	box-shadow:0 4px 15px rgba(0,0,0,0.7);
	.blackDropLine(0.7);
	section {
		.container;
	}
	a {
		display: block;
		padding:21px 0 0 0;
		height:38px;
		color: @colour-cream;
		.transition(all .25s ease);
		&:hover {
			padding-left:4px;
			text-decoration: none;
			color: #fff;
		}
	}
	h4 {
		float: left;
	}
	.twitterupdates {
		padding:21px 0 0 20px;
		width:550px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow:hidden;
		float: left;
		font-weight: normal;
		letter-spacing: 0;
		text-transform: none;
		color: @colour-white;
		a {
			font-weight: normal;
			letter-spacing: 0;
			text-transform: none;
			color: #d7faff;
			display:inline;
			padding:0;
			&:hover {
				color: darken(@colour-lightbrown, 70%);
			}
		}
	}
	ul {
		float: right;
		li {
			border-left:1px solid rgba(252,252,223,0.2);
			float: left;
			.transition(box-shadow 0.5s ease);
			&:hover {
				box-shadow:inset 0 2px 15px rgba(0,0,0,0.4);
			}
			a {
				width: 120px;
				padding:21px 0 0 10px;
				&:hover {
					padding:23px 0 0 10px;
				}
			}
		}
	}
}

#blog {
	width:440px;
	margin:600px auto 0;
	padding:0 320px 0 200px;
	h3 {
		font-size:14px;
		font-weight:bold;
		text-transform:uppercase;
		letter-spacing:3px;
		padding:0 0 18px 0;
		color:#78999f;
	}
	h2 {
		font-size:42px;
		font-weight:bold;
		padding:12px 20px 12px 20px;
		margin:0 0 12px -33px;
		width:460px;
		background-color:#da554a;
		line-height:42px;
		color:#fff;
	}
	.entry-meta {
		text-transform:uppercase;
		font-size:10px;
		letter-spacing:1px;
		color:#777;
		a {
			color:#777;
		}
	}
	.entry-content {
		padding:0 0 42px 0;
	}
}
#twitter_update_list {
	display:none;
}

/* -- Footer --*/

footer {
	.container;
	margin: 42px auto 90px auto;
	padding: 10px 0;
	color: @colour-lightbrown;
	text-align: center;
	.transition(color .3s ease);
	&:hover {
		color: darken(@colour-lightbrown, 30%);
	}
}