/*======================================================================
    Document   : Main Styles - Alfred App - V2 -  Powerpack
    Author     : okavanagh - http://www.pepsmedia.com
    Description: Main Stylesheet - http://www.alfredapp.com
========================================================================*/

/* Base Colours 

Turquoise         #4bacbc
Purple            #5c1f87

*/

/* Main Layout styles ==================================================*/
html {
	margin-left: -1px; /* Hack fix to make the 1px background offset work */
}
html {
	height:101%; /* Fool the browser into thinking there is always a scroll bar */
}
body {
	background:#f2f2f2 url(../images/body-background.gif);
	text-align:center;
	width:100%;
}
#container {
	height:100%;
	text-align:center;
	position:relative;
	width:100%;
}
/* For the back to the link */
p#top {
	height:1px; 
	margin:-1px 0 0 0;
}
/* For some of the content we'll need a holder as it is 100% wide */
.content {
  margin:0 auto;
  overflow:hidden; /* Clear any floated items */
  text-align:left;
  position:relative;
  width:940px;
}

/* Header menu =========================================================*/
#top-bar-menu {
	background:#501e73;
	border-bottom:1px solid #300b4c;
	float:left;
	font-size:15px;
	height:24px;
	left:0;
	line-height:normal;
	list-style:none;
	margin:0;
	padding:9px 0 3px 0;
	position:fixed;
	top:0;
	width:100%;
	z-index:95;
	/* CSS3 Properties */
	box-shadow:0 1px 5px #210634;
  -moz-box-shadow:0 1px 5px #210634;
  -webkit-box-shadow:0 1px 5px #210634;
}
#top-bar-menu ul {
	clear:left;
	float:left;
	left:50%;
	position:relative;
	text-align:center;
}
#top-bar-menu ul li {
	float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  right:50%;
}
#top-bar-menu ul li a {
	border-right:1px solid #210c31;
	border-left:1px solid #641e94;
	color:#dfc2f3;
	display:block;
	padding:0 20px 0 20px;
	/* CSS3 Properties */
	text-shadow: -1px -1px -1px #000;
}
#top-bar-menu ul li a:hover,
#top-bar-menu ul li a.active {
  color:#fff;
}
#top-bar-menu ul li:first-child a {
	border-left:none;
}
#top-bar-menu ul li:last-child a {
	border-right:none;
}
/* Special Powerpack button in the top menu */
#top-bar-menu ul li.powerpack {
  position:relative;
  width:121px;
}
#top-bar-menu ul li.powerpack a {
  background:url(../images/buy-powerpack-banner.png);
  border:0;
  color:#fff;
  display:inline-block;
  font-family:"adelle-1","adelle-2";
  font-size:16px;
  height:45px;
  left:-5px;
  padding:15px 10px 20px 10px;
  position:absolute;
  top:-9px;
  width:121px;
  text-shadow:none;
}

/* Header ================================================================*/
#header {
  background:#5c1f87 url(../images/header-background.jpg) no-repeat center top;
  border-bottom:1px solid #300b4c;
  color:#e7c7ff;
  overflow:hidden; /* Clear the floated list items */
  text-align:left;
  position:relative;
  width:100%;
  z-index:10;
  /* CSS3 Properties */
  box-shadow:0 1px 10px #3e3e3e;
  -moz-box-shadow:-10px 1px 10px #3e3e3e;
  -webkit-box-shadow:0 1px 10px #3e3e3e;
}
#header h2 {
  color:#e7c7ff;
}
#header p,
#header ul {
  letter-spacing:-0.1px;
  text-shadow:0 0 5px #000;
}
#header ul {
  margin-left:20px;
}
#header ul li {
  margin-bottom:9px;
}
#header #left-column {
  color:#fff;
}
#header #left-column em {
  color:#4bacbc;
}
#header #right-column em {
  color:#fff;
}
#header hr {
  background: url(../images/header-hr.png) no-repeat center; 
}

/* The homepage styles =================================================================== */
/* The powerpack button in the header has smaller text */
.home_page #header {
  border-bottom:1px solid #300b4c;
  /* CSS3 Properties */
  box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
}
.home_page #header .button.powerpack {
  font-size:18px;
  line-height:18px;
}
.home_page #header .button {
  margin-bottom:5px;
}
.home_page #header {
  height:700px;
}
.home_page #header h1 {
  background:url(../images/alfred-header.png) no-repeat top left;
  display:block;
  height:98px;
  margin-left:40px;
  text-indent:-9999px;
  width:378px;
}
.home_page #header a#alfred-icon {
  display:block;
  height:353px;
  margin-bottom:18px;
  width:430px;
}
.home_page #header #left-column,
.home_page #header #right-column {
  float:left;
  left:50%;
  margin-top:80px;
  position:relative;
}
.home_page #header #right-column {
  margin-left:-30px;
  padding-top:36px;
  width:500px;
}
.home_page #header #left-column {
  margin-left:-470px;
  text-align:center;
  width:430px;
}

/* Quotes section =====================================================*/
#alfred-quotes {
  background:#501e73;
  border-bottom:1px solid #300b4c;
  color:#fff;
  padding:18px 0 18px 0;
  position:relative;
  /* CSS3 Properties */
  box-shadow:0 1px 10px #3e3e3e;
  -moz-box-shadow:-10px 1px 10px #3e3e3e;
  -webkit-box-shadow:0 1px 10px #3e3e3e;
}
#alfred-quotes a {
  color:#dfc2f3;
}
#alfred-quotes a:hover {
  color:#fff;
}

/* Next and Previous buttons */
#alfred-quotes #next,
#alfred-quotes #prev {
  background:url(../images/quotes/button-controls.png) no-repeat;
  display:block;
  cursor:pointer;
  height:29px;
  margin-top:-15px;
  position:absolute;
  text-indent:-9999px;
  top:50%;
  width:16px;
  z-index:40;
}
#alfred-quotes #next {
  background-position:top right;
  left:50%;
  margin-left:460px;
}
#alfred-quotes #next:hover {
  background-position:bottom right;
}
#alfred-quotes #prev {
  background-position:top left;
  left:50%;
  margin-left:-465px;
}
#alfred-quotes #prev:hover {
  background-position:bottom left;
}
#alfred-quotes ul {
  list-style:none;
  margin:0 auto;
  position:relative;
  width:940px;
}
#alfred-quotes ul li {
  display:inline;
  float:left;
  text-align:left;
  margin:0;
  padding:15px 40px 0 50px;
  width:870px;
}
#alfred-quotes blockquote {
  float:left;
  padding:0 20px 0 110px;
  position:relative;
  width:300px;
}
#alfred-quotes blockquote img {
  left:0;
  margin-top:-10px;
  position:absolute;
  top:0;
}
#alfred-quotes blockquote cite {
  font-size:15px;
}
#alfred-quotes blockquote p {
  display:inline-block;
  margin:0;
  width:300px;
}
#alfred-quotes p span {
  color:#7b2daf;
  font-family:"adelle-1","adelle-2", Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
  font-size:50px;
  line-height:15px;
  top:25px;
  padding:0 5px;
  position:relative;
}
#alfred-quotes p span:first-of-type {
  padding:0 5px 0 0;
}
/* Shade overt the edges for the sliding */
#alfred-quotes img.shade-left,
#alfred-quotes img.shade-right {
  height:140px;
  left:50%;
  top:0;
  position:absolute;
  width:57px;
  z-index:30;
}
#alfred-quotes img.shade-left {
  margin-left:-480px;
}
#alfred-quotes img.shade-right {
  margin-left:430px;
}

/* More testimonials link */
a.more-testimonials {
  background:#501e73;
  border-top:1px solid #300b4c;
  border-right:1px solid #300b4c;
  border-left:1px solid #300b4c;
  font-family:Helvetica Neue, Helvetica, Arial,  sans-serif;
  font-size:11px;
  height:15px;
  left:50%;
  margin-left:300px;
  padding:2px 10px 2px 10px;
  position:absolute;
  top:-20px;
  text-transform:uppercase;
  z-index:20;
  /* CSS3 Properties */
  border-radius:3px 3px 0 0;
  -moz-border-radius:3px 3px 0 0;
  -webkit-border-radius:3px 3px 0 0;
}

/* Features Section ===================================================*/
#alfred-features {
  border-bottom:1px solid #b3b3b3;
  padding:50px 0 50px 0;
  position:relative;
	width:100%;
}
#alfred-features h3 {
	background:url(../images/features-header.png) top left no-repeat;
	height:50px;
	margin:0 auto 18px auto;
	text-indent:-9999px;
	width:268px;
}
/* Thumbnail Tabbed Gallery ===========================================*/
#feature-thumbnails {
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  width:400px;
}
#feature-thumbnails li {
  float:left;
  height:140px;
  margin:0 40px 20px 0;
  padding:0;
  width:140px;
}
#feature-thumbnails li a {
  border:1px solid #b3b3b3;
  height:138px;
  display:block;
  overflow:hidden;
  width:138px;
}
#feature-thumbnails li a:hover,
#feature-thumbnails li.active a {
  border:1px solid #401063;
  /* CSS3 Properties */
  box-shadow:0 0 5px #b0b0b0;
  -webkit-box-shadow:0 0 5px #b0b0b0;
  -moz-box-shadow:0 0 5px #b0b0b0;
}
#feature-thumbnails li a:hover img,
#feature-thumbnails li.active a img {
  margin-top:-138px;
}
/* Main Content area */
#feature-content {
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  width:540px;
}
#feature-content li {
  margin:0;
  position:relative;
}
#feature-content li.loading {
  padding-top:50px;
}
#feature-content li.powerpack a {
  color:#4bacbc;
}
#feature-content li.powerpack a:hover {
  color:#2a6e79;
}
#feature-content li.powerpack a.icon {
  background:url(../images/small-battery-icon.png) no-repeat 100% 50%;
  font-family:Helvetica Neue, Helvetica, Arial,  sans-serif;
  font-size:11px;
  float:right;
  margin:-57px 0 0 0;
  padding:3px 22px 3px 0;
  position:relative;
  text-transform:uppercase;
}
#feature-content h4 {
  background:url(../images/features-border.gif) repeat-x bottom left;
  padding-bottom:18px;
}
#feature-content img {
  border:1px solid #401063;
  display:block;
  height:315px;
  left:0;
  position:absolute;
  top:0;
  width:538px;
}

/* Download Alfred section ============================================*/
#download-alfred {
  background:url(../images/wallpaper-grey.gif) top left;
  border-bottom:1px solid #b3b3b3;
	padding:50px 0 50px 0;
	position:relative;
	width:100%;
	/* CSS3 Properties */
	box-shadow:0 -1px 10px #b0b0b0;
  -moz-box-shadow:-10px -1px 10px #b0b0b0;
  -webkit-box-shadow:0 -1px 10px #b0b0b0;
}
#download-alfred h3 {
	background:url(../images/download-header.png) top left no-repeat;
	height:53px;
	margin:0 auto 18px auto;
	text-indent:-9999px;
	width:537px;
}
/* Two columns - one for downloading alfred and one for the power pack */
#download-alfred .download-box {
  background:url(../images/download-box-top.png) top left no-repeat;
  background:url(../images/download-box-top.png) top left no-repeat, url(../images/download-box-bottom.png) bottom left no-repeat;
  float:left;
  left:50%;
  margin:0 0 18px 0;
  text-align:left;
  padding:55px 0 40px 0;
  position:relative;
  width:460px;
}
#download-alfred .download-box .box-content {
  background:#fff;
  padding:20px 20px 20px 20px;
  width:420px;
}
#download-alfred .download-box h4 {
  font-size:36px;
  line-height:36px;
  margin-bottom:9px;
}
#download-alfred .download-box h5 {
  font-size:28px;
}
#download-alfred #free-download.download-box {
  margin-left:-470px;
}
#download-alfred .button {
  margin:0 0 0 70px;
}
/* Free download styles */
#download-alfred #free-download .box-content {
  background: #fff url(../images/free-stamp.png) no-repeat 330px top ;
}
#download-alfred #free-download em {
  color: #5c1f87;
}
/* Powerpack styles */
#download-alfred #powerpack-download {
  margin-left:10px;
}
#download-alfred #powerpack-download .box-content {
  background: #fff url(../images/beta-release-stamp.png) no-repeat 330px top ;
}
#download-alfred #powerpack-download h4,
#download-alfred #powerpack-download em {
  color: #4bacbc;
}
#download-alfred #powerpack-download a.button:hover {
  box-shadow:0 0 10px #2c95af;
  -webkit-box-shadow:0 0 10px #2c95af;
  -moz-box-shadow:0 0 10px #2c95af;
}
/* Stay in touch ============================================*/
#stay-in-touch {
  border-bottom:1px solid #b3b3b3;
	padding:50px 0 50px 0;
	position:relative;
	width:100%;
}
#stay-in-touch h3 {
	background:url(../images/stay-in-touch-header.png) top left no-repeat;
	height:68px;
	margin:0 auto 20px auto;
	text-indent:-9999px;
	width:421px;
}
#stay-in-touch form {
	display:block;
	margin-top:18px;
	width:100%;
}
#stay-in-touch form label {
	display:none;
}
#stay-in-touch form label span {
	color:#5c1f87;
	text-transform: uppercase;
}
#stay-in-touch form input[type="text"] {
	display:block;
	margin:5px auto 10px auto;
	min-width:300px;
	max-width:500px;
	padding:10px 20px 10px 20px;
	text-align:center;
	width:65%;
}
#stay-in-touch form input[type="submit"] {
  cursor:pointer;
  margin-bottom:9px;
}
#stay-in-touch form input[type="submit"]:hover {
  -webkit-transition: all 0.1s linear;
}
#stay-in-touch p {
	margin:0 auto;
	width:75%;
	max-width:640px;
}
#stay-in-touch p.hint {
  color:#999;
  font-size:13px;
  line-height:18px;
  margin-top:9px;
}

/* Meet the Team ============================================*/
#meet-the-team {
	background:url(../images/wallpaper-grey.gif) top left;
	padding:50px 0 50px 0;
	position:relative;
	width:100%;
	/* CSS3 Properties */
	box-shadow:0 -1px 10px #b0b0b0;
  -moz-box-shadow:-10px -1px 10px #b0b0b0;
  -webkit-box-shadow:0 -1px 10px #b0b0b0;
}
#meet-the-team h3 {
	background:url(../images/meet-the-team-header.png) top left no-repeat;
	height:52px;
	margin:0 auto 15px auto;
	text-indent:-9999px;
	width:459px;
}
#meet-the-team h4 {
  background:url(../images/features-border.gif) repeat-x bottom left;
  padding:0 0 12px 0;
}
#meet-the-team ul {
	list-style:none;
	margin:0 auto 18px auto;
	text-align:center;
	width:940px;
}
#meet-the-team ul li {
	display:block;
	float:left;
	margin:0 0 30px 2%;
	text-align:left;
	width:32%;
}
/* Rest the third items margin back to 0 */
#meet-the-team ul li:first-child {
	margin-left:0;
}
#meet-the-team ul li img {
	display:block;
	margin-bottom:20px;
	width:100%;
}
#meet-the-team ul li h4 {
	font-weight:normal;
}

/* Terms and Conditions area ===============================*/
/* We hide this using facebox but need it to show if javascript turned off */
#terms-and-conditions {
	overflow:hidden;
	padding:50px 50px 32px 50px;
}
#terms-and-conditions ol {
  list-style:none;
  margin:0;
}
#terms-and-conditions h3.terms {
	background:url(../images/terms-header.png) top left no-repeat;
	height:40px;
	margin:0 auto 15px auto;
	text-indent:-9999px;
	width:301px;
}
#terms-and-conditions h3.privacy {
	background:url(../images/privacy-header.png) top left no-repeat;
	height:50px;
	margin:60px auto 15px auto;
	text-indent:-9999px;
	width:335px;
}

/* Footer ==================================================*/
#footer {
	background:#501e73 url(../images/footer-background.gif) repeat-x bottom left;
	color:#8942bc;
	padding:18px 0 0 0;
	position:relative;
	width:100%;
	z-index:100;
	/* CSS3 Properties */
  text-shadow:-1px -1px 1px #000;
}
#footer p {
  margin:0;
  overflow:hidden;
  padding:9px 0;
}
#footer p img {
  margin-top:-5px;
  position:relative;
}
#footer a {
  color:#8942bc;
}
#footer a:hover {
  color:#fff;
}
#footer img {
  vertical-align:middle;
}
#footer span {
  float:right;
  margin-right:37px;
}
#footer ul {
  margin:0 0 9px 0;
  overflow:hidden;
}
#footer ul li {
  float:left;
  list-style:none;
  margin:0 20px 18px 0;
  width:300px;
}
#footer ul li.last {
  margin-right:0;
}
#footer ul li a {
  padding:3px 0 3px 35px;
}
#footer ul li a.contact {
  background:url(../images/icons/footer-contact.png) 0 50% no-repeat;
}
#footer ul li a.forum {
  background:url(../images/icons/footer-forum.png) 0 50% no-repeat;
}
#footer ul li a.newsletter {
  background:url(../images/icons/footer-newsletter.png) 0 50% no-repeat;
}
#footer ul li a.twitter {
  background:url(../images/icons/footer-twitter.png) 0 50% no-repeat;
}
#footer ul li a.blog {
  background:url(../images/icons/footer-blog.png) 0 50% no-repeat;
}
#footer ul li a.help {
  background:url(../images/icons/footer-help.png) 0 50% no-repeat;
}

/* The Modal window facebox ================================*/
#facebox .popup {
  position: relative;
}
#facebox {
  border:1px solid #5c1f87;
  background: #fff;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 100;
  /*CSS3 properties*/
  box-shadow:0 0 30px #000;
	-webkit-box-shadow:0 0 30px #000;
	-moz-box-shadow:0 0 30px #000;
}
#facebox #terms-and-conditions {
	background:#fff;
	height:400px;
	overflow-y:auto;
}
#facebox img {
  display:block;
}
#facebox .loading {
  height:32px;
  left:50%;
  margin:-16px 0 0 -16px;
  position:absolute;
  top:50%;
  text-align:center;
  width:32px;
}
#facebox .image {
  text-align: center;
  width:648px;
}
#facebox .close {
	margin:-13px -8px 0 0;
	position:absolute;
	right:0;
	top:0;
	z-index:10000;
}
#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.facebox_hide {
  z-index:-100;
}
.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}
/* For the next and previous links */
#facebox .prev,
#facebox .next {
  position:absolute;
  bottom:0;
}
#facebox .prev {
  left:0;
  margin:0 0 -10px -10px;
}
#facebox .next {
  right:0;
  margin:0 -10px -10px 0;
}

/* The uh oh page ========================================== */
.uhoh_page h2 {
  padding-top:100px;
}
.uhoh_page object {
  border:1px solid #5c1f87;
  margin-bottom:150px;
  /* CSS3 */
  box-shadow:0 0 10px #210634;
  -webkit-box-shadow:0 0 10px #210634;
  -moz-box-shadow:0 0 10px #210634;
}

/* Thank you page ========================================== */
.thank_you .content {
  text-align:center;
}
.thank_you h1 {
	background:url(../images/thank-you-header.png) top left no-repeat;
	height:39px;
	margin:100px auto 20px;
	text-indent:-9999px;
	width:250px;
}