/* @group basics */

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

html, body {
  background: url(images/basics/bg.jpg) -70% -20%;
  -webkit-font-smoothing: antialiased;
}

.simple, #simple {
  background: none;
}

body {
  font: 14px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  color: #898a8a;
}

ul, ol {
  margin-bottom: 20px;
}

img {
  vertical-align: bottom;
  border-style: none;
  border-width: 0;
}

p {
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 15px;
  font-size: 26px;
  line-height: 36px;
  background-position: -1px 0;
  width: 210px;
  font-weight: normal;
  font-style: normal;
}

.h2 {
  margin-bottom: 15px;
  font-size: 18px;
  line-height: 26px;
  cursor: pointer;
  background-position: -1px 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
}

h4 {
  margin-bottom: 5px;
  font-size: 14px;
  line-height: 20px;
}

code {
  display: block;
  margin-bottom: 20px;
  border-left-style: solid;
  padding-left: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-left-width: 2px;
}

pre {
  display: block;
  margin-bottom: 20px;
  border-left-style: solid;
  padding-left: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-left-width: 2px;
  width: 599px;
  white-space: pre;
}

#main {
  width: 919px;
  margin: 0 auto;
  padding-top: 30px;
}

a:link, a:visited {
  color: #424242;
}

a:link:hover, a:visited:hover {
  color: #85be1b;
}

a:link:activer, a:visited:active {
  
}

blockquote {
  
}

blockquote p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
}

blockquote strong {
  font: normal bold 12px "Lucida Grande", Lucida, Verdana, sans-serif;
}

/* @end */

/* @group essentials */

/* @group header */

#header {
  width: 859px;
  margin: 0 auto;
  display: block;
  height: 124px;
  overflow: hidden;
  background-image: url(images/essentials/header/bg.png);
  padding: 15px 30px 0;
  position: relative;
}

#headerhome {
  width: 859px;
  margin: 0 auto;
  display: block;
  height: 72px;
  overflow: hidden;
  background-image: url(images/essentials/header/bghome.png);
  padding: 15px 30px 0;
  position: relative;
}

/* @group fade */

#fade {
  display: block;
  text-indent: -9999px;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
}

#fade:hover {
  opacity: 0.5;
}

#fade:active {
  opacity: 0.2;
}

/* @end */

/* @group logo */

#logo {
  width: 258px;
  height: 46px;
  display: block;
  background-image: url(images/essentials/header/logo.png);
  text-indent: -9999px;
  position: absolute;
  top: 16px;
  left: 30px;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
}

#logo:hover {
  opacity: 0.5;
}

#logo:active {
  opacity: 0.2;
}

/* @end */

/* @group navigation */

#navigation {
  margin-left: 30px;
  height: 31px;
  position: absolute;
  top: 95px;
  left: -11px;
  text-shadow: #fffeff 1px 0 1px;
}

#navigation li {
  display: inline;
  float: left;
  background-repeat: no-repeat;
}

#navigation li a {
  font-size: 12px;
  line-height: 27px;
  float: left;
  display: inline;
  padding-right: 12px;
  text-decoration: none;
  color: #a0a0a0;
  padding-left: 11px;
  height: 29px;
  background-repeat: no-repeat;
  padding-top: 2px;
}

#navigation li a span {
  display: block;
  height: 31px;
  padding-left: 25px;
  background-repeat: no-repeat;
  background-position: 0 5px;
  cursor: pointer;
}

#navigation li:hover {
  background: url(images/essentials/header/navigation/right.png) right 0;
}

#navigation li a:hover {
  background: url(images/essentials/header/navigation/left.png) no-repeat 0 0;
}

#navigation li:active {
  background-position: right -31px;
}

#navigation li a:active {
  background-repeat: no-repeat;
  background-position: 0 -31px;
}

#navigation li.active {
  background-position: right -31px;
}

#navigation li.active a {
  background-repeat: no-repeat;
  background-position: 0 -31px;
}

/* --- */

#towers #navigation li.nav-towers {
  background: url(images/essentials/header/navigation/right.png) right -31px;
}

#towers #navigation li.nav-towers a {
  background: url(images/essentials/header/navigation/left.png) no-repeat 0 -31px;
}

#sudoku #navigation li.nav-sudoku {
  background: url(images/essentials/header/navigation/right.png) right -31px;
}

#sudoku #navigation li.nav-sudoku a {
  background: url(images/essentials/header/navigation/left.png) no-repeat 0 -31px;
}

#pentarow #navigation li.nav-pentarow {
  background: url(images/essentials/header/navigation/right.png) right -31px;
}

#pentarow #navigation li.nav-pentarow a {
  background: url(images/essentials/header/navigation/left.png) no-repeat 0 -31px;
}

/* --- */

#navigation .nav-towers span {
  background-image: url(images/pages/towers/icon-16.png);
}

#navigation .nav-sudoku span {
  background-image: url(images/pages/sudoku/icon-16.png);
}

#navigation .nav-pentarow span {
  background-image: url(images/pages/pentarow/icon-16.png);
}

/* @end */

/* @group service */

#service {
  font-size: 12px;
  line-height: 17px;
  color: #a9a9a9;
  text-shadow: #fffeff 0 1px 0;
  position: absolute;
  top: 33px;
  right: 14px;
  text-shadow: #fffeff 0 1px 0;
}

#service li {
  display: inline;
  margin-right: 15px;
}

#service li a {
  color: #aaa;
  text-decoration: none;
}

#service li a:hover {
  text-decoration: underline;
}

/* @end */

/* @end */

/* @group heading */

#heading {
  background: none no-repeat;
  padding: 3px 30px 0;
  height: 114px;
  overflow: hidden;
  position: relative;
}

/* @group title */

#title {
  padding-left: 130px;
  height: 88px;
  padding-top: 25px;
  position: absolute;
  width: 380px;
  display: block;
  top: 3px;
  left: 30px;
}

#title img {
  position: absolute;
  top: 16px;
  left: -4px;
}

#title .slogan {
  font-style: italic;
  text-shadow: #fffeff 0 1px 1px;
  color: #acacac;
}

/* @end */

/* @group download */

#download {
  width: 327px;
  overflow: hidden;
  height: 70px;
  padding-top: 42px;
  position: absolute;
  top: 1px;
  right: 28px;
}

#download #info {
  float: right;
  width: 113px;
  font-size: 12px;
  line-height: 17px;
  color: #a9a9a9;
  text-shadow: #fffeff 0 1px 0;
}

#download #info p {
  margin-bottom: 0;
}

/* @end */

/* @end */

/* @group content */

#content {
  background-image: url(images/essentials/content/bg.jpg);
  padding: 30px 10px 1px;
  zoom: 1;
}

#content ul li, 
#content ol li {
}

#content .container {
  width: 899px;
}

#content .container:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  zoom: 1;
}

/* @group welcome */

#welcome {
  padding: 0;
  width: 899px;
}

#welcome .text {
  padding-top: 24px;
}

/* @group more */

#more {
  clear: both;
  padding: 20px 68px 30px;
  background: url(images/essentials/content/section.png) no-repeat;
  width: 763px;
  margin: 0;
  position: relative;
  z-index: 1;
}

#more:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  zoom: 1;
}

#more .button {
  float: left;
  margin-top: 21px;
}

/* @end */

/* @end */

/* @group features */

#home h3 strong {
  font-size: 18px;
  font-weight: normal;
}

#home #main p strong {
  color: #82be00;
} 

#home #features {
  margin-bottom: 0px;
  margin-top: -35px;
}

#features {
  margin-top: -40px;
  margin-bottom: 40px;
  height: 290px;
  background: url(images/essentials/content/section_separator.png) no-repeat 0 222px;
  position: relative;
  font-size: 12px;
  width: 899px;
}

#separatecontent {
  background: url(images/essentials/content/bg.jpg);
}

.highlights {
  background: none;
}

.main-caroussel {
  text-align: center;
}

.caroussel-img {
  margin-left: 28px;
  margin-bottom: 20px;
}

.caroussel-img-special {
  margin-left: 36px;
  margin-bottom: 20px;
}

.caroussel-bottom {
  margin-top: 158px;
}

.caroussel-bottom-new {
  margin-top: 158px;
  color: #82be00;
}

/* @group SeparateBlock */

#blockcontent {
  padding-top: 50px;
  padding-left:75px;
  padding-right:75px;
  padding-bottom: 1px;
  background: url(images/essentials/content/bg.jpg);
  font-size: 12px;
}

#blockbackground {
  background: url(images/pages/home/top.png) no-repeat 0 0;
  width: 910px;
  overflow: hidden;
  padding-top: 7px;
}

/* @end */

/* Elliott - the jQuery carousel takes care of this */

#features:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  zoom: 1;
}

#features ul {
  margin-bottom: 0;
  list-style-type: none;
  list-style-position: outside;
  width: 678px;
  position: absolute;
  height: 280px;
  margin-left: 106px;
}

#features ul:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  zoom: 1;
}

#features ul li {
  width: 225px;
  float: left;
  height: 280px;
  background: url(images/essentials/content/features.png) repeat-x 0 119px;
  overflow: hidden;
}

#features ul li a {
  display: block;
  width: 185px;
  height: 240px;
  color: #949495;
  text-decoration: none;
  background: url(images/essentials/content/features_separator.png) no-repeat right 0;
  position: relative;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: -0px;
}

#features ul li:hover a {
  opacity: 0.5;
  color: #949495 !important;
}

#features ul li img {
  position: absolute;
  left: 20px;
  bottom: 0px;
}

/* --- */

#features .h2 {
  display: block;
  margin-bottom: 15px;
}

/* --- */

#features .navigate {
  height: 39px;
  width: 17px;
  position: absolute;
  top: 139px;
  text-indent: -9999px;
  background-image: none;
}

#features .navigate.disabled {
  cursor: default;
}

#features .navigate.previous {
  left: -15px;
  background-position: 0 0;
}

#features .navigate.previous:hover {
  background-position: 0 -39px;
}

#features .navigate.previous.disabled {
  background-position: 0 -78px;
}

#features .navigate.next {
  right: -15px;
  background-position: -17px 0;
}

#features .navigate.next:hover {
  background-position: -17px -39px;
}

#features .navigate.next.disabled {
  background-position: -17px -78px;
}

/* @end */

/* @group section */

#home .section {
  margin-bottom: 25px;
}

.section {
  background: url(images/essentials/content/section.png) no-repeat center bottom;
  margin-bottom: 40px;
  clear: both;
  width: 899px;
  position: relative;
  padding-top: 0;
  padding-bottom: 1px;
}

.section:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  zoom: 1;
}

.page {
  padding: 0 68px 1px;
  background: url(images/essentials/content/section.png) no-repeat center bottom;
  margin-bottom: 40px;
  clear: both;
  width: 763px;
  position: relative;
}

.page.small {
  padding-left: 150px;
  padding-right: 150px;
  width: 599px;
}

.post {
  margin-bottom: 30px;
  padding: 0 150px 11px;
  width: 599px;
  clear: both;
  position: relative;
  background: url(images/essentials/content/section_separator.png) no-repeat 0 bottom;
}

.page:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
  zoom: 1;
}

.text {
  padding-bottom: 20px;
  width: 210px;
  float: left;
  margin: 0 0 0 68px;
}

.text.wide {
  width: 352px;
}

.text.wide h2 {
  margin: 0px;
  width: 360px;
}


.text.allwide {
  width: auto;
  clear: both;
  padding-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
  margin-right: 30px;
  float: none;
}

.text.allwide h2 {
  width: 600px;
}

h3 img {
  padding-right: 6px;
  margin-bottom: -5px;
}

#center {
  text-align:center;
  display:block;
}

.text.allwide h2 {
  margin: 0px;
}

.screenshot {
  list-style-type: none;
  margin-top: -11px;
}

.left .screenshot {
  float: right;
}

.left .inline {
  margin-top: 8px;
}

.right .text {
  float: right;
  margin: 0 68px 0 0;
}

.right .screenshot {
  float: left;
}

.center {
  float: center;
  text-align: center;
}

.content {
  float: right;
  width: 508px;
  padding-top: 11px;
}

.right .intro {
  float: right;
}

.right .content {
  float: left;
}

/* --- */

.separate {
  background-image: url(images/essentials/content/section_separator.png);
  padding-bottom: 11px;
  margin-bottom: 30px;
}

.last {
  background-image: none;
  margin-bottom: -34px;
}

.intro {
  padding-bottom: 20px;
  width: 210px;
  float: left;
}

.intro h2 {
  margin-bottom: 19px;
}

/* @end */

/* @group screenshots */

.screenshots {
  position: absolute;
  top: -10px;
  list-style-type: none;
  margin-bottom: 0;
  background-color: #fffeff;
  height: 516px;
  width: 899px;
}

.screenshots li {
  width: 814px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  margin-left: 46px;
}

.screenshots li:first-child {
  display: block;
}

/* @end */

/* @end */

/* @group footer */

#footer {
  width: 919px;
  margin: 0 auto;
  padding-top: 61px;
  text-align: center;
  background: url(images/essentials/footer/bg.jpg) no-repeat;
  color: #797979;
  text-shadow: rgba(255,254,255,0.73) 0 1px 1px;
  font: 11px/20px "Lucida Grande", Lucida, Verdana, sans-serif;
}

#footer a {
  font-weight: bold;
  text-decoration: none;
}

#footer strong {
  font-weight: bold;
  text-decoration: none;
  color: #424242;
}

/* @end */

/* @end */

/* @group assets */

/* @group appstore */

.appstore {
  height: 52px;
  display: block;
  text-indent: -9999px;
  width: 142px;
  background-image: url(images/assets/appstore.png);
  position: absolute;
  top: 36px;
  right: 180px;
}

.appstore:hover {
  height: 52px;
  display: block;
  text-indent: -9999px;
  width: 142px;
  background: url(images/assets/appstore.png) 0 -52px;
}

.appstore:active {
  height: 52px;
  display: block;
  text-indent: -9999px;
  width: 142px;
  background: url(images/assets/appstore.png) 0 -104px;
}

/* @end */

/* @group facebook */

.facebook {
 	display: block;
 	position: absolute;
  	top: 28px;
	left: 524px;
}

/* @end */

/* @end */

/* @group modules */

/* @group ipads */

#ipads {
  
}

#ipads ul.container {
  list-style-type: none;
  list-style-position: outside;
  margin-bottom: 0;
  width: 832px;
  padding-left: 67px;
}

#ipads ul li {
  width: 186px;
  margin-right: 66px;
  margin-bottom: 20px;
  padding-left: 25px;
  padding-top: 27px;
  background: url(images/modules/ipads/ipad.png) no-repeat;
  float: left;
}

#ipads ul li strong {
  text-align: center;
  display: block;
  width: 162px;
  font-weight: normal;
  font-style: normal;
  height: 40px;
}

#ipads ul li a {
  font-size: 14px;
  line-height: 20px;
  color: #a0a0a0;
  text-decoration: none;
  display: block;
  width: 160px;
}

#ipads ul li a img {
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  display: block;
  margin-bottom: 40px;
}

#ipads ul li a:hover img {
  opacity: 0.5;
}

#ipads ul li strong a {
  display: inline;
  color: #424242;
  font-weight: bold;
}

#ipads ul li strong {
  font-weight: normal;
  font-style: normal;
}

#ipads ul li strong a:hover {
  text-decoration: underline;
}

/* @end */

/* @group ipads-landscape */

#ipads-landscape {
  
}

#ipads-landscape ul.container {
  list-style-type: none;
  list-style-position: outside;
  margin-bottom: 0;
  width: 872px;
  padding-left: 24px;
}

#ipads-landscape ul li {
  width: 244px;
  margin-right: 18px;
  margin-bottom: 20px;
  padding-left: 27px;
  padding-top: 24px;
  background: url(images/modules/ipads/ipad-landscape.png) no-repeat;
  float: left;
}

#ipads-landscape ul li strong {
  text-align: center;
  display: block;
  width: 215px;
  font-weight: normal;
  font-style: normal;
  height: 40px;
}

#ipads-landscape ul li a {
  font-size: 14px;
  line-height: 20px;
  color: #a0a0a0;
  text-decoration: none;
  display: block;
  width: 218px;
}

#ipads-landscape ul li a img {
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  display: block;
  margin-bottom: 40px;
}

#ipads-landscape ul li a:hover img {
  opacity: 0.5;
}

#ipads-landscape ul li strong a {
  display: inline;
  color: #424242;
  font-weight: bold;
}

#ipads-landscape ul li strong {
  font-weight: normal;
  font-style: normal;
}

#ipads-landscape ul li strong a:hover {
  text-decoration: underline;
}

/* @end */

/* @group iphones */

#iphones {
  
}

#iphones ul.container {
  list-style-type: none;
  list-style-position: outside;
  margin-bottom: 0;
  width: 832px;
  padding-left: 67px;
}

#iphones ul li {
  width: 122px;
  margin-right: 74px;
  margin-bottom: 20px;
  padding-left: 11px;
  padding-top: 46px;
  background: url(images/modules/iphones/iphone4.png) no-repeat;
  float: left;
}

#iphones ul li strong {
  text-align: center;
  display: block;
  width: 112px;
  font-weight: normal;
  font-style: normal;
  height: 40px;
}

#iphones ul li a {
  font-size: 14px;
  line-height: 20px;
  color: #a0a0a0;
  text-decoration: none;
  display: block;
  width: 110px;
}

#iphones ul li a img {
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  display: block;
  margin-bottom: 62px;
}

#iphones ul li a:hover img {
  opacity: 0.5;
}

#iphones ul li strong a {
  display: inline;
  color: #424242;
  font-weight: bold;
}

#iphones ul li strong {
  font-weight: normal;
  font-style: normal;
}

#iphones ul li strong a:hover {
  text-decoration: underline;
}

/* @end */

/* @end */

/* @group pages */

/* @group home */

#home {
  
}

#home #content {
  padding-top: 0;
}

#home #apps {
  background: url(images/pages/home/top.png) no-repeat 0 0;
  padding: 40px 68px 20px;
  width: 783px;
  overflow: hidden;
  margin: 1px -10px 0;
}

#home #apps a {
  width: 391px;
  height: 446px;
  float: left;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
}

#home #apps a:hover {
  opacity: 0.5;
}

#home #apps h1 {
  text-align: center;
  text-decoration: none;
  font-weight: normal;
}

#home #apps h1 strong {
  color: #4aaaf6;
}

#home #apps h1 small {
  font-size: 75%;
}

/* @end */

/* @group sudoku */

#sudoku h2, #sudoku h3 {
  color: #4aaaf6;
}

/* @group heading */

#sudoku h2 strong, #sudoku h3 strong {
  color: #4aaaf6;
}

#sudoku .h2 strong, #sudoku .h3 strong {
  color: #4aaaf6;
}

/* @end */

/* @group title */

#sudoku h1 {
  height: 48px;
  text-indent: -9999px;
  margin-left: 0;
  background-image: url(images/pages/sudoku/title.png);
}

/* @end */

/* @group sections */

/* @group impressive */

#sudoku #impressive .screenshot {
  margin-top: -24px;
  margin-bottom: 30px;
}

/* @end */

/* @group welcome */

#sudoku #welcome .container {
  padding-bottom: 20px;
}

#sudoku #welcome .container .screenshot {
  margin-bottom: 40px;
  margin-top: -7px;
}

#pentarow #welcome .container {
  padding-bottom: 20px;
}

#pentarow #welcome .container .screenshot {
  margin-bottom: 10px;
  margin-top: -7px;
}

#towers #welcome .container {
  padding-bottom: 20px;
}

#towers #welcome .container .screenshot {
  margin-bottom: 10px;
  margin-top: -7px;
}

/* @end */

/* @group functionality */

#sudoku #functionality .text {
  padding-top: 9px;
}

#sudoku #functionality .screenshot {
  margin-top: -30px;
}

#sudoku #functionality li {
	list-style-type: disc;
	list-style-position: outside;
}

#sudoku #functionality img {
	margin-top: 25px;
	margin-right: 25px;
}

/* @end */

/* @group create */

#create .text {
  padding-top: 16px;
}

/* @end */

/* @group drag */

#drag .text {
  padding-top: 36px;
}

/* @end */

/* @group many */

#many .text {
  padding-top: 36px;
}

/* @end */

/* @end */

/* @end */

/* @group pentarow */

#pentarow h2, #pentarow h3 {
  color: #c01000;
}

#pentarow h2 a, #pentarow h3 a {
  color: #c01000;
  text-decoration: none;
}

#pentarow h3 a:hover {
  text-decoration: underline;
}

#pentarow code {
  border-left-color: #ef6700;
}

#pentarow #features {
  height: 290px;
  background-position: 0 222px;
  overflow: hidden;
  width: 899px;
}

#pentarow #features .hold {
  height: 279px;
  overflow: hidden;
}

/* @group heading */

#pentarow h2 strong, #pentarow h3 strong {
  color: #c01000;
}

#pentarow .h2 strong, #pentarow h3 strong {
  color: #c01000;
}

/* @end */

/* @group title */

#pentarow h1 {
  height: 48px;
  text-indent: -9999px;
  background-image: url(images/pages/pentarow/title.png);
  margin-left: 0;
}

/* @end */

/* @group sections */

/* @group stacking */

#pentarow #stacking .text {
  padding-top: 6px;
}

/* @end */

/* @group perfect */

#pentarow #perfect .text {
  padding-top: 6px;
}

/* @group layers */

#layers .text {
  padding-top: 26px;
}

/* @end */

/* @end */

/* @group vector */

#pentarow #vector .text {
  padding-top: 9px;
}

#pentarow #vector .screenshot {
  margin-top: -30px;
}

/* @end */

/* @end */

/* @end */

/* @group towers */

#towers h2, #towers h3 {
  color: #85c221;
}

#towers h3 a {
  color: #85c221;
  text-decoration: none;
}

#towers h3 a:hover {
  text-decoration: underline;
}

#towers pre, #towers code {
  border-left-color: #85c221;
}

#towers ol code {
  display: inline;
  margin-bottom: 0px;
  border-left-style: solid;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-left-width: 0px;
  color: #85c221;
}

#towers strong.highlight {
  color: #85c221;
}

/* @group heading */

#towers h2 strong {
  color: #85c221;
}

#towers .h2 strong {
  color: #85c221;
}

/* @end */

/* @group title */

#towers h1 {
  height: 48px;
  text-indent: -9999px;
  background-image: url(images/pages/towers/title.png);
}

/* @end */

/* @group sections */

/* @group preview */

#preview .text {
  padding-top: 6px;
}

/* @end */

/* @group duplicate */

#duplicate .text {
  padding-top: 18px;
}

/* @end */

/* @group activate */

#activate .text {
  padding-top: 25px;
}

/* @end */

/* @group compare */

#compare .text {
  padding-top: 54px;
}

/* Make the three app groups in the original composition work as links. */
#home .app-artwork { position: relative; width: 100%; max-width: 899px; }
#home .app-artwork img { display: block; width: 100%; height: auto; }
#home .app-artwork a { position: absolute; top: 0; bottom: 0; cursor: pointer; }
#home .artwork-sudoku { left: 0; width: 27.5%; }
#home .artwork-towers { left: 27.5%; width: 29%; }
#home .artwork-pentarow { left: 56.5%; width: 43.5%; }
#home .app-artwork a:focus-visible, #home #features a:focus-visible {
  outline: 2px solid #424242;
  outline-offset: -3px;
}

/* Responsive recovery: the published desktop layout stays at its original size. */
#contact-form label { display: inline-block; }
#contact-form textarea { max-width: 100%; box-sizing: border-box; }
#contact-draft { margin-top: 20px; }
[hidden] { display: none !important; }

@media (max-width: 940px) {
  #header, #headerhome, #main, #footer { width: 100%; box-sizing: border-box; }
  #header, #headerhome { padding: 15px 16px 0; background-position: center top; background-size: 100% 100%; }
  #headerhome { height: 124px; }
  #header { height: 177px; }
  #logo { left: 16px; }
  #service { top: 82px; left: 16px; right: auto; }
  #navigation { top: 122px; left: 0; margin-left: 5px; height: auto; }
  #navigation li a { font-size: 11px; padding-right: 6px; padding-left: 6px; }
  #navigation li a span { padding-left: 23px; }
  #main { padding: 20px 12px 0; }
  #content { padding: 24px 12px 1px; }
  #content > img { display: block; width: 100%; height: auto; }
  #home #apps { width: auto; padding: 0; margin: 0 0 16px; }
  #content .container, #welcome, .section, .page, .post, #features { width: 100%; box-sizing: border-box; }
  .section { margin-bottom: 24px; background-position: center bottom; }
  .last { margin-bottom: 0; }
  .text, .right .text, .text.wide, .text.allwide, .intro, .content { float: none; width: auto; margin: 0; padding: 16px 8px 8px; }
  .text h2, .text.wide h2, .text.allwide h2 { width: auto; }
  .text ul, .text ol { padding-left: 18px; }
  .screenshot, .left .screenshot, .right .screenshot { float: none; display: block; max-width: 100%; height: auto; margin: 0 auto 24px !important; }
  #home #features { margin: 0; }
  #features { height: auto; background: none; }
  #features ul { position: static; width: 100%; height: auto; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; }
  #features ul li { float: none; flex: 0 0 225px; }
  #features ul li a { background-position: center bottom; }
  #heading { display: grid; grid-template-columns: 142px 1fr; gap: 12px; height: auto; padding: 0 12px 24px; overflow: visible; }
  #title { position: relative; top: auto; left: auto; grid-column: 1 / -1; width: auto; height: auto; min-height: 106px; padding: 12px 0 0 108px; }
  #title img { top: 8px; left: 0; width: 90px; height: auto; }
  #title h1 { background-size: contain; background-repeat: no-repeat; background-position: left center; height: 42px; }
  #title .slogan { line-height: 18px; }
  #download { position: static; width: auto; height: auto; padding: 5px 0 0; grid-column: 2; grid-row: 2; }
  #download #info { float: none; width: auto; }
  .appstore { position: static; grid-column: 1; grid-row: 2; }
  .facebook { display: none; }
  #ipads ul.container, #ipads-landscape ul.container, #iphones ul.container { width: 100%; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  #ipads ul li, #ipads-landscape ul li, #iphones ul li { float: none; margin-right: 0; flex-shrink: 0; }
  #footer { padding: 45px 12px 0; background-position: center top; }
  #contact-form textarea { width: 100%; }
  #contact-form label { padding: 4px 2px; }
}

/* @end */

/* @end */

/* @end */

/* @end */