* {
  color: #333;
}

body {
  font-family: 'Myriad Pro', Helvetica, sans-serif;
  margin: 0 25px;
  font-size: 1em; 
  line-height: 1.5;
}

div#page {
  width: 100%;
  max-width: 900px;
  position: relative;
  margin: 20px auto 50px;
}

/*******************  Header  ******************/

div#header {
  background: url(images/appicon_128.png) no-repeat;
  margin-top: 30px;
}

div#homeLink {
  position: absolute;
  top: -15px;
  right: 0;
  font-size: .9em;
  background: url(../images/homeIcon.png) no-repeat 1px left;
  padding-left: 20px;
}

/********  Banner  *********/

div#bannertext {
  margin-left: 140px;
}

div#bannertext p {
  margin: 0;
  padding: 0;
  line-height: 1;
}

p#user_manual {
  font-size: 1em;
  text-transform: uppercase;
  padding-top: 14px !important;
}

p#app_name {
	font-weight: 900;
	font-size: 4.4em;
}

p#app_platform {
  font-weight: 100;
  font-size: 2.2em;
  margin-top: -.2em !important;
}

@media screen and (max-width: 670px) {
  body {
    background: url(images/appicon_128_corner.png) top right no-repeat;
  } 
  
  div#header {
    background: none;
  }
  
  div#bannertext {
    margin-left: 0;
  }
  
  p#user_manual {
    font-size: .9em;
    padding-top: 0 !important;
  }
  
  p#app_name {
    font-size: 3.5em;
  }
  
  p#app_platform {
    font-size: 1.8em;
  }
  
  div#navtext {
    margin-top: 20px !important;
  }
}

@media screen and (max-width: 400px) {
  p#user_manual {
    font-size: .6em;
    padding-top: 0 !important;
  }
  
  p#app_name {
    font-size: 2.3em;
  }
  
  p#app_platform {
    font-size: 1.2em;
  }
}

/********  Navigation  *********/

div#navtext {
  width: 100%;
  text-align: right;
  border-bottom: 7px #ddd solid;
  line-height: 1.5;
  padding: 0;
  margin-top: 10px;
}

div#navtext ul {
  margin: 0;
  padding: 0;
}

div#navtext li {
  display: inline;
  margin-left: 15px;
}

@media screen and (max-width: 900px) {
  div#navtext {
    margin-top: 25px;
    text-align: left;
    clear: both;
  }
  
  div#navtext li {
    margin: 0 15px 0 0;
  }
}

/*********************  Content  **********************/

a, a:link, a:hover, a:active { 
  text-decoration: none;
  color: #1b71ce; 
}

a:hover {
  color: #377cbc;
  border-bottom: dotted #377cbc 1px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Myriad Pro', Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  margin-top: 1em;
}

h1, h2 {
  clear: both;
}

h1 {font-size: 2.2em;}

h2 {font-size: 1.5em;}

h3 {font-size: 1.3em;}

h4 {font-size: 1.1em;}

h5 {font-size: 1em;}

h6 {font-size: 1em;}

p, ol, ul {
  margin-top: 1em;
  margin-bottom: 0;
}

#content li {
  margin-top: .2em;
}

hr {
  height: 1px;
  color: #bbb;
  background-color: #bbb;
  border: none;
  margin-top: 10px;
  display: none;
}

div.maruku_toc ul li {
  margin-left: 1em;
  text-indent: -1em;
}

/***************  Image settings  ****************/

img { 
  border: 7px #ddd solid;
  display: block;
  margin: 25px;
  max-width: 100%;
}

img.center {
  margin: 25px auto;
  clear: both;
  border: none;
}

img.right {
  float: right;
  clear: right;
  margin-right: 0;
  margin-top: 0;
  max-width: 50%;
}

img.left {
  float: left;
  clear: left;
  margin-left: 0;
  margin-top: 0;
  max-width: 50%;
}

img.maxwidth70 {max-width: 70% !important;}
img.maxwidth50 {max-width: 50% !important;}
img.maxwidth30 {max-width: 30% !important;}

img.noborder {
  border: none;
}

/****************  Bottom nav links  ***************/

div#lowernav {
  margin: 50px 0;
  font-size: 1.2em;
}

div.lowernav.side {
  margin-bottom: 25px;
  max-width: 300px;
}

div.lowernav.left {
  float: left;
  text-align: left;
  margin-left: 1em;
}

div.lowernav.right {
  float: right;
  text-align: right;
  margin-right: 1em;
}

div.lowernav.middle {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

@media screen and (max-width: 600px) {
  div.lowernav.middle {
    clear: both;
    width: 100%;
    padding-top: 25px;
  }
  div.lowernav.side {
    max-width: none;
  }
}

@media screen and (max-width: 900px) {
  div.lowernav.middle {
    clear: both;
    width: 100%;
    padding-top: 25px;
  }
}

div.lowernav span.arrow {
  position: absolute;
  color: inherit;
}

div.lowernav span.arrow.left {
  left: 0;
}

div.lowernav span.arrow.right {
  right: 0;
}

.clearboth {
  clear: both;
}

/****************  Table settings  ***************/

table.setupStepBoxes {
  max-width: 100%;
}

table.setupStepBoxes td {
   width: 33%;
   min-width: 150px;
   max-width: 330px;
   vertical-align: top;
}

table.setupStepBoxes img {
   margin: 10px 5px;
   width: 100%;
   max-width: 320px;
}

table.setupStepBoxes p {
   margin: 10px 5px;
   line-height: 1.1;
   font-size: .9em;
}

img.stepbystep {
  float: left;
  margin: 0 20px 20px 0;
}

div.stepbystep {
  clear: both;
  padding-top: 20px;
}

div.stepbystep p {
  margin: 20px 0;
}

@media screen and (max-width: 670px) {
  div.stepbystep p {
    clear: both;
  }
}

/****************  Print settings  ***************/

@media print {
  div#header, 
  div.maruku_toc, 
  div#lowernav,
  object,
  iframe {
    display: none;
  }
  
  h1 {
    margin-top: 0;
  }
}

/****************  FAQ  ***************/

#leftColumn {
	width: 50%;
	float: left;
}

#rightColumn {
	width: 50%;
	float: right;
}

#leftColumn ul.faqSection {
	margin-left: 0;
	margin-right: 12px;
}

#rightColumn ul.faqSection {
	margin-right: 0;
	margin-left: 12px;
}

@media screen and (max-width: 670px) {
  #leftColumn {
  	width: 100%;
  	float: none;
  }

  #rightColumn {
  	width: 100%;
  	float: none;
  }

  #leftColumn ul.faqSection {
  	margin-right: 0;
  }

  #rightColumn ul.faqSection {
  	margin-left: 0;
  }
}

ul.faqSection {
	list-style: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
	padding: 0 0 10px;
	line-height: 1;
	margin: 20px 0;
}

ul.faqSection li.hot {
	background: url(images/faq/hot-item.png) no-repeat 1px 2px;
}

ul.faqSection li {
	background: url(images/faq/link-arrow.png) no-repeat 17px 6px;
	color: #333;
	padding: 6px 15px 6px 40px;
}

ul.faqSection li a {
	color: #333;
	text-decoration: none;
}

ul.faqSection li a:hover {
	color: #297acc;
}

ul.faqSection .header {
	background-color: #ccc;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F1F1F1), to(#CCCCCC));
    -webkit-border-top-right-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
	font-size: 20px;
	font-weight: bold;
	color: #297acc;
	text-shadow: #fff 0 1px 0;
	line-height: 20px;
	padding: 7px 7px 11px;
	margin-bottom: 8px;
}

ul.faqSection .header img {
	float: left;
	margin: -22px -5px -5px -15px;
	border: none;
}