﻿/*
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


article,aside,figure,figcaption,footer,header,hgroup,nav,section,summary,time,audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 95%; overflow-y: scroll; }

body { margin: 0; font-size: 1em; line-height: 1.5; background-color: #e0e0e0;}

body, button, input, select, textarea { font-family: proxima-nova,verdana; color: #222; }


/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #3297fd; color: #fff; text-shadow: none; }
::selection { background: #3297fd; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color:#095F93; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }




/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
header h1#site-title, header h2#tag{display:none}

.pad h2 {
  font-size: 1.5em;
  padding: 2.25em 0;
  margin:0;
  color: #666;
  background-color: #ccc;
  text-align: center;
}

img, object, embed {
  max-width: 100%;
}
img {
  height: auto;
}

hr {
  border: 0;
  background-color: #DBDBDB;
  color: #DBDBDB;
  height: 1px;
  width: 100%;
  text-align: center;
}
blockquote {  margin-left: 3em;
  padding-left: 1em;
  border-left: 2px solid #ccc;}
  
.resetFont, .increaseFont, .decreaseFont {text-decoration:none;border: solid 1px #333;padding:0.1em 0.3em}

/* =============================================================================
   Content section
   ========================================================================== */

#sitelogo {float:left;padding:0.2em 0.5em 0.1em 0.7em;}

.sform{width:100%;margin-bottom:0.3em;}
.sinput{width:73%;padding:0;marging:0;height:1.175em;font-family:proxima-nova-condensed;font-size:1.2em;}
.sbutt{width:20%;padding:0%;margin:0%;}
.sbutt{height: 2em;text-align:center;vertical-align:top;background: #f2f2f2;border: 1px solid #999999;}

.fea-caption {margin:0 0 0 0;padding:0.3em 0.5em;font-weight:normal;font-size:1.2em;text-align:center;background-color:#f2f2f2;font-family:proxima-nova-condensed;line-height:1.2; }

.fea-caption a:hover {text-decoration:none;}
.fea-art {border:1px solid #DBDBDB;margin:0 0 1.2em 0;}

.content h1 {font-size:1.4em; padding-top:0.3em;margin:0 0 0.6em 0;font-family:proxima-nova-condensed;font-weight:normal;}
.content h2 {font-size:1.3em; font-family:proxima-nova-condensed;font-weight:normal;font-style:italic;}
.content h3 {font-size:1.2em;font-family:proxima-nova-condensed;font-weight:normal;}
.btop h2 {font-style:normal;}
#mainc h2 {font-style:normal;}


.videocontent {max-width:848px;margin:0 auto;}
.videocontent iframe{border:0;}
.screenshotp {border: 1px solid #ccc;margin:0.6em;text-align:center;max-width:360px;}
.screenshotl {border: 1px solid #ccc;margin:0.6em;text-align:center;max-width:640px;}
.imgcaption {max-width: 600px; text-align: justify; margin: auto;}


.tborder {border-top: 0.3em #095F93 solid;}
.bborder {border-bottom: 0.1em #095F93 solid;}

.center,.cen{text-align:center;}
.sociali {font-family:proxima-nova-condensed;font-size:1.2em;margin:0 0 0.35em 0;}
.sociali img {padding:0 0.3em 0 0;margin:0;}

.reviewscorebox {font-size:0.9em;border: 2px solid #095F93;float:right;padding:0.3em 0.8em;margin:0 0 0 1em;}
.reviewscore {font-size: 3em;}

.topa {margin:4px;float:right;}
.sidea {text-align:center; margin:4px;}
.sideaw {text-align:center;}
.sideas {text-align:center;margin:0 -0.4em 0 -0.4em;}
.sideas img {margin:0.3em;}


.icon100 img {float:left;width:100px; height:100px;border:1px solid #DBDBDB;margin: 0.4em 1.2em 0.3em 0em;}
.icon101 img {float:left;width:156px; height:87px;border:1px solid #DBDBDB;margin: 0.4em 1.2em 0.3em 0em;}

.bbot {border-bottom:1px solid #DBDBDB;padding-bottom:0.6em;}
.btop {border-top:1px solid #DBDBDB;margin-top:0.6em;}
.highlightindent {margin-left: 2em; margin-right: 2em; margin-top: 0.8em; margin-bottom: 0.8em; background: #E8E8E8; padding: 0.7em;}
.ctitle {font-size:1.4em; font-weight:normal; font-family:proxima-nova-condensed; padding-top:0.3em;margin:0 0 0.6em 0;}
.citem {margin-top:6px;}
.citem p{margin-top:0;margin-bottom:0.3em;}
.citem h2 {font-size:1.25em;font-weight:normal;font-family:proxima-nova-condensed;margin-bottom: 0em; margin-top:0px;}
.citem a {color:#095F93;text-decoration:underline;}
.citem a:hover {color:#222;}
.cdetails{font-size:0.85em;border-bottom-width:1px;border-bottom-style:solid;padding-top:0em;padding-bottom:0.9em;margin-bottom:0.9em;border-color:#DBDBDB;}
.citem time {float:right;font-size:1.0em;color:#9c9c9c;padding-right:0.1em;}


.ficon img {float:left;width:100px; height:56px;border:1px solid #DBDBDB;margin:0.3em 0.6em 0.3em 0.3em;}
.fitem {margin-bottom:0.3em;padding-bottom:0.3em;border-bottom:1px solid #DBDBDB;}
.fitem p, .fitem2 p {margin:0;}
.fitem h2 {font-size:1.1em;font-weight:normal;line-height:1.2;font-family:proxima-nova-condensed;margin-bottom: 0.3em; margin-top:0;padding:0;}
.fitem h2 a, .fitem2 h3 a {color:#095F93;}
.fitem h2 a:hover, .fitem2 h3 a:hover {color:#222;}


.fitem time, .fitem2 time {float:right;font-size:0.8em;color:#9c9c9c;padding-top:0.2em;padding-right:0.1em;}
.fcat a {font-style:italic;font-size:1em;color:#222;text-decoration:none;font-size:0.9em;line-height:1.2em;}
.fcat a:hover {text-decoration:underline;}

.fitem2  {float:left;width:46%;margin: 0 3% 0 0;height:4.5em;margin-bottom:0.em;padding-bottom:0.3em;padding-right:0.5%;border-bottom:0px solid #DBDBDB;overflow:hidden;}
.fitem2 h3{font-size:1.1em;font-weight:normal;line-height:1.2;font-family:proxima-nova-condensed;margin-bottom: 0.3em; margin-top:0px;}
.ftime {border-bottom: 0.1em #cecece solid;font-weight:bold;margin:0 0 0.4em 0;padding:0em 0 0 0;}
.ftimep{margin-top:1.6em;}
.fitem2:hover {background-color:#f2f2f2;}


.podfi {padding-top:1em;}
.podpl, .podsub {float:left;padding: 0 3em 0 0;margin:0 1.5em 1.5em 0;}
.podsub h3, .podpl h3 {margin:0;padding:0 0 0.3em 0;}
.podsub p {margin-top:0.2em;}
.podfi .mejs-container {margin:0 auto;}

/* =============================================================================
   Slider
   ========================================================================== */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides > article {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;opacity:0.9;}
.flexslider .slides img:hover {opacity:1;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > article:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 0.6em 0;padding: 0;border:1px solid #DBDBDB;vertical-align: baseline;background: #fff; position: relative; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > article {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
/*.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 2em; line-height: 1em;padding-bottom:1em;} */
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(9,56,92,.6); color: #fff; font-family:proxima-nova-condensed;font-size: 1.4em;font-weight:normal;line-height: 1em;padding-bottom:0.7em;margin-bottom:0;}
.flex-caption a {color: #fff; text-decoration:none;}
.flex-caption a:hover {color: #fff; text-decoration:underline;}

/* Direction Nav */
.flex-direction-nav li a {width: 28px; height: 44px; margin: -13px 0 0; display: block; background: url(http://allaboutsymbian.com/images/site/navt.png) no-repeat 0 0; position: absolute; top: 33%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li a.next {background-position: -28px 0; right: 0px;opacity:.8}
.flex-direction-nav li a.prev {background-position: 0 0; left: 0px;opacity:.8}
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; top: 5px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(http://allaboutsymbian.com/images/site/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}


/* =============================================================================
   Software section
   ========================================================================== */

.appitem {float:left; margin:0;padding:1% 2.5%; width:20%;}
.appitem img {width:100%;}
.apptitle {font-size:1.0em;font-family:proxima-nova-condensed;padding:0.1em;margin:0;display:block;text-align:center;height:2.6em;overflow:hidden;}
.appprice, .appv,.appz{font-size:0.9em;margin: 0.3em 0 0;width:100%;display:inline-block; text-align:center;}
.paidp{background-color:#fff5f5;}
.freep{background-color:#e6ffe5;}
.appz{background-color:#43b453;padding:0.3em 0;font-size:1em;}
.appz a{color:#fff;text-decoration:none;font-weight:bold;}
.appz a:hover{text-decoration:underline;}

.visi {color:#fff;background-color:#808080;border:1px solid #DBDBDB;text-align:center;}
.unpub {background-color:red;}

.appv{background-color:#ededed;}
.c4, .c7, .cl2 {clear:both;}
.tabs-hide {
display:none; /* hide non-active tabs */
}
.tabs-container {
background:#fff; /* kills fadding in/out IE text bug */
}

.mapps {font-size:1.1em;text-align:center;margin-top:0.3em;}
.appiteml {float:left; margin:0;padding:1% 3% 2% 0%; width:47%;}
.appitem2 {float:left; margin:0;padding:1% 2.1%; width:10%;}
.appiconl {float:left; margin:0 0.6em 0.2em 0em;;padding:1% 1%; width:6.5em;}
.appiconl img, .appitem img, .appprice, .appv,.appz {border:1px solid #DBDBDB;}
.appinfol {padding:0; margin:0}
.appinfol h3 {margin:0;padding:0;}
.appinfol a {text-decoration:none;}
.appinfol p {margin:0 0 0.6em 0;padding:0;font-size:0.9em;}
.apppubl {font-style:italic;}


ul.apptabs {list-style:none;margin:0 0 0.6em 0;padding:0 0;clear:both;border-bottom:1px solid #ccc;border-top:1px solid #ccc;height:2.1em;line-height:1.5em;font-size:1.0em;clear:both;}
ul.apptabs li.tab {float:left;padding-right:0.3em;text-align:center;}
ul.apptabs li.tab a {display:block;padding:0.3em 0.5em 0.3em 0.5em;background-color:#fff;}
ul.apptabs li.tablabel {float:left;padding-right:0.6em;padding:0.3em 0.5em 0.3em 0.5em;background-color:#fff;width:7em;}
ul.apptabs li.tablabel2 {float:left;padding-right:0.6em;padding:0.3em 0.5em 0.3em 0.5em;background-color:#fff;}
ul.apptabs li.tab a:hover {color:#666;background-color:#eee;border-bottom:1px solid #ccc;}
ul.apptabs li.tab a.active {background-color:#eee;text-decoration:none;color:#000;border-bottom:1px solid #ccc;}

.pager {text-align:center;}

ul.sbnav  {list-style:none;margin:0 0 0.6em 0;padding:0 0;}
ul.sbnav {padding-bottom:0.9em;}
ul.sbsubnav  {list-style:none;margin:0 0 0.3em 1.2em;padding:0 0;}
ul.sbsubnav {padding-bottom:0.6em;}

.apdetails {float:left;padding: 0em 1.2% 0 0;margin:0 0 0 0;width:21%;}
.apicon {width:13em;border:1px solid #DBDBDB;}
.qrcode {width:13em;border:0;}
.appd {width:76%; padding:0 0 0 1.4%; float:right;border-left: 1px #DBDBDB solid;}
.apdetails ul {list-style:none;margin:0 0 0.9em 0;padding:0 0;}
.apdetails h4, .appd h4 {margin:0;padding:0;}
.apdetails p,  .appd p {margin:0 0 0.9em 0;padding:0;}
.appd {width:76%;float:right;}
.appscreen {margin:0.7em;border: 1px #ccc solid;}
.screeng {text-align:center;margin:0 0 2em 0;}

.appview {float:right;}
.appview img {height:1.5em;margin:0 0.3em 0 0.3em;vertical-align:middle;opacity:0.5;}
.appview img:hover{opacity:1.0;}

.listnone li {list-style: none;padding-left:0px;}
.listnone ul {padding:0;margin:0;}
.itemstrip {text-align:center;border-bottom:1px dotted #DBDBDB;border-top:1px dotted #DBDBDB; padding:5px 0 1px 0;margin:15px 0;}

.listnav1 li, .listnav2 li {list-style: none;padding-left:0px;}
.listnav1 ul, .listnav2 ul {padding:0;margin:0;margin-right:3em;margin-bottom:1em;}
.listnav1 {float:right;}
.listnav2 {float:left;}
.photoborder{border: 1px solid #ccc;padding:0.5em;margin:0.6em;max-width:95%;}
.screenshot {border: 1px solid #ccc;margin:5px;text-align:center;}

/* =============================================================================
   Structure and layout
   ========================================================================== */

#footerbar {margin: 0;padding: 0;color:#fff;background-color: #39597d;width:100%;padding: 6px  14px;text-align:center;}

footer h3 {font-size:1.0em;font-family:proxima-nova;margin:0;}
footer ul {padding:0;margin:0;}
footer li {list-style: none;padding-left:0px;}
footer li a {font-size:1.0em;font-family:proxima-nova;}


#navbar ul {list-style:none;margin:0 0 0.1em 0;padding:0 0.3em 0 1em;clear:both;background-color: #39597d;height:2.1em;line-height:1.6em;font-size:1.4em;clear:both;}
#navbar ul li {float:left;padding-right:0.3em;text-align:center;}
#navbar ul li a {display:block;color:#fff;font-family:proxima-nova-sc-osf-condensed,arial,sans-serif;padding:0.3em 0.55em 0.2em 0.55em;background-color: #39597d;font-variant:small-caps;text-shadow:2px 2px 4px #000000;text-decoration:none;font-weight:normal;}
#navbar ul li a:hover {color:#fff;background-color:#09375c;border-bottom:2px solid #ccc;}
#navbar ul li a.active {background-color:#eee;text-decoration:none;color:#000;border-bottom:0.1em solid #ccc;}
#navbar .navcurrent a {background-color:#09375c;border-bottom:2px solid #ccc;}


nav select {display: none;}

#container {
  max-width: 1296px;
  margin: 0  auto;
  padding: 0em;
  overflow: hidden;
  background-color: #ffffff;
}
.maincolumn {
  display: inline;
  float: left;
  overflow: hidden;
  width: 41.66666666666667%;
  margin: 0 0%;
}
.maincolumn2 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 41.66666666666667%;
  margin: 0 0%;
}
.sidebar {
  display: inline;
  float: left;
  overflow: hidden;
  width: 16.666666666666664%;
  margin: 0 0%;
}
.maincolumn5 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 50%;
  margin: 0 0%;
}
.maincolumn6 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 33.33333333333333%;
  margin: 0 0%;
}
.sidebar5 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 16.666666666666664%;
  margin: 0 0%;
}
.maincolumn3 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 75%;
  margin: 0 0%;
}
.sidebar3 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 25%;
  margin: 0 0%;
}
.onet, .twot, .threet {
  display: inline;
  float: left;
  overflow: hidden;
  width: 33.33333333333333%;
  margin: 0 0%;
}
.oneq,
.twoq,
.threeq,
.fourq {
  display: inline;
  float: left;
  overflow: hidden;
  width: 25%;
  margin: 0 0%;
}
.one {
  display: inline;
  float: left;
  overflow: hidden;
  width: 100%;
  margin: 0 0%;

}
.oneh {
  display: inline;
  float: left;
  overflow: hidden;
  width: 50%;
  margin: 0 0%;
}
.twoh {
  display: inline;
  float: left;
  overflow: hidden;
  width: 50%;
  margin: 0 0%;
}
.maincolumn4 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 41.66666666666667%;
  margin: 0 0%;
}
.sidebar4 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 58.333333333333336%;
  margin: 0 0%;
}
.maincolumn7 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 50%;
  margin: 0 0%;
}
.sidebar7 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 50%;
  margin: 0 0%;
}
.nested {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  margin: 0 0%;
}
.nested1 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 100%;
  margin: 0 0%;
}
.nested2 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 71.42857142857143%;
  margin: 0 0%;
}
.nested3 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 28.57142857142857%;
  margin: 0 0%;
}
.nesteda {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  margin: 0 0%;
}
.nesteda1 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 100%;
  margin: 0 0%;
}
.nesteda2 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 66.66666666666666%;
  margin: 0 0%;
}
.nesteda3 {
  display: inline;
  float: left;
  overflow: hidden;
  width: 33.33333333333333%;
  margin: 0 0%;
}
.maincolumn,
.maincolumn2,
.sidebar,
.maincolumn5,
.maincolumn6,
.sidebar5,
.maincolumn3,
.maincolumn4,
.sidebar3,
.oneq,
.nested1,
.nested2,
.nested3,
.maincolumn7,
.nesteda1,
.nesteda2,
.nesteda3,
.oneh,
.twoh,
.twoq,
.threeq,
.fourq,
.onet,
.twot,
.threet {
  margin: 0.5em 0;
}
.one {margin-bottom: 0.9 em 0;}
.sprbr, .sprbr2, .sprbr3 {
  padding-right: 0.9em;
  border-right: 1px #DBDBDB solid;
}
.spl, .spl2, .spl3 {
  padding-left: 0.9em;
}
.spleft, .spleft1 {
  margin-left: 0.9em;
}
.spright, .spright2 {
  margin-right: 0.9em;
}










/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */
@media screen and (max-width: 1440px) {
#container {
  max-width: 1200px;
  margin: 0  auto;
  padding: 0em;
  overflow: hidden;
  background-color: #ffffff;
}

  .maincolumn3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 71.5%;
    margin: 0 0%;
  }
  .sidebar3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 28.5%;
    margin: 0 0%;
  }
}

@media screen and (max-width: 1366px) {
#container {
  max-width: 1170px;
  margin: 0  auto;
  padding: 0em;
  overflow: hidden;
  background-color: #ffffff;
}

  .maincolumn3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 72.5%;
    margin: 0 0%;
  }
  .sidebar3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 27.5%;
    margin: 0 0%;
  }
}

@media screen and (max-width: 1280px) {
#container {
  max-width: 1144px;
  margin: 0  auto;
  padding: 0em;
  overflow: hidden;
  background-color: #ffffff;
}

.videocontent {max-width:736px;margin:0 auto;}

.screenshotp {border: 1px solid #ccc;margin:0.6em;text-align:center;max-width:280px;}
.screenshotl {border: 1px solid #ccc;margin:0.6em;text-align:center;max-width:640px;}

  .maincolumn3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 75%;
    margin: 0 0%;
  }
  .sidebar3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 25%;
    margin: 0 0%;
  }
  .oneq,
  .twoq,
  .threeq,
  .fourq {
    display: inline;
    float: left;
    overflow: hidden;
    width: 50%;
    margin: 0 0%;
  }
  .maincolumn,
  .maincolumn2,
  .sidebar,
  .maincolumn5,
  .maincolumn6,
  .sidebar5,
  .maincolumn3,
  .sidebar3,
  .oneq,
  .one,
  .nested1,
  .nested2,
  .nested3,
  .maincolumn7,
  .nesteda1,
  .nesteda2,
  .nesteda3,
  .twoq,
  .threeq,
  .fourq,
  .onet,
  .twot,
  .threet {
    margin-bottom: 0.5em;
  }
  .spl2 {
    padding-left: 0em;
  }
  .sprbr2 {
    padding-right: 0em;
    border-right: 0em;
  }
  .spleft, .spleft2, .spleft5 {
    margin-left: 0.9em;
  }
  .spright, .spright2, .spright5 {
    margin-right: 0.9em;
  }
}
@media screen and (max-width: 1024px), only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
#sitelogo {width:228px;float:left;padding:0.6em 0.5em 0.1em 0.7em;}
.videocontent {max-width:640px;margin:0 -1px auto;}
.screenshotp {border: 1px solid #ccc;margin:0.6em;text-align:center;max-width:190px;}
.screenshotl {border: 1px solid #ccc;margin:0.6em;text-align:center;max-width:315px;}
.photoborder{max-width:600px;}
  .maincolumn, .maincolumn5 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 50%;
    margin: 0 0%;
  }
  .maincolumn2, .maincolumn6 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 50%;
    margin: 0 0%;
  }
  .sidebar, .sidebar5 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 0%;
    margin: 0 0%;
    display: none;
  }
  .maincolumn3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 66.66666666666666%;
    margin: 0 0%;
  }
  .sidebar3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 33.33333333333333%;
    margin: 0 0%;
  }
  .oneq,
  .twoq,
  .threeq,
  .fourq {
    display: inline;
    float: left;
    overflow: hidden;
    width: 50%;
    margin: 0 0%;
  }
  .maincolumn4 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 50%;
    margin: 0 0%;
  }
  .sidebar4 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 50%;
    margin: 0 0%;
  }
  .nested {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested1 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested2 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 0%;
    margin: 0 0%;
    display: none;
  }
  .maincolumn7 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 58.333333333333336%;
    margin: 0 0%;
  }
  .sidebar7 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 41.66666666666667%;
    margin: 0 0%;
  }
  .nesteda {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nesteda1 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nesteda2 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nesteda3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 0%;
    margin: 0 0%;
    display: none;
  }
  .maincolumn,
  .maincolumn2,
  .sidebar,
  .maincolumn5,
  .maincolumn6,
  .sidebar5,
  .maincolumn3,
  .sidebar3,
  .oneq,
  .one,
  .nested1,
  .nested2,
  .nested3,
  .maincolumn7,
  .nesteda1,
  .nesteda2,
  .nesteda3,
  .oneh,
  .twoh,
  .twoq,
  .threeq,
  .fourq,
  .onet,
  .twot,
  .threet {
    margin-bottom: 0.5em;
  }
  .spl2, .spl3 {
    padding-left: 0em;
  }
  .sprbr2, .sprbr3 {
    padding-right: 0px;
    border-right: 0em;
  }
  .spleft, .spleft2, .spleft5 {margin-left: 0.5em;}
  .spright,
  .spright2,
  .spright4,
  .spright5 {
    margin-right: 0.5em;
  }
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait){
.topa {display: none;}
.logo {text-align:center;}
#sitelogo {float:none;text-align:center;max-width:100%;padding:0.1em 0 0 0;}

.maincolumn3,
  .sidebar3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
}
@media screen and (max-width: 720px){
.logo {text-align:center;}
#sitelogo {float:none;text-align:center;max-width:100%;padding:0.1em 0 0 0;}

.topa {display: none;}
#navbar {background:#39597d;padding:0.3em;}
nav ul     { display: none; }
nav select {font-size:1.1em;display: inline-block;width:76%;margin: 0 12%; text-align:center; }


body { margin: 0; font-size: 0.9em; line-height: 1.3;}

.flex-caption {width: 96%; padding: 2%; margin:0;position: relative; background:#f2f2f2; color: #000;font-size: 1.2em;}
.flex-caption a {color: #000; text-decoration:none;}
.flex-caption a:hover {color: #000; text-decoration:underline;}
.icon100 img {float:left;width:100px; height:56px;margin: 0.3em 0.8em 0.3em 0em;}
.ctitle {font-size:1.2em;}
.citem h2 {font-size:1.05em;}
.bborder {border-bottom: 0em;}
.photoborder{max-width:600px;}
.fitem2  {float:left;width:100%;margin: 0 0 0.15em 0;border-bottom:1px solid #DBDBDB;overflow:hidden;}
.fcat {display:none;}
.appitem {float:left; margin:0;padding:1% 10%; width:30%;}
ul.apptabs {font-size:0.9em;overflow:hidden;}
ul.apptabs li.tab a {padding:0.3em 0.2em 0.3em 0.2em;}
ul.apptabs li.tablabel {display:none;}
ul.apptabs li.tablabel2 {display:none;}

.appiteml {margin:0;padding:0; width:100%;}
.appitem2 {margin:0;padding:1% 2%; width:48%;}

.apdetails {width:100%;}
.appd {width:100%;}

  .maincolumn,
  .maincolumn2,
  .maincolumn5,
  .maincolumn6,
  .sidebar,
  .sidebar5,
  .maincolumn3,
  .sidebar3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .maincolumn4, .maincolumn7 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .sidebar4, .sidebar7 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested, .nesteda {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested1, .nesteda1 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested2, .nesteda2 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested3, .nesteda3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
    display: block;
  }
  .sidebar, .sidebar5 {
    display: block;
  }
  .oneh,
  .twoh,
  .oneq,
  .twoq,
  .threeq,
  .fourq,
  .onet,
  .twot,
  .threet {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .sprbr {
    padding-right: 0px;
    border-right: 0px;
  }
  .spl {
    padding-left: 0px;
  }
  .spleft, .spleft2, .spleft3 {
    margin-left: 0.25em;
  }
  .spright,
  .spright2,
  .spright3,
  .spright4 {
    margin-right: 0.25em;
  }
  .maincolumn,
  .maincolumn2,
  .maincolumn5,
  .maincolumn4,
  .maincolumn6,
  .sidebar5,
  .sidebar,
  .maincolumn3,
  .sidebar3,
  .oneq,
  .one,
  .nested1,
  .nested2,
  .nested3,
  .maincolumn7,
  .nesteda1,
  .nesteda2,
  .nesteda3,
  .oneh,
  .twoh,
  .twoq,
  .threeq,
  .fourq,
  .onet,
  .twot,
  .threet {
    margin-bottom: 0.25em;
  }
}




/* === non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }





/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  .maincolumn,
  .maincolumn2,
  .maincolumn5,
  .maincolumn6 .sidebar,
  .sidebar5 .maincolumn3,
  .sidebar3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .maincolumn4, .maincolumn7 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .sidebar4, .sidebar7 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested, .nesteda {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested1, .nesteda1 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested2, .nesteda2 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .nested3, .nesteda3 {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
    display: block;
  }
  .sidebar, .sidebar5 {
    display: block;
  }
  .oneh,
  .twoh,
  .oneq,
  .twoq,
  .threeq,
  .fourq,
  .onet,
  .twot,
  .threet {
    display: inline;
    float: left;
    overflow: hidden;
    width: 100%;
    margin: 0 0%;
  }
  .sprbr {
    padding-right: 0px;
    border-right: 0px;
  }
  .spl {
    padding-left: 0px;
  }
  .spleft, .spleft2, .spleft3 {
    margin-left: 0.25em;
  }
  .spright,
  .spright2,
  .spright3,
  .spright4 {
    margin-right: 0.25em;
  }
  .maincolumn,
  .maincolumn2,
  .maincolumn5,
  .maincolumn6,
  .sidebar5,
  .sidebar,
  .maincolumn3,
  .sidebar3,
  .oneq,
  .one,
  .nested1,
  .nested2,
  .nested3,
  .maincolumn7,
  .nesteda1,
  .nesteda2,
  .nesteda3,
  .oneh,
  .twoh,
  .twoq,
  .threeq,
  .fourq,
  .onet,
  .twot,
  .threet {
    margin-bottom: 0.25em;
  }

}