/*
	Inlight Media Pty Ltd:
	08/04/2010
	Patrick Carne
*/


/* CONTAINERS -----------------------------------------------------*/

html {
	overflow-y: scroll;
}

body {
	font-family: "Lucida Grande","Lucida Sans Unicode", Arial, Verdana, sans-serif;
	font-size: 62.5%;
	text-align: center;
	color: #666;
	background: url(../img/background-body.jpg) repeat;
}

.bounding {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

#header {
	position: absolute;
	top: 0;
	left: 0;
	height: 470px;
	width: 100%;
}

#header.blue {	background: url(../img/background-header-blue.jpg) repeat-x; }
#header.purple {	background: url(../img/background-header-purple.jpg) repeat-x; }
#header.green {	background: url(../img/background-header-green.jpg) repeat-x; }
#header.orange {	background: url(../img/background-header-orange.jpg) repeat-x; }
#header.grey {	background: url(../img/background-header-grey.jpg) repeat-x; }
#header.snow { background: url(../img/background-header-blue.jpg) repeat-x; }

#header .wrapper {
	height: 470px;
}

#header.blue .wrapper {	background: url(../img/background-header-wrapper-blue.jpg) center top no-repeat; }
#header.purple .wrapper {	background: url(../img/background-header-wrapper-purple.jpg) center top no-repeat; }
#header.green .wrapper {	background: url(../img/background-header-wrapper-green.jpg) center top no-repeat; }
#header.orange .wrapper {	background: url(../img/background-header-wrapper-orange.jpg) center top no-repeat; }
#header.grey .wrapper {	background: url(../img/background-header-wrapper-grey.jpg) center top no-repeat; }
#header.snow .wrapper {	background: url(../img/background-header-wrapper-snow.jpg) center top no-repeat; }

#page-content {
	background: url(../img/background-page-content.jpg) repeat;
	margin-top: 470px;
}

div.container {
	position: relative;
	float: left;
	display: inline;
}

div.container.two-fifths { width: 384px; }
div.container.three-fifths { width: 576px; }

#header div.container.three-fifths { margin-top: 70px; }


/* SITE TYPOGRAPHY ------------------------------------------------*/

p {
	font-size: 120%;
	line-height: 1.8em;
	color: #666;
	padding-bottom: 1em;
}

#page-content p span {
	font-weight: bold;
	color: #999;
}

a {
	color:#444444;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1 {
	/* color: transparent; */
	text-transform: capitalize;
	text-indent: -9999px;
}

h1.home { background: url(../img/h1-home.png) no-repeat; width: 546px; height: 100px;}
h1.our-work { background: url(../img/h1-our-work.png) no-repeat; width: 546px; height: 30px;}
h1.expertise { background: url(../img/h1-expertise.png) no-repeat; width: 546px; height: 100px;}
h1.contact { background: url(../img/h1-contact.png) no-repeat; width: 546px; height: 100px;}

h2 {
	font-size: 180%;
	font-weight: bold;
	color: #FFF;
	padding-bottom: 1em;
	font-family: "Lucida Grande", Arial, Verdana, sans-serif;
}

h3 {
	font-size: 140%;
	font-weight: bold;
	color: #CCC;
	padding-bottom: 1.5em;
	font-family: "Lucida Grande", Arial, Verdana, sans-serif;
}

h4 {
	font-size: 120%;
	font-weight: bold;
	color: #999;
	padding-bottom: 1em;
	line-height: 2em;
}


/* HEADER ---------------------------------------------------------*/

#logo {
	position: relative;
	float: left;
	width: 110px;
	height: 40px;
	margin-left: 7px;
}

#menu {
	position: relative;
	float: right;
	height: 40px;
	margin-right: 4px;
}

#menu ul {
	position: relative;
	float: right;
}

#menu ul li {
	position: relative;
	float: left;
	width: 142px;
	height: 40px;
	background: url(../img/background-menu-item.png) 0 0;
}

#menu ul li.contact { background: url(../img/background-menu-item-contact.png) 0 0;}

#menu ul li:hover { background-position: 0 -40px; }
#menu ul li.active { background-position: 0 -80px; }

#menu ul li a {
	position: relative;
	float: left;
	width: 117px;
	height: 40px;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	padding-left: 25px;
	font-size: 110%;
	font-weight: bold;
	color: #000;
	text-shadow:1px 1px 0 #888;
	opacity: 0.6;
}

#menu ul li a.home { background: url(../img/icon-menu-home.png) 36px center no-repeat; }
#menu ul li a.our-work { background: url(../img/icon-menu-our-work.png) 25px center no-repeat; }
#menu ul li a.expertise { background: url(../img/icon-menu-expertise.png) 25px center no-repeat; }
#menu ul li a.contact { background: url(../img/icon-menu-contact.png) 32px center no-repeat; }


#menu ul li a:hover {
	text-decoration: none;
}


/* Header paragraph text colour fading... */
#header.blue p { color: #000023; }
#header.purple p { color: #310000; }
#header.green p { color: #2C3501; }
#header.orange p { color: #5C1C03; }
#header.snow p { color: #000023; }

/* Header link text colour fading... */
#header.blue p a { color: #003ab0;}
#header.purple p a { color: #930264; }
#header.green p a { color: #667c01; }
#header.orange p a { color: #932402; }
#header.snow p a { color: #003ab0; }


/* HOME PAGE ------------------------------------------------------*/

#introduction {
	margin-left: 30px;
	height: 280px;
}

#introduction p {
	color: #000023;
	padding: 10px 5px;
}

#introduction a.more {
	position: relative;
	float: left;
	width: 130px;
	height: 45px;
	margin-top: 10px;
	background: url(../img/btn-more.png) 0 0;
}

/* More button colour fading... */
#header.blue a.more { background: url(../img/btn-more-blue.png) 0 0; }
#header.purple a.more { background: url(../img/btn-more-purple.png) 0 0; }
#header.green a.more { background: url(../img/btn-more-green.png) 0 0; }
#header.orange a.more { background: url(../img/btn-more-orange.png) 0 0; }
#header.snow a.more { background: url(../img/btn-more-snow.png) 0 0; }

#introduction a.more:hover {
	background-position: 0 -45px;
}

#screen-wrapper {
	display: block;
	height: 370px;
	width: 370px;
	background: url(../img/background-screen.png);
	margin-top: 60px;
}

#screen img {
	margin-left: 17px;
	margin-top: 14px;
	position: absolute;
}

#projects {
	width: 546px;
	height: 30px;
	background: url(../img/background-projects.png);
	margin-top: 25px;
	margin-left: 30px;
}

#projects p {
	position: relative;
	float: left;
	width: 400px;
	font-size: 100%;
	padding: 6px 0 0 10px;
	color: #666666 !important;
}

#projects p span {
	color: #516074;
	font-weight: normal;
	font-size: 100%;
}

#projects a {
	position: relative;
	float: right;
	width: 110px;
	height: 26px;
	line-height: 26px;
	vertical-align: middle;
	text-align: center;
	margin: 2px 4px 0 0;
	font-size: 100%;
	color: #666;
	background: url(../img/btn-how.png) 0 0;
}

#projects a:hover {
	text-decoration: none;
	background-position: 0 -26px;
	color: #555;
}

#twitter {
	margin-top: 40px;
	padding-left: 70px;
	padding-right: 30px;
	background: url(../img/icon-twitter.png) top left no-repeat;
}

#twitter p {
	font-size: 110%;
	color: #666;
}

#twitter a {
	color: #999;
}

#twitter p.meta {
	font-style: italic;
	color: #555;
}

#ideologies {
	margin-top: 40px;
}

#contact {
	margin-top: 30px;
	margin-bottom: 20px;
	padding-left: 70px;
	padding-right: 50px;
	background: url(../img/icon-contact.png) top left no-repeat;
}

#contact p {
	font-size: 110%;
	color: #666;
	padding-bottom: 0.5em;
}

#contact p span {
	color: #777;
}

#contact p span.hint {
	color: #555;
	font-size: 90%;
}

#contact a {
	color: #999;
}

#ideologies .ideology {
	position: relative;
	float: left;
	width: 258px;
	height: 200px;
	padding-left: 30px;
}


/* OUR WORK -------------------------------------------------------*/

#featured-project {
	width: 370px;
	height: 260px;
	background: url(../img/background-featured-project.png);
	margin-top: 60px;
}

#featured-project img {
	margin-left: 8px;
	margin-top: 8px;
}

#featured-description {
	position: relative;
	margin-left: 30px;
	height: 280px;
}

#featured-description p {
	color: #310000;
	padding: 10px 5px;
}

#featured-description a {
	color: #930264;
}

#featured-description div.features {
	position: relative;
	float: left;
	width: 350px;
}

#projects-menu {
	position: relative;
	float: right;
	width: 546px;
	height: 40px;
	margin-top: 20px;
	margin-left: 30px;
}

#projects-menu ul li {
	position: relative;
	float: left;
	margin-right: 15px;
	padding-right: 15px;
	margin-bottom: 15px;
	border-right: 1px solid #333;
}

#projects-menu ul li a {
	color: #444;
	white-space: nowrap;
}

div.features p.feature {
	width: 300px;
	height: 32px;
	font-size: 110%;
	padding: 0 0 0.5em 50px !important;
	margin-top: 5px;

	background-position: top left;
	background-repeat: no-repeat;
}

div.project div.features p.feature {
	width: 546px;
}

div.features p.feature.joomla { background-image: url(../img/icon-feature-joomla.png); }
div.features p.feature.flash { background-image: url(../img/icon-feature-flash.png); }
div.features p.feature.cake { background-image: url(../img/icon-feature-cake.png); }
div.features p.feature.jquery { background-image: url(../img/icon-feature-jquery.png); }
div.features p.feature.eway { background-image: url(../img/icon-feature-eway.png); }
div.features p.feature.saasu { background-image: url(../img/icon-feature-saasu.png); }
div.features p.feature.cm { background-image: url(../img/icon-feature-cm.png); }
div.features p.feature.surreal { background-image: url(../img/icon-feature-surreal.png); }

#featured-description a.visit {
	position: relative;
	float: right;
	width: 130px;
	height: 45px;
	margin-top: 40px;
	background: url(../img/btn-visit.png) 0 0;
}

/* Visit button colour fading... */
#header.blue a.visit { background: url(../img/btn-visit-blue.png) 0 0; }
#header.purple a.visit { background: url(../img/btn-visit-purple.png) 0 0; }
#header.green a.visit { background: url(../img/btn-visit-green.png) 0 0; }
#header.orange a.visit { background: url(../img/btn-visit-orange.png) 0 0; }
#header.snow a.visit { background: url(../img/btn-visit-snow.png) 0 0; }

#featured-description a.visit:hover {
	background-position: 0 -45px;
}

#other-work  {
	margin-top: 58px;
}

#other-work p {
	background: url(../img/txt-other-work.png) top left no-repeat;
}

div.project {
	position: relative;
	float: left;
	width: 960px;
	margin-top: 40px;
	margin-bottom: 20px;
}

div.project div.screenshot {
	width: 374px;
	height: 170px;
	background: url(../img/background-project-image.png) no-repeat;
	padding: 5px;
}

div.project div.description {
	padding-left: 30px;
}

div.project div.description a {
	color: #999;
}

div.project div.description div.website {
	width: 546px;
	height: 30px;
	margin-top: 20px;
	background: url(../img/background-projects.png);
}

div.project div.description div.website p {
	position: relative;
	float: left;
	width: 400px;
	font-size: 100%;
	color: #516074;
	padding: 6px 0 0 10px;
}

div.project div.description div.website a {
	position: relative;
	float: right;
	width: 110px;
	height: 26px;
	line-height: 26px;
	vertical-align: middle;
	text-align: center;
	margin: 2px 4px 0 0;
	font-size: 100%;
	color: #666;
	background: url(../img/btn-how.png) 0 0;
}

div.project div.description div.website a:hover {
	text-decoration: none;
	background-position: 0 -26px;
	color: #555;
}


/* EXPERTISE ------------------------------------------------------*/

h3.latest-posts {
	margin-top: 40px;
}

div.blog-post {
	margin-top: 10px;
	margin-bottom: 40px;
	padding-left: 90px;
	padding-right: 50px;
}

div.blog-post.tony { background: url(../img/blog-post-tony.png) top left no-repeat; }
div.blog-post.ben { background: url(../img/blog-post-ben.png) top left no-repeat; }

div.blog-post p {
	font-size: 110%;
	color: #666;
	padding-bottom: 0.5em;
}

div.blog-post p span {
	color: #777;
	font-style: italic;
}

div.blog-post p span.hint {
	color: #555;
	font-size: 90%;
}

div.blog-post a {
	color: #999;
}


#featured-expertise {
	width: 370px;
	height: 370px;
	margin-top: 60px;
}

#expertise-description {
	margin-left: 30px;
	height: 280px;
}

#expertise-description p {
	color: #2c3501;
	padding: 10px 5px;
}

div#expertise-wrapper {
	margin-top: 40px;
}

div.expertise {
	padding-left: 30px;
	margin-bottom: 40px;
}

div.expertise h3 {
	padding-top: 1.5em;
	padding-bottom: 1em;
}

div.expertise ul li {
	list-style-position: outside;
	list-style: disc;
	margin-left: 20px;
	vertical-align: middle;
	font-size: 120%;
	line-height: 1.8em;
	color: #666;
	padding-bottom: 0.5em;
}



/* CONTACT --------------------------------------------------------*/

#contact-phone {
	width: 370px;
	height: 280px;
	margin-top: 150px;
}

#contact-description {
	margin-left: 30px;
	height: 280px;
}

#contact-description h1 {
	margin-bottom: 30px;
}

#contact-description p {
	color: #5c1c03;
	font-size: 130%;
	padding: 5px 5px;
}

#contact-description p span {
	font-weight: normal;
	font-size: 80%;
}

#contact-description a {
	color: #932402;
}

#map-wrapper {
	margin: 40px 0;
}

#contact-map {
	width: 374px;
	height: 300px;
	background: url(../img/background-map.png) no-repeat;
	padding: 5px;
}

#contact-map div.map {
	background: url(../img/map-loading.gif) 50% 50% no-repeat;
	width: 360px;
	height: 300px;
}

#contact-message {
	margin-top: 40px;
	padding-left: 30px;
}


form#contact-form div#user-details {
	position: relative;
	float: left;
	width: 536px;
	margin: 10px 0 20px 0;
}

form#contact-form label {
	position: relative;
	float: left;
	width: 70px;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
	font-size: 120%;
	font-weight: bold;
}

form#contact-form label.email {
	width: 50px;
}

form#contact-form input.text {
	position: relative;
	float: left;
	width: 150px;
	font-size: 120%;
	padding: 7px;
	border: 0 none;
	margin-right: 20px;
	background: url(../img/background-input-text.png) no-repeat;
}

form#contact-form textarea {
	position: relative;
	float: left;
	width: 385px;
	font-size: 120%;
	padding: 7px;
	border: 0 none;
	margin-right: 20px;
	background: url(../img/background-textarea.png) no-repeat;
	font-family: "Lucida Grande","Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

form#contact-form input.submit {
	position: relative;
	float: right;
	width: 100px;
	height: 36px;
	background: url(../img/btn-send.png) 0 0;
	margin-top: 20px;
	margin-right: 75px;
	cursor: pointer;
	border: none;
	font-size: 120%;
	color: #FFF;

}

form#contact-form input.submit:hover {
	background-position: 0 -36px;
}

form#contact-form #response {
	position: relative;
	float: left;
	width: 280px;
	height: 36px;
	margin-top: 30px;
	margin-left: 70px;
	font-size: 110%;
	color: #fe890b;
	line-height: 1.5em;
}


/* SKI LODGE PROMO ------------------------------------------------*/

h1.snow { background: url(../img/h1-snow.png) no-repeat; width: 546px; height: 70px; margin-bottom: 20px !important; }

a#view-demo-site {
	display: block;
	position: relative;
	width: 140px;
	height: 45px;
	margin-top: 20px;
	background: url(../img/btn-demo.png) 0 0;
}

a#view-demo-site:hover {
	background-position: 0 -45px;
}

#demo-site {
	margin-top: 70px;
}

#call-today {
	width: 546px;
	height: 30px;
	margin-top: 30px;
	margin-left: 30px;
}

#call-today p {
	position: relative;
	float: left;
	font-size: 110%;
	color: #666 !important;
}

#call-today em {
	font-size: 200%;
	vertical-align: bottom;
}

#simple-steps {
	margin-top: 43px;
}

#simple-steps li {
	background-repeat: no-repeat;
	padding-left: 60px;
	line-height: 60px;
	vertical-align: center;
	margin-bottom: 20px;
}

.discuss-icon { background: url(../img/icon-discuss.png); }
.solution-icon { background: url(../img/icon-solution.png); }
.publish-icon { background: url(../img/icon-publish.png); }


#package-info {


}

#basic-package {
	float: left;
	width: 260px;

}

#advanced-options {
	float: right;
	width: 270px;

}





#package-info {
	margin-top: 40px;
	margin-bottom: 30px;
}

#package-info ul {}

#package-info li {
	background-repeat: no-repeat;
	padding-left: 40px;
	height: 32px;
	line-height: 32px;
	vertical-align: center;
	margin-bottom: 12px;
}

.template-design-icon { background: url(../img/icon-snow-template.png); }
.contact-form-icon { background: url(../img/icon-snow-contact.png); }
.cms-icon { background: url(../img/icon-snow-cms.png); }
.support-maintenance-icon { background: url(../img/icon-snow-support.png); }
.web-analytics-icon { background: url(../img/icon-snow-analytics.png); }
.room-availability-icon { background: url(../img/icon-snow-calendar.png); }
.online-bookings-icon { background: url(../img/icon-snow-bookings.png); }
.newsletter-icon { background: url(../img/icon-snow-newsletter.png); }
.photo-gallery-icon { background: url(../img/icon-snow-images.png); }
.google-maps-icon { background: url(../img/icon-snow-maps.png); }
.custom-design-icon { background: url(../img/icon-snow-design.png); }
.website-notifications-icon { background: url(../img/icon-snow-notifications.png); }
.copy-photography-icon { background: url(../img/icon-snow-photography.png); }
.seo-adwords-icon { background: url(../img/icon-snow-seo.png); }


/* FOOTER ---------------------------------------------------------*/

#footer {
	background: url(../img/background-footer.png) top repeat-x;
	padding: 20px 0 40px 0;
}

#footer span.copyright {
	position: relative;
	float: left;
	font-size: 110%;
	color: #333;
}

#footer ul {
	position: relative;
	float: right;
}

#footer ul li {
	position: relative;
	float: left;
}

#footer ul li a {
	color: #555;
	padding: 0 15px;
}


/* UTILITY CLASSES ------------------------------------------------*/

.image-replaced {
	text-indent: -5000px;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	padding: 0 !important;
}

.hidden
{
	position: absolute;
	left: -9999px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	margin-bottom: -1px;
	font-size: 1px;
	line-height: 1px;
}

.clearer
{
	clear: both;
	height: 1px;
	overflow: hidden;
	margin-top: -1px;
	font-size: 1px;
	line-height: 1px;
}