@charset "UTF-8";
/* CSS Document */


/* ---- reset ------*/

* {margin:0;padding:0;}
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em;font-weight:normal;font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse;border-spacing:0;}
td {vertical-align:top;}
.clear {clear:both; width: 0px;}
.left {float: left;}
.right {float: right;}


/* --------------------- body ---------------------- */


body {
  background: #006785;/* url(../gfx/strip.png) 0 0;*/
	font: 62.5% "proxima-nova-1","proxima-nova-2",'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-align: center;
	color: #FFF;
}

body#interior {
  background: #0E182D url(../images/bg_interior.png) 0 0 repeat-x;
}

#container {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	background: url(../images/highlight.png) no-repeat;
}

#interiorContainer {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	background: url(../images/interior_highlight.png) no-repeat;
}

.mbr a {
  position: fixed;
  bottom: 30px;
  right: 0;
  width: 112px;
  height: 54px;
  background: url(../images/mbr.png) no-repeat;
}

.mbr a:hover {
  background-position: 0 -54px;
}


/* ------------ text ------------ */

h1 {
	padding: 30px 0 0 60px;
	font-size: 2.4em;
	font-weight: 700;
	color: #24648D;
	text-shadow: 0 1px 2px #000;
}

h2 {
	font-size: 2em;
	font-weight: 600;
	color: #3399FF;
	text-shadow: 0 1px 2px #0E182D;
}

h3 {
  font-size: 2.1em;
  font-weight: 600;
  color: #24648D;  
	text-shadow: 0 1px #000;
}

h3 span {
  color: #FFF;  
}

p {
	font-size: 1.4em;
	color: #FFF;
}

p a {
  color: #3399FF;
  text-decoration: underline;  
}

p a:hover {
  color: #6ABDFF;  
}

h4 {
  font-size: 2.6em;
  font-weight: 700;
  color: #349CFF;
  padding: 0 0 10px 30px;
  border-bottom: 1px solid #29354B;
}

h5 {
  font-size: 2.2em;
  color: #ABD7FF;
  font-weight: 700;
  padding: 30px 0 8px;  
}

a {
  text-decoration: none;  
}

strong {
  font-weight: bold;  
}

small {
  font-size: .8em;  
}

a.dribbble {
  color: #ea4c89;  
}

/* ------------------- header --------------------- */

.header {
	width: 800px;
	height: 88px;
	margin: 0 auto;
}

.header img {
	position: absolute;
	top: 8px;
	width: 800px;
	height: 80px;
}

.header h1 span {color: #FFF;}

.background {
	position: absolute;
	top: -5px;
	left: 0px;
	display: block;
}


/* ------------------ feature --------------------- */

.feature {
	position: relative;
	min-height: 448px;
}

.feature .iOS {
	position: absolute;
	left: 48px;
	top: 115px;
}

.feature .iMac {
	position: absolute;
	right: 2px;
	top: 22px;
}


/* --------- button --------- */

.feature .buttons {
	width: 745px;
	margin: 0 auto;
}

.feature .buttonheaders {
	width: 745px;
	margin: 0 auto;
}

.feature .btnh_iOS {
	position: absolute;
	top: 417px;
	left: 300px;
	display: block;
}

.feature .btnh_iOS_free {
	position: absolute;
	top: 417px;
	left: 0px;
	display: block;
}

.feature .btn_iOS a, .feature .btn_iOS_free a, .feature .btn_Mac a {
	width: 270px;
	height: 64px;
}

.feature .btn_iOS a {
	position: absolute;
	top: 470px;
	left: 300px;
	background: url(../gfx/btn_iOS.png) no-repeat;
	display: block;
}

.feature .btn_iOS_free a {
	position: absolute;
	top: 470px;
	left: 0px;
	background: url(../gfx/btn_iOS_free.png) no-repeat;
	display: block;
}

.feature .btn_Mac a {
	position: absolute;
	top: 400px;
	right: 120px;
	background: url(../images/btn_iMac.png) no-repeat;
	display: block;
}

.feature .btn_iOS a:hover, .feature .btn_iOS_free a:hover, .feature .btn_Mac a:hover {
	background-position: 0 -64px;
}

/* --------- text --------- */

.text {
  width: 720px;
  margin: 60px auto 0;
  margin-bottom: 30px;  
}


/* ------------------ footer --------------------- */

#footer {
	width: 900px;
	margin: 0 auto 40px;
	overflow: hidden;
}

#footer ul {
	float: right;
}

#footer ul li {
	float: left;
	font-size: 1.4em;
	font-weight: 600;
	padding: 3px;
	color: #1D4363;
}

#footer ul li a {
	color: #1D4363;
	text-decoration: none;
}

#footer ul li a:hover {
	color: #6ABDFF;
	text-decoration: underline;
}

#footer.interiorFooter {
  border-top: 1px solid #29354B;
  padding-top: 20px;
  margin-top: 20px;
}


/* ----------------------------------------------------------
-------------------------- interior -------------------------
---------------------------------------------------------- */

.interiorContent {
  padding: 50px 60px;  
}

.interiorContent p {
  color: #276E99;  
  font-size: 1.8em;
}

.bookmark {
  position: relative;
  width: 710px;
  margin: 10px auto 50px;  
}

.bookmarklet {
  position: absolute;
  right: 0;
  top: 6px;  
}

/* -------- faq --------- */

.faq {
  padding: 0 30px;  
}

.faq ul {
  margin: 10px 0;  
}

.faq ul li {
  font-size: 1.8em;
  line-height: 1.6em;
  color: #349CFF;
  list-style: square;
  margin-left: 30px;  
}

/* ----------- Slideshow */
/*body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset /
	margin:0px;
	padding:0px;
}

body{
	/* Setting default text color, background and a font stack /
	color:#444444;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
}*/

/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #005B76;
	-webkit-box-shadow:0 0 3px #005B76;
	box-shadow:0 0 3px #005B76;
	
	/* CSS3 Rounded Corners */
	
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	
	border:1px solid #005B76;
	
	background:url(../gfx/slideshow/panel.jpg) repeat-x bottom center #006785;
	
	/* The width of the gallery */
	width:920px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}

#slides{
	/* This is the slide area */
	height:400px;
	
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:920px;
	overflow:hidden;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	height:45px;
	text-align:center;
}

#menu ul{
	margin:0px;
	padding:0px;
}

#menu li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

#menu li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(../gfx/slideshow/pic_bg.png) repeat;
}

#menu li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(../gfx/slideshow/active_bg.png) no-repeat;
}

#menu li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(../gfx/slideshow/divider.png) no-repeat right;
}

#menu li a{
	display:block;
	background:url(../gfx/slideshow/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

#menu a img{
	border:none;
}