:root {
    --main: rgba(0, 120, 212, 1);
	--half: rgba(0, 120, 212, 0.5);
}

/* HTML5 Boilerplate */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
/*input, select { vertical-align: middle; }*/

.hidden {
    display: none;
}

.left {
    position:relative; float: left;
}

.right {
    position:relative; float: right;
}

.clear {
    clear: both;
}

/* Standard Setup */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85em;
    -webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
    color:#000000;
    width:100%;
}

.page { /* 100% up to 996px (which will become 1000px with 2px border wither side) - to fit on 1024*768 screens with scrollbar */
    width:100%;
    max-width:996px;
    position:relative;
    overflow:auto;
    margin: 0 auto 2em auto;    
    background:white;
}

a {
    color: var(--main);
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

.required {color: var(--main);}

.homePhoto, .pageImg { text-align:center; }

.pageImg { display:block; }

.pageImg a { width:160px; z-index:9; }
.pageImg img { display:block; width:160px; margin: 0 auto 1em auto ! important; position:relative; z-index:10; }


.addSite {border: 2px dashed #565656; padding: 1em ! important; margin: 1em; text-align: center; color:black}

strong {
    font-weight: bold;
}

h1 {
    font-size: 1.2em;
    font-weight: bold;
    height:18px;
    padding: 6px 8px 8px 8px; 
}

header {
    position:relative;
    float:left;
    height:50px;
    width:100%;
	border-bottom:1px solid black;
}

header #menu {
    float:right;
    background:url(/img/Menu.png) center center no-repeat;
	background-size: 30px 30px;
    width:50px;
    height:50px;
    position:relative;
    cursor:pointer;
}

header .headerMob {
    position:relative;
    float:left;
    display:block;
    height:50px; 
	width: 100%;
	background: white;
	overflow:hidden;
}

header .homeImgMob {
    position:relative;
    float:left;
    display:block;
    height:50px;
    cursor: pointer;
}

header .homeImgMob img {
	position:relative;
    float:left;
    display:block;
    height:40px;
	width:40px;
	margin: 5px 0 0 5px;
}

header .headerMob .words {
    position:relative;
    float:left;
    display:block;
    height:40px;
	margin: 5px 0 0 5px;
    cursor: pointer;
}

header .headerMob .words h2 {
	font-weight: bold;
	color: #000000;
	font-size: 1.4em;
	overflow:hidden;
}

header .headerMob .words h3 {
	color: #666666;
	font-weight: bold;
	font-size: 0.6em;
	text-align:right;
	
	overflow:hidden;
}

.menuFull  {display: none;}

nav {
    width:100%;
    overflow:hidden;
    position:relative;
    background: white;
	border-bottom: 1px solid black;
    display:none;
}

nav ul {
    float:left;
    width: 96%;
    margin:2px 8px 4px 8px ! important;
    list-style:none;
    position:relative;
}

nav ul li {
    display:block;
    width:100%;
    position:relative;
    font-size: 1.2em;
    color:var(--main);
    text-transform:uppercase;
    margin: 6px 0 6px 0;
    padding: 2px 0 6px 0;
    border-bottom:1px solid black;
}

nav ul li a, nav ul li span {
    color: var(--half);
    font-weight: bold;
    display: block;
    background: none;
    margin: 0;
    padding: 0;
}

nav ul li.sub a { color: var(--main); padding: 0 0 0 1em; }

nav ul li.socialIcons { margin: 0 ! important; padding: 0 ! important; overflow:auto; background:white; }
nav ul li.socialIcons div { width: 230px; padding: 8px 0 12px 0; margin: 0 auto 0 auto; overflow: auto; }
nav ul li.socialIcons div img { width:40px; height: 40px; float:left; margin: 0 20px 0 0px; cursor: pointer; }
nav ul li.socialIcons div img:last-child { margin-right: 0 ! important;}


header .headerFull {
	width:996px;
	padding:0px;
	height:97px;
	display:none;
	background: white;
	text-align:center;
}

header .headerFullLeft {
	width:700px;
	padding:0px;
	height:97px;
	display:block;
	float:left;
	text-align:center;
}

header .headerFull .headerFullLeft img {
	position:relative;
    float:left;
    display:block;
    height:80px;
	width:80px;
	margin: 8px 0 0 12px;
}

header .headerFull .words {
    position:relative;
    float:left;
    display:block;
    height:80px;
	margin: 8px 0 0 12px;
    cursor: pointer;
}

header .headerFull .words h2 {
	font-weight: bold;
	color: #000000;
	font-size: 2.6em;
	overflow:hidden;
}

header .headerFull .words h3 {
	color: #666666;
	font-weight: bold;
	font-size: 1.2em;
	text-align:right;
	
	overflow:hidden;
}

header .headerFullSocial{ position:absolute; bottom:10px; right:10px; width: 230px;}
header .headerFullSocial span {position:absolute; bottom: 55px; right: 0px; width: 230px; text-align:center; font-weight: bold;}
header .headerFullSocial div { position:absolute; bottom:0px; right:0px; width: 230px; height: 40px;}
header .headerFullSocial div img { position: relative; width:40px; height: 40px; float:left; margin: 0 20px 0 0px; cursor: pointer; border-radius:5px;}
header .headerFullSocial div img:last-child { margin-right: 0 ! important;}

header .homeImgFull {
    position:relative;
    float:left;
    display:block;
    width:200px;
    height:45px; 
    cursor: pointer;
}

#main {
    position:relative;
    width:100%;
	overflow:auto;
}

.shares {width:140px; margin: 0 auto 0 auto; clear:both;}
.shares label {display: block; text-align: center; font-weight: bold; margin: 1em 0 0.5em 0; font-size: 0.9em; color: #333;}
.shares div {margin: 0 0 1em 0; width:140px; height:40px;}
.shares img {width:40px; height:40px; cursor:pointer; float:left; border-radius: 5px; margin-right: 10px ! important;}
.shares img:last-child {margin-right: 0 ! important;}

.sideBar {
display:none;
width:160px;
position:absolute;
height: 600px;
top: 0px;
right: 0px;
}

.fullOnly {display:none;}
.fullOnlyInline {display:none;}
.mobOnly {display:block;}

em {font-style: italic; }


#main h1, #main h4, #main h5, #main h6 {
    font-size: 1.0em;
    font-weight: bold;
    width: 92%;
    margin: 0;
    padding: 6px 8px 8px 0px; 
    height:inherit;
}

#main h2 { font-size:2.0em; font-weight:bold; padding:0px; margin:0px; line-height: 1.2em; }
#main h3 { font-size:1.0em; font-weight:bold; padding:0px; margin:5px 0px 5px 0px; color:var(--main); line-height: 1.2em; }

#main p { /* main paragraph style */
    margin: 0 0 8px 0;
    font-size:1.0em;
}

#main ul, #main ol {
    padding: 6px 0 6px 0;
}

#main ul li {
    list-style:disc;
    margin:0 0 4px 20px;
}

#main ol li {
    list-style-type: decimal;
    margin: 0 0 8px 2em; padding: 0 0 0 0;
}

ul.shareaholic-share-buttons li {list-style-type:none ! important;}

#content {
    position:relative;
    float:left;
    width:100%;
    min-height: 420px;
    overflow:hidden;
    line-height: 1.4em;
    font-size:1.0em;
	text-align:left;
	overflow:hidden ! important;
}

#content img, #content video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 5px;
}

#content video { background-color: #999; min-width:100%; }

#contentDiv {
    position:relative; float:left; overflow:auto; padding:8px; max-width: 96% ! important; width:96%;
}

#contentDiv p {
    position:relative;
}

#contentDiv.wysiwyg {}
#contentDiv.wysiwyg img {width: initial ! important; height: initial ! important; }

.shareaholic-canvas  {height: 75px;}

#side {
    position:relative;
    float:right;
    display:none;
    overflow:hidden;
    line-height: default;
}

#sideDiv {
    position:relative; padding:0; text-align:left; font-size: 0.8em;
}

.bold {font-weight: bold;}

.divAd {width:100%; text-align:center}

ins { /* Removes Adsense back */
    background-color: transparent !important;
}

.inventory {clear:both;}

.holdingLinks a {display:block; height: 3em; }

.black {color:black; font-weight:bold; display:block; text-align:center;}

#btnEnq {
    color:white;
    background: var(--main);
    border: 2px solid black;
    padding:7px 10px 7px 10px;
	margin: 0 0 2em 0;
    font-weight:normal;
	font-size: 1.0em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
}

#btnEnq:disabled {background: #ccc; color: #999;}

hr { display: block; margin: 1em 0; padding: 0; color: var(--main); background: var(--main); height: 2px; border:0; }

.dividerBlack {
    position:relative;
    display:block;
    float:left;
    width: 100%;
    height: 1px; 
    position: relative;
    background-color: #000000;
}

.dividerBig {
    position:relative;
    display:block;
    float:left;
    width: 100%;
    height: 3px; 
    position: relative;
    background-color: var(--main);
}

.dividerPad {
    position:relative;
    display:block;
    float:left;
    width: 100%;
    height: 3px; 
    position: relative;
    background-color: var(--main);
    margin: 1em 0 1em 0;
}

.dividerBigPadTop {
    position:relative;
    display:block;
    float:left;
    width: 100%;
    height: 3px; 
    position: relative;
    background-color: var(--main);
    margin: 1em 0 0 0;
}

.gap {
    width:100%; height:30px; position:relative; float:left;
}

.gap1em {
    width:100%; height:1em; position:relative; float:left;
}

footer {
    position:relative;
    display:block;
    float:left;
    width:100%;
	overflow:hidden ! important;
	padding: 0.5em 0 0.5em 0;
    position:relative;
	background-color: white;
	font-size: 0.85em;
}

footer p {
    position: relative;
    margin: 0 1em 0 0;
    padding: 0;
    text-align: center;
	color:black;
}

footer p a { font-weight: bold; }

#cookieDisclaimer {position:fixed; bottom: 0; width:100%; background: var(--main); display:none; z-index:101;}
#cookieDisclaimer p {float:left; font-weight:bold; color:white; margin: 1em 0 1em 1em}
#cookieDisclaimer div{float:right;}
#cookieDisclaimer div button {margin:1em 1em 1em 0; background: black; border:black; color:white; padding: 0.5em 1em 0.5em 1em; font-weight:bold;}

.error {background: pink; border: 1px solid var(--main); padding: 10px; color: var(--main); display: none; }

/* from old */

.portfolioSections {position:relative; height:300px; max-width:280px; margin: 0 auto 0 auto}
.portfolioSection {position:relative; float:left; margin-left:30px; max-width:250px; margin-bottom: 2em; }
.portfolioSection a {display:block; text-align:center; font-size: 1.4em;}
.portfolioSection p {text-align:center;}
.portfolioRow {clear:both; height:170px; position:relative; max-width:176px; margin: 0 auto 0 auto;}
.portfolioItem {position:relative; width:152px; padding:0px 20px 0px 0px; float:left; font-size:0.8em; font-weight:bold; text-align:center; }
.portfolioMobWebRow {clear:both; height:114; position:relative;}
.portfolioMobWebItem {position:relative; width:152px; padding:0px 20px 0px 0px; float:left; font-size:0.8em; font-weight:bold; text-align:center; }
.portfolioMobRow {clear:both; height:220px; position:relative; }
.portfolioMobItemL {position:relative; width:172px; height:130px; padding:0px 30px 0px 0px; float:left; font-size:0.8em; font-weight:bold; text-align:center; }
.portfolioMobItemR {position:relative; width:172px; height:130px; padding:0px 0px 0px 0px; float:left; font-size:0.8em; font-weight:bold; text-align:center; }
.portfolioMobRow2012 {clear:both; position:relative; margin: 0 0 0 0;}
.portfolioMobSet {position:relative; float:left; min-height:100px;  margin: 0 20px 0px 0; width:246px; }
.portfolioMobSet a {color:black;}
.portfolioMobSet a:hover {text-decoration:none}
.portfolioMobSetIcon {position:relative; float:left; height:60px; ; margin: 0 10px 0 0; width:60px; }
.portfolioMobSetIcon img {position:relative; float:left; height:60px; width:60px;}
.portfolioMobSetInfo {position:relative; float:left; height:60px; margin: 0 0 0 0; width:176px; font-size:0.8em; }
.portfolioMobSetInfo p {margin: 0 0 5px 0; padding: 0 0 0 0}
.portfolioMobSetInfo span {margin: 0 0 0 0; padding: 0 0 0 0}
.portfolioMobSetInfo span:first-of-type {font-weight:bold; color: var(--main); }
.portfolioMobSetInfo span:first-of-type:hover {text-decoration:underline; }
.portfolioItemL p, .portfolioItemR p, .portfolioMobWebItemL p, .portfolioMobWebItemR p {font-weight:lighter; }
.portfolioItemL img, .portfolioItemR img {border:1px solid #ffffff; width:150px; height:98px; }
.portfolioMobWebItemL img, .portfolioMobWebItemR img {border:1px solid #ffffff; width:150px; height:72px; }


.newsListWrapper {position:relative; clear:both; height:20px; padding:5px 0px 5px 0px; }
.newsListDate {position:relative; width:calc(20% - 5px); float:left; text-align:right; padding:0px 5px 0px 0px; }
.newsListItem {position:relative; float:left; width: 79%; }
.newsListItem  a{font-weight: bold; }

.newsListWrapper.synopsis {position:relative; clear:both; height:10px; padding:0px 0px 5px 0px; }
.newsListWrapper.synopsis .newsListItem {font-size: 0.9em; }

.appBox {width:100%; overflow:hidden; position:relative; padding:0px 0px 10px 0px; clear:both; }
.appBox a {color:black;}
.appBox a:hover {text-decoration:none}
.appBoxLeft {width:60px; height:64px; padding:1px 1px 1px 1px; float:left; position:relative; }
.appBoxLeft img {width:60px; height:60px;}
.appBoxRight {float:left; padding:1px 1px 1px 10px; position:relative; width:210px; color: black;}
.appBoxRight p {padding:0px 0px 6px 0px; margin: 0 ! important; line-height: 1.2em; }

.rightTitle { font-weight:bold; font-size:2.0em; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; position:relative; display:block; }
.blogBox {width:100%; overflow:hidden; position:relative; padding:0px 0px 10px 0px; clear:both; }
.blogBox a {color:black;}
.blogBox a:hover {text-decoration:none}
.blogBoxLeft {width:50px; height:60px; margin: 6px 0 0 0; padding:1px 1px 1px 1px; border:2px dashed var(--main); background-color:white; float:left; position:relative; }
.blogBoxRight {float:left; padding:1px 1px 1px 10px; position:relative; width:210px; color: black}
.blogBoxDay {font-size:1.4em; line-height:0.9em; font-weight:bold; text-align:center; padding:0px 0px 0px 0px; margin:2px 0px 0px 0px; color:#000000; }
.blogBoxMonth {font-size:2.0em; line-height:1.3em;font-weight:bold; text-align:center; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; color:var(--main); }
.blogBoxYear {font-size:1.1em; line-height:1em;text-align:center; font-weight:bold; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; color:#000000; }
.blogBoxRight h2 {font-size:1.0em; font-weight:bold; padding:0px; margin:0px 0px 0px 0px; }
.readBlogEntry {font-weight:bold; color: var(--main) }
.readBlogEntry:hover {text-decoration:underline; }
.blogImage {position:relative; float:left; background-color:white; border:1px solid var(--main); max-width:302px; padding:10px 10px 10px 10px; }
.blogImageWrapper a {display:block; position:relative; z-index: 20;}
.blogImage a img {border:1px solid var(--main); width: 300px; max-width:100%; position:relative; float: left; }
img.blogSimpleImg {float:right; padding:0px 0px 10px 10px; }
.blogImageWrapper {max-width:322px; padding:0px 0px 0px 0px; margin:0px auto 10px auto; text-align:center; position:relative; }

.disclaimer {display: none; width:990px; padding:2em 0 6em 0; margin:0px auto; position:relative; text-align:center; font-size: 0.8em; color: #666666;}

/* Code Examples */
.xcode {color: #080808; font-size: 0.8em; font-weight:bold; }
.xcode .pink {color: #bb0faa; }
.xcode .purple {color: #8748b8 }
.xcode .green {color: #0f8f0f }
.xcode .brown {color: #764b2f }
.xcode .red {color: #d3434b }
.xcode .blue {color: #561add }
.xcode .turquoise {color: #2b91af }

.xamarin {color: #080808; font-size: 0.8em; font-weight:bold; }
.xamarin .blue {color: #396cc8; }
.xamarin .orange {color: #f37b44; }

.published {font-size: 0.8em; }

/* Adsense */
.topAd {margin: 0 0 2em 0;}
.mrec {margin: 0 0 1em 0;}

/* MVP */
section.mvp { background-color: white; float: left; position: relative; width: 284px; padding: 0; margin: 0 0 2em 0; z-index: 20; text-align: center; }
section.mvp img { width:140px; margin: 70px auto; display:block; }
section.mvp hr { margin-top: 3em; }

/* Privacy */
.iconStack {position:relative; float:left; width: 100%; margin: 0 0 0.5em 0; clear: both; }
.iconStack  a {border: 0px none; position: relative; z-index: 100; }
.iconStack  img {position:relative; float: left ! important; margin: 0 1em 1em 0 ! important; border: 0px none; display:none; width:60px; height:60px;}

.clear {clear:both}
.clear20 {clear:both; height:20px; width:20px;}

/* end from old */

/* form */
.formInput {width:96%; max-width:500px}
.formTextarea {width:96%; max-width:500px}
.verifyDiv {position:relative; float:left;}
.verifyDiv img, .verifyDiv span {position:relative; float:left;}
.verifyInput {width:80px;}

input[type=text], textarea {border: 1px solid black ! important; }

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  margin: 0; 
}

textarea {height:100px;}

.star {color: #fefe00 }

/* shop */
.shopImg {max-width: 95% ! important; }

.siteType {display:inline ! important; float: none ! important; margin: 0 0.5em 0 0 ! important; padding: 0 ! important; }

.gist-file { tab-size: 2; }
acronym {cursor: help; }


/* Responsive Design */

/* Tablet */
@media screen and (min-width: 500px) {
	.homePhoto, .pageImg {float:right; padding: 0 0 1em 1em; width: 240px;}
	.addSite {float:right; text-align: center; margin: 0 0 1em 1em;}
	.blogImageWrapper {float:right; margin:0px 0px 10px 10px;}
	.portfolioRow {max-width:352px;}
}

/* Tablet */
@media screen and (min-width: 639px) {
	.portfolioSections {max-width:560px;}
	.portfolioRow {max-width:516px;}
}

/* Full Size - Show Side Bar */
@media screen and (min-width: 1017px) {
    body {background-color:#cccccc;  }
    .page {border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; }
	#main {}
    #main a {}
	.homePhoto, .pageImg {float:right; padding: 0 0 1em 1em; width: 240px; }
	.addSite {float:right; text-align: center; margin: 0 0 1em 1em;}
	.fullOnly {display:block;}
	.fullOnlyInline {display:inline;}
	.mobOnly {display:none;}
	#content {display: block;  padding:8px 16px 8px 16px; width:624px; }
	#side {display: block; width:310px; padding: 0px 0px 20px 30px; text-align:center; }
    header {height:97px; }
	header .headerMob {display:none; }
	header .headerFull {display:block;}
	nav {display:none;}
    footer {overflow:hidden;}
	.disclaimer {display:block}
    .site img {max-width: 600px; width: 600px;}
	.code {display:table-cell;}
	.prefix {display:inline;}
	.shopImg {max-width: 600px; width: 600px;}
	.basketArea .basketTxt {margin: 28px 9px 11px 0px;}
	.basketHeading {display:block; margin: 0 0 2px 0;}
	.basketArea .basketIcon {margin: 31px 9px 9px 0px;}

	.mainLinks { color: #00ff00 ! important; }
	.blogImageWrapper {float:right; margin:0px 0px 10px 10px;}
	.portfolioSections {max-width:560px;}
	.portfolioRow {max-width:516px;}
	
	/* New Header + Menu 2011 */
.menuFull  {display: block; position:relative; float:left; width:100%; height:30px; background-color:white; border-bottom:1px solid black; z-index:20;}
.menuFull ul {list-style-type:none; margin:0 0 0 0; padding:8px 0 0 0;  }
.menuFull ul li span {cursor:pointer; }
.menuFull ul li {float:left; margin:0 0 0 0; padding:0 22px 0px 20px; font-size: 12px; font-weight:bold; height:22px;}/**/
.menuFull ul li ul {position:absolute; top:22px; margin:8px 0 0 0; padding: 0 0 10px 0; background-color:white; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black;}
.menuFull ul li ul li {float:none; margin:0 0 0 0; padding:10px 0 0 0; width:220px; white-space:nowrap;}
.menuFull ul li ul li a {padding: 0 19px 0 19px;}
.menuFull ul li a span {color:black;}
.menuFull .on {display:block; }			
.menuFull .off {display:none; }
.menuFull ul a {display:block; }
.contactFull {position: relative; float: right; display: block; padding: 0 20px 0 0; font-weight:bold; font-size:12px; }
}

@media screen and (min-width: 1350px) {
.sideBar {display:block;}
}