/*
    Document   : style
    Created on : 20-Jan-2010, 17:30:31
    Author     : Mathew
    Description:
        Purpose of the stylesheet follows.
*/

/* Element-wide restyles */
a, a:focus, a:hover, a:active {outline:none; text-decoration:none; color:inherit; }
a:hover{color:#fff;}

a{ color:#2ca4d6; }

p{margin-bottom:1em}

.hr{
	margin:1em;
	height:10px;
	width:101px;
	background:url(../img/icon/star_hr.png) bottom left repeat-x;
}

input{ width:100%; margin-bottom:1em; }
.textarea{ height:10em; width:100%; }
label{ font-weight:bold; color:#455560; margin-bottom:.25em; display:block; font-size:1.08em; /* 13px */ }

body{
	font-family:Verdana;
	font-size:62.5%; /* 10px */
	color:#808285;
	background-color:#00a4e3;
	width:100%;
	line-height:1.5em;
}
tr, td{ margin:0; padding:0; }

/* white backdrop for the page body */
#root{ background:#fff;	margin:0 auto; }

#cloud{
	height:27em;
	background:url(../img/bg/cloud.png) bottom left repeat-x;
	position:absolute;
	width:100%;
	background-color:#00a4e3;
}

#main{
	position:relative;
	width:100%;

}

.wrapper{
	width:958px; /* 958px or 95.8em - IE doesn't like em widths */
	clear:both;
	margin:0 auto;
}

/* Semi-transparent overlay */
.wrapper, #nav, #nav a:hover{
	background:url(../img/bg/overlay.png) top right repeat;
	/*_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/media/img/bg/overlay.png');*/
}

/* IE won't "stack" the overlays, so a few variants are needed */


 /* Ensures a bit of padding below the content - prevents the content "falling off" the bottom of the page */
#main .wrapper{ padding-bottom: 5em; }

/* Hacks to centralise column in IE */
#main, #footer{ text-align:center; }
.wrapper{ text-align:left; }

/* Footer layout */
#footer{
	height:4em;
	background:url(../img/bg/grass.png) top right repeat-x;
	background-color:#00a4e3;
}

#footer .wrapper{ padding-top:5em; }
#footer ul{ float:left; margin:0 auto; padding:2em 0 0 2em; }
#footer li{
	padding:0 1em;
	margin-top:.5em;
	border:0 solid #fff;
	border-right-width:1px;
	float:left;
	line-height:1em;
}
#footer p{ padding:2em; float:left}

#fsc { float:right; }
#fsc img{ margin:2.2em 0; }
#fsc p{ padding:2em 2em 2em 1em; float:right }

/* Header navigation bar */
#nav{
	display:block;
	padding:1em;
}
#nav li, #footer li { display:inline; }
#nav li a  { padding:1em; font-family:Arial; }
#nav .home{ margin-left:235px; }

#header, #header a, #footer, #footer a, h1{ color:#fff !important; }

/* Page title */
h1{
	width:100%;
	font-size:242%; /* 29px */
	font-weight:bold;
	position:absolute;
	bottom:0;
	height:47px;
	background:url(../img/icon/logo.png) no-repeat right;
	position:relative;
	line-height:2em;
	margin-bottom:.5em;
}
/* Subtitle text */
h2{
	color:#fff;
	font-size:142%; /* 17px */
	font-weight:bold;
	height:1.5em;
}

/* Product snippet titles */
h3{
	font-size:108%;/* 13px */
	font-weight:bold;
	text-align:center;
	margin-top:1em;
	color:#00a4e3;
	height:3em;
}

h4{ font-weight:bold; font-size:142%; margin-bottom:0em; color:#455560; }

/* Page subheadings */
h5{ font-size:108%; /* 13px */ font-weight:bold; color:#455560; margin-bottom:1em; }
/* Used to fake <span> elements within <p> elements to look like headings */
.h5{ font-size:108%; /* 13px */ font-weight:bold; color:#455560; margin-bottom:1em; }

/* Blurb text */
#blurb{ color:#fff; height:2.5em }
.section #blurb{ height:auto; }

#content{
	padding:2em;
	font-size:120%; /* 12px */
}

#splash{ margin-bottom:2em; border:1px solid #fff;  }

/* Enables an element to act as an anchor for another's position */
.relative{ position:relative; }

#begin{
	position:absolute;
	top:16em;
	left:2em;
	margin:2em 0;
}

#begin.home{top:-7em;}

/* Home page */
#gallery #icon{margin-top:17.5em;  position:relative; top:1.5em; right:1em}
#gallery #preview{ border:3px solid #455560; }

/* Section and product snippets */
.snippet{ width:125px; margin:.25em; float:left; }

.snippet p a{ font-style: italic }

.snippet a:hover{ color:#fff !important; }

.snippet img{
	border:1px solid #db2772;
	width:10em; /* 120px */
	height:10em; /* 120px */
}

.snippet .arrowbox{
	position:absolute;
	top:96px;
	right:4px;
	width:27px;
	height:25px !important;
	background:url(../img/icon/arrowbox.png) 0 0 no-repeat;
	margin:0;
	padding:0;
	display:block
}

h3{clear:both;}
.snippet .description { height:17em; }

/* Sidebar navigation */
#sidebar{ width:18.83em; margin:1em 2em 0 0; /* 250px (width+padding) */ float:left; }

.sidenav{ font-size:108%; list-style: none }
.sidenav li, #optionsnav li{ line-height:1em;	margin:.5em 0;  }
.sidenav a{  padding:0 0 0 1.6em; color:#808285 !important;}
.sidenav a:hover{ background:url(../img/icon/star_ul.png) 0 0 no-repeat; color:#00a4e3 !important; }

.sidebarsection{ margin-top:4em !important; }
.productnav{ margin:2em 0 3em 0; }

#options{ margin-top:10em;}
#options li{ margin:1em 0; }

#options a:hover{ background: none !important; }
#options img{ width:50px; height:50px; border:2px solid #00a4e3; }

/* Pushes content without a splash image (or similar block image) down below the cloud line */
.offset{	margin-top:9em !important; /* 9em */ }
.faqoffset{ margin-top:3em !important; /* 3em - IE not liking em */ }
.boxoffset{ margin-top:3em !important; /* 3em - IE not liking em */ }

/* Main page info */
#info{
	float:left;
	width:55em; /* 660px */
}

/* Product page */
#product{width:662px;}

#product #title, #product #image{ border:1px solid #fff; }

#product #title{
	color:#fff;
	background-color:#00a4e3;
	padding:.5em;
	font-weight:normal;
	font-size:200%; /* 24px */
	line-height:1em;
	margin-bottom:1em;
	border-top-width:0;
	width:auto;
	position:relative;
}

#product #description{
	font-size:125%; /* 15px */
	line-height:1.5em;
}
#product #description ul{ margin:2em; }
#product #price{
    font-size:1.3em;
    line-height: 1.5em;
    color: #666;
}
#product #image{ border-bottom-width:0; }
#product #imagescroll{float:right}


.nav a img{border:0}

.nav{
	bottom:3em;
	position:relative;
	text-align:right;
	margin:0 2em
}

/* faq page */
#faqicon{ margin:0 0 0 8em; position:absolute; top:-16em; /* -16em - IE not liking em */ }
.faq .hr{ width:45em; }

/* partner page */
.partnerform { width:45em; }
.partnerform .hr { width:45em; }
.partnerform select { margin-bottom: 1em; }
#partnerfooternote { width:45em; margin-top: 100px; }
.partnerform h4 { line-height: 22px; }

/* Downloads page */
#boxicon{ position:absolute; top:-16em; left:7em; }

#pc, #mac{
	float:left;
	padding:1.5em 0 0 5.5em;
	position:relative;
	right:2em;
	margin-top:17em;
}

#mac{background:url('../img/icon/apple.png') 0 0 no-repeat; }
#pc{ background:url('../img/icon/microsoft.png') 0 0 no-repeat; margin-right:2em; }

#pc .hr, #mac .hr { width:20em; margin:0 0 1em 0; }

#pc li, #mac li { list-style:disc; width:18em; }

#pc ul { margin:0 0 4em 1em; }
#mac ul { margin:0 0 5em 1em; }


/* Contact page */
#contact_form{ width:45em; }
#submit{ float:right; width:121px; height:72px; }

/* How it works page */
.step{ margin:0 0 4em 0; padding:2em 0 0 12em; }
.step .hr{ margin-left:0; width:40em }
#one{ background:url('../img/icon/step1.png') no-repeat; position:relative; }
#two{ background:url('../img/icon/step2.png') no-repeat; position:relative; margin-bottom:39em }
#three{ background:url('../img/icon/step3.png') no-repeat; }
#two img{position:absolute; right:-.5em}
#logos{ position:absolute; bottom:11em; right:3em}

/* Prices page */
table{ border:4px solid #fe4fde; }
td{ border-bottom:1px solid #ccc; background: #F2F2F2; vertical-align: top; color: #666666; }
#prices td{ padding:3px 12px 3px 12px; font-size: 11px; }
#prices thead td{ font-size: 1em; font-weight:bold; text-align:left;  color:#666666; vertical-align: top; padding: 8px 12px 8px 12px; line-height: 1em; }
#prices td.title{font-size:2em; color:#fff; border:0; text-align:left; padding: 7px 12px 9px 12px; }
#prices td.subheadertxt { background-color: #E6E6E6; font-size:1.2em; border-bottom: none; padding: 7px 12px 9px 12px;  }
#prices td.subheadertxt span { font-size: 0.7em !important; }
#prices thead td span{ text-transform: lowercase; font-size: 6px !important; }

.photobook thead td { background: #F7D0DD; }
.calendar thead td { background: #C9D6EF; }
.poster thead td { background: #F8CC9B; }
.card thead td { background: #D9EABF; }

 #prices .infocell { padding: 10px 15px !important; }
/* Section-specific colour overrrides */

/* Background colours */
#photobook, #photobook #footer, #photobook #cloud, #photobook #product #title, #photobook #cboxBottomCenter,
#photobook #cboxTopCenter, #photobook td.title, #prices .photobook td.title{ background-color:#db2772; }

#calendar, #calendar #footer, #calendar #cloud, #calendar #product #title, #calendar #cboxBottomCenter,
#calendar #cboxTopCenter, #calendar td.title, #prices .calendar td.title{ background-color:#5692CE; }

#poster, #poster #footer, #poster #cloud, #poster #product #title, #poster #cboxBottomCenter,
#poster #cboxTopCenter, #poster td.title, #prices .poster td.title{ background-color:#EC8D1C }

#card, #card #footer, #card #cloud, #card #product #title, #card #cboxBottomCenter, #card #cboxTopCenter,
#card td.title, #prices .card td.title{ background-color:#8DC63F !important; }

/* Text colour */
#photobook h3, #photobook .sidenav a:hover, #photobook .sidenav li:hover, #photobook .snippet a { color:#db2772 !important; }
#calendar h3, #calendar .sidenav a:hover, #calendar .sidenav li:hover, #calendar .snippet a { color:#00a4e3 !important; }
#poster h3, #poster .sidenav a:hover, #poster .sidenav li:hover, #poster .snippet a { color:#f05c2d !important; }
#card h3, #card .sidenav a:hover, #card .sidenav li:hover, #card .snippet a { color:#8cc640 !important; }
#download h3, #download .snippet a { color:#455560 !important; }

/* Border colour */
#photobook .snippet img, #photobook #options img, #prices table.photobook { border-color:#db2772 !important; }
#calendar .snippet img, #calendar #options img, #prices table.calendar { border-color:#5692CE !important; }
#poster .snippet img, #poster #options img, #prices table.poster { border-color:#EC8D1C !important; }
#card .snippet img, #card #options img, #prices table.card { border-color:#8DC63F !important; }
#download .snippet img, #download #options img{ border-color:#455560 !important; }

/* CSS sprite alignments */
#photobook .sidenav a:hover { background:url(../img/icon/star_ul.png) 0 -16px no-repeat;}
#calendar .sidenav a:hover { background:url(../img/icon/star_ul.png) 0 0 no-repeat;}
#poster .sidenav a:hover { background:url(../img/icon/star_ul.png) 0 -32px no-repeat;}
#card .sidenav a:hover { background:url(../img/icon/star_ul.png) 0 -48px no-repeat;}

#calendar .snippet .arrowbox { background-position: 0 -25px; }
#poster .snippet .arrowbox { background-position: 0 -50px; }
#card .snippet .arrowbox { background-position: 0 -75px; }



/* ColorBox Core Style */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* ColorBox Custom Style */
#colorbox{ visibility:hidden; }

#cboxOverlay{background:#000;}
#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight, #cboxMiddleLeft, #cboxMiddleRight{width:14px;}
#cboxLoadedContent{margin-bottom:0px; background:url('../img/blank.png' );}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-size:11px; color:#fff; font-weight:normal}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxSlideshow{position:absolute; bottom:-29px; width:23px; height:23px; text-indent:-9999px;}
#cboxClose{ background-position:-100px -25px; color:#fff; font-size:1.2em; position:relative; top:-42em; left:51em; }
#cboxClose.hover{background-position:-100px 0px;}
 
#modalgallery{ overflow:hidden}
#modalgallery h1{ background-image:none; padding:.25em 0 .25em 1em; font-size:2.9em; background:#db2772; margin:0; line-height:1.5em;}
#mainimage{ width:660px; }

/* Thumbnail sizes */
.gallery li{ width:66px; height:66px; overflow:hidden; float:left}
.gallery li img{ width:66px; height:66px; }
ul.gallery{ width:100%; padding-top:1em; }

#cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight{ height:38px; }
#cboxTopLeft, #cboxTopCenter, #cboxTopRight{ height:20px;  }


/* Brochure Edition */

#brochurecloud{height:27em;background:url(../img/bg/brochure.png) bottom left repeat-x;position:absolute;width:100%;background-color:#00a4e3}
#brochure,#brochure #footer,#brochure #brochurecloud,#brochure #product #title,#brochure #cboxBottomCenter,#brochure #cboxTopCenter,#brochure td.title,#prices .brochure td.title{background-color:#C5BA9E}
#brochure h3,#brochure .sidenav a:hover,#brochure .sidenav li:hover,#brochure .snippet a{color:#C5BA9E !important}
#brochure .snippet img,#brochure #options img,#prices table.brochure{border-color:#C5BA9E !important}

#nav .brochurehome{margin-left:532px}

/* Section and product snippets */
.clear { clear: both; }

#brochureinfo{ float:left; width:940px; margin:0px; padding:0px; /* 660px */}
#brochureinfo h2 { font-family:Verdana; color:#C5BA9E;	font-size:20px;	font-weight:bold; line-height:1em;}

.brochuresnippet { width:286px; margin:0 25px 0 0; float:left; }
.brochuresnippet ul { padding: 0px 0px 0px 0px; margin: 0px 0px 20px 20px; }
.brochuresnippet ul li { font-size:11px; line-height:1em; margin:.5em 0; color:#736857 !important}
.brochuresnippet p a{ font-style: italic }
.brochuresnippet a:hover{ color:#fff !important; }
.brochuresnippet img{ border:1px solid #736857; width:286px; margin: 0 0 10px 0; /* 120px */ height:174px; /* 120px */}

.brochuresnippetend { width:286px; margin:0 20px 0 0; float:left; }
.brochuresnippetend ul { padding: 0px 0px 0px 0px; margin: 0px 0px 20px 20px; }
.brochuresnippetend ul li { font-size:11px; line-height:1em; margin:.5em 0; color:#736857 !important}
.brochuresnippetend p a{ font-style: italic }
.brochuresnippetend a:hover{ color:#fff !important; }
.brochuresnippetend img{ border:1px solid #736857; width:286px; margin: 0 0 10px 0; /* 120px */ height:174px; /* 120px */}

#column01 { float:left; width:286px; margin:0 25px 0 0; padding: 20px 0 0 20px;}
#column01 h2 { font-family:Verdana; color:#C5BA9E;	font-size:20px;	font-weight:bold; line-height:1em;}
#column01 ul { padding: 0px 0px 0px 0px; margin: 0px 0px 20px 20px; }
#column01 ul li { font-size:11px; line-height:1em; margin:.5em 0; color:#B1A78E !important}

#column02 { float:left; width:286px; margin:0 25px 0 0; padding:0px; }
#column02 h2 { font-family:Verdana; color:#C5BA9E;	font-size:20px;	font-weight:bold; line-height:1em;}
#column02 ul { padding: 0px 0px 0px 0px; margin: 0px 0px 20px 20px; }
#column02 ul li { font-size:11px; line-height:1em; margin:.5em 0; color:#B1A78E !important}

#column03 { float:left; width:286px; margin:0px; padding:0px; }
#column03 h2 { font-family:Verdana; color:#C5BA9E;	font-size:20px;	font-weight:bold; line-height:1em;}
#column03 ul { padding: 0px 0px 0px 0px; margin: 0px 0px 20px 20px; }
#column03 ul li { font-size:11px; line-height:1em; margin:.5em 0; color:#B1A78E !important}

#brochurefooter{
	height:4em;
	background:url(../img/bg/brochure.png) top right repeat-x;
	background-color:#C5BA9E;
}
#brochurefooter .wrapper{ padding-top:0em; }
#brochurefooter ul{ float:left; margin:0 auto; padding:2em 0 0 2em; }
#brochurefooter li{
	padding:0 1em;
	margin-top:.5em;
	border:0 solid #fff;
	border-right-width:1px;
	float:left;
	line-height:1em;
}
#brochurefooter p { padding:2em; float:left; color:#fff;	}
#brochurefooter a { color:#fff !important; }
#brochurefooter li { display:inline; }

#brochureinfo table.brochure{border-color:#736857 !important; }
#brochureinfo td {border:1px solid #ccc; padding:2px; font-size: 95%; }
#brochureinfo td.title {background-color:#736857; border:1px solid #ccc; padding:2px; color:#FFFFFF; }


.movies { background:url('../img/icon/movie.png') no-repeat; }
.movies .hr{margin:1em 0 1em 0;height:10px;width:35em;background:url(../img/icon/star_hr.png) bottom left repeat-x}
.movies {margin:0em; padding:2em 0 0 12em}