/*
Mobile-first design by James Smith - www.jamessmith.co.uk 
All Rights Reserved.
NB: Fluid layout percentages are based on a 12-col 1000px grid
aim for horizontal margins/padding of 17px or 34px at 1000px viewport width

dark===> 393536
light==> dfd7cc // light-tinted==> D1CAC0
brown==> 64554c
orange=> f05d36
links on white => CA4F2C (WCAG2 AA-compliant rusty orange)
links on light => A93616 (WCAG2 AA-compliant dirty orange)
links on dark => F97B54
links on brown => FFDFB4
links inside highlight => fc4a28
*/

/* GLOBAL ========================================================================== */
html, body{height:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{ display:block; }
div,article,ul{margin:0;padding:0;}
audio, canvas, video{ display:inline-block;*display:inline;*zoom:1; }
audio:not([controls]){ display:none; }
[hidden] { display:none; }
html{ font-size:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
ul{list-style:none}
a{text-decoration:none;}
img{border:0;}
abbr,acronym{border-bottom:1px dotted #666;cursor:help}
b,strong{font-weight:700;}
::selection {background: #f05d36;color:#fff;}
::-moz-selection {background: #f05d36;color:#fff;}
body{
background:#f05d36;
margin:0; 
color:#666;
font:300 100%/1.4 "pragmatica-web-1","pragmatica-web-2",helvetica-neue,helvetica,arial,sans-serif;
}
h1,h2,h3,h4,h5,h6,th,.nav-main a,.loginLink,dt,.button,time .d,time .m, time .y,.web-strategy figcaption{font-family:"futura-pt-condensed-1","futura-pt-condensed-2",sans-serif;font-weight:500;}
.wf-loading .web-strategy figcaption{visibility:hidden;} /* oh, controversial...! NB, don't be tempted by .wf-loading body{}, as IE8 has a flid and won't display the home page SVG */
.fullscreen{display:none}
#codeigniter_profiler{
  -moz-transition:all .4s ease;
 position:absolute;
  z-index:99;
  border:8px solid #F05D36;
  border-radius:8px;
  overflow:scroll;
  width:800px;height:600px;
  top:15%;right:-798px;
  box-shadow:-10px 0 20px 0 rgba(0,0,0,.4);  
}
#codeigniter_profiler:hover{
 right:0; 
  box-shadow:-10px 0 70px 70px rgba(0,0,0,1);
}
#graphite_log_graph_holder svg{display:block;}
/* SPRITES ========================================================================= */

/* LAYOUT ========================================================================== */
.wrap{background:#dfd7cc;}
header{
text-align:center;
background:#393536;
border-top:4px solid #64554c;
border-bottom:3px solid #f05d36;
}
article header{
background:0;
border:0;
text-align:left;
}
.logo,.logo a{
display:block;
height:117px;width:234px;
}
.logo{
margin:0 auto;
background:url("/images/JSV2_logo-centred.png") no-repeat 50%;
text-indent:-999em;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5){
	.logo{
	background:url("/images/JSV2_logo_darkBG_centred.svg") no-repeat 50%;
	background-size:235px 117px;
	margin:-10px auto 10px;
	}
}

.logo.x2{display:none}

#main{
background:#dfd7cc;
border-top:1px solid #F7F4EF;
}
#main > article,#main .unit,.front,.back{
padding:2.5%;
margin:2.5%;
background:#fff;
border:1px solid #aaa49b;
box-shadow:0 0 15px -4px rgba(0,0,0,0.39);
}
#main .unit{
margin:2.5% 0;
position:relative;
}
#main .minimal.unit{
padding:0 2.5% 0 0;
margin:0 2.5% 0 0;
}
#main .minimal.last{padding-right:0;}
#main .minimal{
border:0;
background:0;
box-shadow:none;
color:#444;
}
#main > .minimal{
margin:2.5%;
padding:0;
}
.minimal h1{ text-shadow:0 1px 0 rgba(255,255,255,.5); }
#main .minimal a{ color:#A93616;}
.aside-main{ display:none; }
.site-footer{
background:#DED6CB;
padding:0 3% 12px;
text-align:center;
font:italic 0.75em georgia;
border-top:1px dashed #CCC4BB;
padding-top:20px;
}
.site-footer p{margin:0;color:#96877e;line-height:1.6}
/*________NAV MAIN_________*/
.nav-main{
text-align:center;
width:100%;
margin:-15px 0 0;
border-top:1px solid #2f2b2c;
}
.nav-main ul{border-top:1px solid #423f40;padding:4px 0;}
.nav-main li{
display:inline;
margin:0 2.3%;
}
.nav-main a,.login a{
color:#fff;
font-weight:500;
text-transform:uppercase;
text-shadow:0 0 3px rgba(0,0,0,0.4);
font-size:1.5em;
}
.twitter{
font-size:0.75em;
background:url("/images/twitter.png") no-repeat;
float:right;
padding-left:30px;
margin:-8px 7.55% 0 0;
line-height:21px;
}
.twitter a{
color:#fff;
}
.twitter a:hover{color:#f97b54}
/*___ LISTINGS / block links ____ */
#main .listing > a, #main .blockLink p{
color:#666;
display:block;
}
#main .listing > a:hover{
background:0;border-color:transparent;
}
.summary{margin-bottom:14px;}
#main .listing .pubdate{
float:right;
width:19%;
margin:10px;
}
#main .listing a > p:last-child{margin-bottom:0;}

/* FLIPPER ========================================================================= */
#main .flip.unit3{
border:0;
background:0;
box-shadow:none;
padding:0;
position:relative;

/* nb MOZ PERSPECTIVE NEEDS "PX" */
    -moz-perspective:600px;
    -webkit-perspective:600;
    -o-perspective:600;
    -ms-perspective:600;
perspective:600;
}
.card{
position:absolute;
height:100%;width:100%;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
transform-style: preserve-3d;
/*schaaa-wing! http://cubic-bezier.com/ */
	-moz-transition:all .5s cubic-bezier(0.7,-0.6,0.9,1);
		-webkit-transition:all 0.3s cubic-bezier(0.7,0,0.9,1); /*nb webkit doesn't like negative values in cubic-bezier curves yet*/
	-o-transition:all 0.5s cubic-bezier(0.7,-0.6,0.9,1);
	-ms-transition:all 0.5s cubic-bezier(0.7,-0.6,0.9,1);
transition:all 0.5s cubic-bezier(0.7,-0.6,0.9,1);
}
.front,.back{
position:absolute;
height:100%;width:100%;
padding:0;margin:0;
overflow:hidden;/*this is crucial for smooth rendering in Firefox13*/
	-o-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
backface-visibility: hidden;
}
/*can't put padding on an abs pos div without major headaches: */
.front div, .back div{ padding:7.7%; }
.back{
border-color:#93928d;
background:rgb(249,246,237);
background:-moz-linear-gradient(top, rgba(249,246,237,1) 0%, rgba(234,232,218,1) 46%, rgba(227,225,207,1) 100%);
background:-webkit-linear-gradient(top, rgba(249,246,237,1) 0%,rgba(234,232,218,1) 46%,rgba(227,225,207,1) 100%);
background:linear-gradient(top, rgba(249,246,237,1) 0%,rgba(234,232,218,1) 46%,rgba(227,225,207,1) 100%);
	-moz-transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
/* hovered/touched */
.noTouch .card:hover,.card.touched{
	-moz-transform:rotateX(20deg) rotateY(180deg);
	-webkit-transform:rotateX(20deg) rotateY(180deg);
	-o-transform:rotateX(20deg) rotateY(180deg);
	-ms-transform:rotateX(20deg) rotateY(180deg);
transform:rotateX(20deg) rotateY(180deg);
}

.card h3{
margin-right:-5%;
padding-right:25px;
line-height:25px;
background:url("/images/flip-arrow.png") no-repeat 100% 50%;
}

#main .buttress{
border-right:5px solid #D1CAC0;
border-left:5px solid #D1CAC0;
padding:0 5%;
margin-bottom:2em;
}

/* CONTENT ========================================================================= */
#main p,#main address,#main ul,#main ol,#main dl{
font-size:0.8125em;
line-height:1.5;
margin:0 0 1em;
}
#main .caption{
text-align:right;
font-style:italic;
font-size:.75em;
}
#main .caption.codeCaption{
margin-bottom:-1.1em;
}

/* =LINKS & BUTTONS =========================================================================== */
a,.button,.unit{
	-moz-transition:all 0.2s ease;
	-webkit-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
}
#main a, .site-footer a{
color:#CA4F2C;
border-bottom:1px solid transparent;
}
.site-footer a{color:#A93616}
a:visited{}
a:hover{color:#f05d36}
#main a:hover{ color:#ff3600;background:#eee;border-bottom:1px solid #ddd; }
#main a:active{background:#ddd;border-color:#ccc;}
a:focus {}
a:hover, a:active{ outline:0; }
#main a:hover p,#main .listing > a:hover{color:#222;}

.button,#main .button,#main a.button{/*double-up on specificity*/
text-transform:uppercase;
color:#fff;
display:inline-block;
padding:0 3%;
margin-bottom:.3em;
border-radius:2px;
font-size:22px;
position:relative;
box-shadow:
 0 0 0 1px rgba(255,255,255,1),
 0 0 0 2px rgba(0,0,0,.3),
 0 0 0 3px rgba(255,255,255,1),
 0 0 0 4px rgba(0,0,0,.1);
border:1px solid #9c442d;
text-shadow:0 1px 0 rgba(0,0,0,0.5);
background: #f05d36; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2NzA0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iI2Y2NzA0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iI2VhNWMzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYTVjMzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f6704c 0%, #f6704c 52%, #ea5c36 55%, #ea5c36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6704c), color-stop(52%,#f6704c), color-stop(55%,#ea5c36), color-stop(100%,#ea5c36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f6704c 0%,#f6704c 52%,#ea5c36 55%,#ea5c36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f6704c 0%,#f6704c 52%,#ea5c36 55%,#ea5c36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f6704c 0%,#f6704c 52%,#ea5c36 55%,#ea5c36 100%); /* IE10+ */
background: linear-gradient(top,  #f6704c 0%,#f6704c 52%,#ea5c36 55%,#ea5c36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6704c', endColorstr='#ea5c36',GradientType=0 ); /* IE6-8 */
}
.button:hover,#main a.button:hover, #main a:hover .button{
box-shadow:
 0 0 0 2px rgba(255,255,255,1),
 0 0 0 3px rgba(0,0,0,.4),
 0 0 0 4px rgba(255,255,255,1),
 0 0 0 8px rgba(0,0,0,.1);
border-color:#752814;
background-color: #FF3200; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MiUiIHN0b3AtY29sb3I9IiNmNDU0MmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiNlNTQ5MjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f4542c 52%, #e54927 55%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(52%,#f4542c), color-stop(55%,#e54927)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f4542c 52%,#e54927 55%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f4542c 52%,#e54927 55%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f4542c 52%,#e54927 55%); /* IE10+ */
background: linear-gradient(top,  #f4542c 52%,#e54927 55%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4542c', endColorstr='#e54927',GradientType=0 ); /* IE6-8 */
}
.button:active{top:1px;}

.button.alt,#main a.button.alt,.login .button{
color:#fff;
border:1px solid #000;
box-shadow:0 0 0 1px rgba(255,255,255,0.2);
text-shadow:0 1px 0 rgba(0,0,0,1);
background: #4f4b4c; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmNGI0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzRmNGI0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU5JSIgc3RvcC1jb2xvcj0iIzMzMmYzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzJmMzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #4f4b4c 0%, #4f4b4c 44%, #332f30 59%, #332f30 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4b4c), color-stop(44%,#4f4b4c), color-stop(59%,#332f30), color-stop(100%,#332f30)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #4f4b4c 0%,#4f4b4c 44%,#332f30 59%,#332f30 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #4f4b4c 0%,#4f4b4c 44%,#332f30 59%,#332f30 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #4f4b4c 0%,#4f4b4c 44%,#332f30 59%,#332f30 100%); /* IE10+ */
background: linear-gradient(top,  #4f4b4c 0%,#4f4b4c 44%,#332f30 59%,#332f30 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4b4c', endColorstr='#332f30',GradientType=0 ); /* IE6-8 */
}
/* SOCIAL and ARTICLE META =========================================================================== */
.social > div{
float:right;
clear:right;
}
.social iframe,.social > div{margin:0;}
.mini .social{
float:right;
width:37%;
margin-top:10px;
}
header .mini{
overflow:auto;
background:#efefef;
margin:0 0 10px;
padding:8px 2.5%;
border:1px solid #ccc;
}
.minimal header .mini{
background:#fff;
border-color: #D1CAC0;
}
#main header p{
font-size:10px;
font-style:italic;
}
#main header .mini p,#main .noSidebar header p{
float:left;
width:60%;
margin-bottom:0;
color:#333;
text-align:left;
}
.mini .social > div,.noSidebar .social > div, footer .social > div{
clear:none;
margin:0 2px;
}
footer .social > div{
float:left;
}

/* LISTS =========================================================================== */
article ul,article ol,dl{ 
margin:0 0 1.6em;
padding:0 0 0 28px;
}
article ul li,dt{
padding:0 0 0 18px;
margin:0 0 0 -18px;
background:url("/images/JSV2_bullet.png") no-repeat 0 4px;
}
dt{
font-size:1.625em;/*26px*/
background-position:0 0.61538em /*16px*/;
}
dd{ margin:0 0 1em;padding:0; }
li ul,li ol{ margin:0;font-size:1em; }

/* =IMG & FIGURE ==================================================================== */
img{vertical-align:middle;max-width:100%;}
img.floatR,#main .contentImgR{margin:0 0 5% 5%;}
img.floatL,#main .contentImgL{margin:0 5% 5% 0;}
figure{ margin:0; }
figure img{margin-bottom:.75em;}
.contentImgR, .contentImgL{
max-width:67%;
float:right;
}
.contentImgL{float:left;}
.summary .contentImgR, .summary .contentImgL{max-width:58%}

/* HEADINGS ======================================================================== */
h1,h2,h3,h4,h5,h6{
text-transform:uppercase;
color:#444;
margin:0 0 1em;
line-height:0.8;
}
h1{ margin:0 0 0.4em;font-size:3em; }
h2{ margin:0 0 0.3em;font-size:2em; }
h3{ margin:0 0 0.3em;font-size:1.5em; }
h4{ margin:0 0 0.3em;font-size:1.25em; }
h5{ margin:0 0 0.3em;font-size:1em; }
h6{ margin:0 0 0.3em;font-size:1em; }
/*grouped headings*/
hgroup h1,hgroup h2,hgroup h3,hgroup h4{
margin:0 0 0.14em;
}
.divider{
margin:1.6em 0 1em;
text-align:center;
border:4px dashed #dadada;
border-width:4px 0;
padding:14px 0
}
ul+h3{
margin-top:1em;
}

/* HIGHLIGHTS / MARKs ======================================================================== */
.highlight p:last-child,.ie7 .highlight p{
margin-bottom:0!important;
}
.highlight h3,.highlight h2{margin-top:0;}
.highlight .button2{margin:0;}
.highlight{
border:1px solid #F9DCC0;
padding:20px 40px;
margin:0 10% 20px;
overflow:auto;
}
mark,.highlight{background-color:#FFF7D8;} /*keep separate from above for increased specificity, allows reliable use of this class on td elements*/
.minimal .highlight{ border-color:#ceb9a5 }
#main .highlight a{color:#fc4a28;}
.success{
background-color:#DCFFD8;
border-color:#9FDD99;
}
.minimal .highlight.success{ border-color:#b1c7af; } 
.warning, .minimal .highlight.warning{
background-color:#FCE3E0;
border-color:#EDAFA8;
}
.highlight h2,.highlight h3{color:#464646;border:0;}
td.highlight{border:0;}

code{
font-size:15px;
font-family:monaco,monospace;
background:#efefef;
color:#333;
border:1px dotted #aaa;
}

/* TABLES =========================================================================== */
table{
border-collapse:collapse;
margin:14px 0 28px;
width:100%;
border-bottom:4px double #dfd7cc;
box-shadow:0 16px 26px -19px rgba(0,0,0,1);
}
caption{
text-align:right;
margin-bottom:8px;
}
td,th{
font-size:.75em;
border-bottom:1px solid #dfd7cc;
background:#f8f8f8;
color:#5b564f;
padding:8px 12px;
text-align:left;
}
th{
font-size:1.25em;
line-height:1;
color:#444;
}
thead th{
color:#fff;
text-transform:uppercase;
background:#393536;
border-bottom:3px solid #f05d36;
}
tbody th{ 
background:#dfd7cc;
border-color:#bdb4a7;  
text-align:left;
text-transform:uppercase;
border-top:2px solid #423f40;
}
th.nobg{border:0;background:0;}
/*tbody tr:nth-child(even) td{ background-color:#eee; }*/

/* FORMS ============================================================================ */
form { margin:0;}
fieldset { border:0; margin:0; padding:0; }
label{
cursor:pointer;
display:block;
font-weight:700;
}
label em,.required{
color:#F05D36;
font-style:normal;
}
legend { border:0; *margin-left:-7px; padding:0; }
input, select, textarea {
font-size:100%;
margin:0;
vertical-align:baseline; *vertical-align:middle;
}
input[type=text],input[type=password],input[type=email],select,textarea{
padding:4px;
line-height:34px;
height:34px;
width:94%;
border:1px solid #ccc;
border-left:4px solid #dfd7cc;
box-shadow:8px 8px 0 rgba(0,0,0,0.06);
margin:0 0 18px;
color:#666;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.minimal input[type=text],.minimal input[type=password],.minimal input[type=email],.minimal select,.minimal textarea{
border-left-color:#bdb4a7
}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,textarea:focus,input.focus,textarea.focus{
border:1px solid #aaa;
border-left:4px solid #f05d36;
color:#000;
box-shadow:3px 3px 0 rgba(0,0,0,0.042);
}
textarea{
height:140px;
overflow:auto;
vertical-align:top;
line-height:1.4;
font-family:inherit;
font-size:15px;
}
input { line-height:normal; *overflow:visible; }
button, input[type="button"], input[type="reset"], input[type="submit"] { 
cursor:pointer;
-webkit-appearance:button; /*allow styling in iOS*/
margin:10px 0;
}
input[type="checkbox"], input[type="radio"] {
box-sizing:border-box;
margin:2px 6px 0 0;
float:left;
}
/*____ LOGIN FORM ______*/
.login .loginLink{
font-size:1.125em;
background:#64554c;
padding:3px 6px 0;
border-bottom-left-radius:4px;
position:absolute;
right:0;
top:0;
}
.loginLink:hover{
color:#F97B54;
}
.loginForm{
padding:30px 5% 5px;
position:absolute;
top:-300px;
right:0;
z-index:9;
width:68%;
background:#64554c;
text-align:center;
}
.loginForm{box-shadow:0 4px 12px rgba(0,0,0,1);}
.loginForm input[type=text],.loginForm input[type=email],.loginForm input[type=password]{
line-height:21px;
height:21px;
border:1px solid #393536;
box-shadow:8px 8px 0 rgba(0,0,0,0.12);
}
.loginForm label{
color:#555;
font-size:0.8125em;
font-style:italic;
text-align:left;
position:absolute;
left:10%;
margin-top:7px;
}
.loginForm a{
text-transform:none;
font-size:0.75em;
display:block;
}
a.close{
position:absolute;
right:0;
top:0;
font-weight:700;
background:#393536;
width:20px;
height:17px;
display:block;
border:1px solid #000;
border-width:0 0 1px 1px;
border-bottom-left-radius:3px;
}
a.close:hover{ background:#000; }

/* COMMENTS ============================================================================ */
.comments, .comments form{
border-top:4px double #ccc;
padding-top:20px;
margin-top:20px;
}
.minimal .comments,.minimal .comments form{
border-color:#BDB4A7;
}
.comments.withComments form{border:0}
#main .comment p{ line-height:1.4;margin-bottom:0.88em;}
#main .comment p:last-of-type{margin-bottom:0;}
.comment{
margin:0 -2.77% 0;
border:1px solid #ccc;
border-width:1px 0 0;
padding:15px 0;
background:#eee;
overflow:auto;
}
.comment:last-of-type{border-bottom:1px solid #ccc;}
.minimal .comment{
background:0;
border-color:#BDB4A7;
margin:0;
}
.c2{ background:#fff; }
.minimal .c2{
border-color:#BDB4A7;
background:#D3CABE;
color:#333;
}
.commentBody,.commentMeta{
float:right;
width:70%;
margin-right:3%;
}

.commentImg img{
float:left;
width:20%;
margin:-3px 0 0 3%;
padding:1px;
background:#fff;
border:1px solid #ccc;
border-radius:50%;
max-width:80px;
}
.minimal .commentMeta img{
border-color:#BDB4A7;
}
.commentMeta h3{
font-size:1.25em;
margin-bottom:8px;
}
.commentMeta time{
font-style:italic;
font-size:0.75em;
color:#111;
}

/* HOME PAGE ============================================================================ */
/*__SVG (or VML for lte IE8)____*/
.web-strategy{position:relative;overflow:hidden;margin-bottom:20px;}
.web-strategy figcaption{font-size:0.8em}
.web-strategy span{display:block;}
#svg-wrap svg {display:none}
.users,.technology,.business{
text-transform:uppercase;
line-height:1;
text-align:center;
float:left;
border-radius:600px;
width:56%;
padding:12% 0 17%;
}
.users{
background:#bdb4a7;
margin-right:-12%;
}
.technology{
-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
transform:rotate(-4deg);
position:absolute;
left:13%;
bottom:8%;
float:none;
z-index:9;
background:#f05d37;
padding:5px 0;
width:32%;
border-radius:3px;
box-shadow:2px -2px 5px rgba(0,0,0,0.2);
}
.business{ background:#393536; }
.web-strategy span.a{ display:none; }
.b{
font-size:2em;
line-height:0.8;
}
.business .b{color:#dfd7cc}
.c{
line-height:0.7;
font-size:3.75em;
color:#fff;
text-shadow:1px 1px 0 rgba(0,0,0,0.19)
}
.business .c{color:#f97b54;text-shadow:1px 1px 0 rgba(0,0,0,0.9)}
.users .c span,.business .c span{font-size:0.9em;}
.web-strategy span.e,.web-strategy span.d{
display:inline;
color:#fff;
font-size:1.3em;
line-height:1;
padding-bottom:5px;
text-shadow:1px 1px 0 rgba(0,0,0,0.3)
}
.web-strategy span.d{
font:italic 1.2em palatino,"Palatino Linotype", georgia, serif;
}

/* GENERIC & UTILITIES =============================================================== */
.floatL{ float:left; }
.floatR{ float:right; }
.clearfix:before,.clearfix:after { content:"";display:table; }
.clearfix:after,.clearBoth { clear:both; }
.clearfix{ zoom:1; }
.alignRight{ text-align:right; }
.alignCenter{ text-align:center; }
.breatheY{margin-top:24px!important;margin-bottom:24px!important;}
small{ font-size:12px; }
.ie7 img,.iem7 img { -ms-interpolation-mode:bicubic; }




/* ======================================================================================================================================================= */
/*  MEDIA QUERIES ======================================================================================================================================== */
/* ======================================================================================================================================================= */



/*=========================================================================
420 PX
--------------------------------
^ SVG home page graphics
=========================================================================== */

@media only screen and (min-width: 420px) {
/*=========================================================================== */
/*__SVG (or VML)____*/
.svg #svg-wrap svg {display:block}
.svg .web-strategy{padding-left:5%;margin-bottom:0;}
.svg #svg-wrap{height:auto;}
.svg .web-strategy span{display:block!important;}
.svg .users,.svg .technology,.svg .business{
position:absolute;
float:none;
top:19.5%;
width:33.3%;
border-radius:0;
background:0;
box-shadow:none;
padding:0;
}
.svg .users{left:10.2%;margin-top:-3%;}
.svg .technology{
left:33.5%;top:37%;
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
transform:none;
}
.svg .business{left:57.8%;}
.svg .web-strategy span.a{
font:italic 400 1em georgia, serif;
text-transform:lowercase;
color:#fff;
}
.users .c span,.business .c span{font-size:1em;}
.svg .web-strategy span .d{
font:italic 2.1em palatino,"Palatino Linotype", serif;;
color:#2d2d2d;
text-shadow:0 1px 0 rgba(255,174,120,0.66);
line-height:0.2;
padding:0;
}
.svg .web-strategy span .e{
font-size:1.2em;
line-height:2.3;
}
/*========================================================================= */
}



/*=========================================================================
768 PX
--------------------------------
^ Main header pushed to the side
^ Article sidebar
^ Client Login form change
^ Shrink input widths down a bit
=========================================================================== */

@media only screen and (min-width: 768px) {
/*========================================================================= */
.mini{display:none}
.fullscreen{display:block;}
.last{ margin-right:0!important;}

/* LAYOUT ======================================================== */
.wrap{
position:relative;
margin-left:3.4%;
min-height:100%;
height:auto;
}
header{
border:0;
background:0;
}
.col{
background:#393536;
text-align:right;
width:21.4%;
position:absolute;
left:0;bottom:0;top:0;
z-index:9;
padding:0 1.7%;
box-shadow:inset 5px -5px 12px rgba(0,0,0,.11);
}
#main,.site-footer,.login{
margin-left:24.6%;/* (.col width + padding - 2px) */
padding-left:0.2%; /* +2px to cover over any sub-pixel rounding differences (esp webkit)*/
}
.services #main{background:#dfd7cc url("/images/geometry-bg-trans.png") no-repeat 110% -16px;}
.logo{
background:none;
text-indent:0;
margin:4px 0;
}
.logo a,.logo{
width:auto;
height:auto;
}
#main .buttress{border-width:15px;}

/* ARTICLES & GRID UNITS _______________________ */
#main > article{ position:relative; }
.withSidebar .in{ margin-left:26.23% }
/* LISTINGS and BLOCK LINKS _____________________*/
#main .listing .pubdate{
margin:0 0 10px 10px;
}
.listing h2{
width:85%;
float:left;
}
.summary{
    clear:both;
  }
/* ARTICLE SIDEBAR _________________*/

/*article header{
position:static;
width:100%;
}*/
article.withSidebar header > div{
position:absolute;
z-index:9;
left:0;
right:75.5%;
top:4px;
padding:2.64%;
}
.minimal header > div{padding-top:0;}
#main article header p{line-height:1.2;text-align:right;}
.aside-main{
display:block;
position:absolute;
top:0%;/* don't use top% - triggers a Chrome bug. Use padding-top instead */
left:2.64%;
right:75%;
bottom:0;
border-right:4px solid #ccc;
padding-top:22px;
}
.minimal .aside-main {padding-top:56px;border-color:#D1CAC0;}
.withHeader .aside-main,.minimal.withHeader .aside-main {padding-top:115px;}
#main .aside-main > *{ /*work around Chrome rendering bug with nested percentage padding */
margin-right:12.143%;text-align:right;
}
#main .aside-main a,#main .aside-main span{margin-right:0;}
.pubdate{
float:right;
margin:0 0 12%;
position:relative;
height:34px;
}
.pubdate,#main .listing .pubdate{width:56px;}
time .d,time .m, time .y{
color:#ccc;
font-size:25px;
font-style:normal;
text-transform:uppercase;
position:absolute;
line-height:17px;
}
.minimal header time .d,.minimal header time .m, .minimal header time .y{
color:#bdb4A7;
}
time .d{
top:0;right:56%;
font-size:50px;
letter-spacing:-4px;
line-height:31px;
}
time .m{right:0;top:0;}
/*squeeze class for certain months*/
time.Mar .m, time.Aug .m,time.May .m,time.Nov .m{letter-spacing:-1px;font-size:24px;}
time .y{
font-size:22px;
bottom:0;right:0;
letter-spacing:-1px;
}
/* NAV-MAIN_______________________*/
.nav-main{margin:20px 0;}
.nav-main ul{
padding-top:10px;
}
.nav-main li{
display:block;
text-align:right;
margin-right:0;
margin-top:1px;
}
.nav-main a{
border-right:4px solid #222;
display:block;
padding-right:7%;
text-shadow:1px 1px 0 rgba(0,0,0,.28);
font-size:1.6em;
}
.nav-main a:hover,.nav-main .current a{
border-color:#F05D36;
padding-right:4%;
color:#F97B54;
}
.nav-main .current a{
padding-right:7%;
color:#fff;
}
/* CONTENT ======================================================== */
#main p,#main address,#main ul,#main ol,#main dl{
font-size:0.875em;
line-height:1.6;
margin-bottom:1.1em;
}
#main aside p{
font-size:0.6875em;
line-height:1.4;
}
/* LISTS =========================================================== */
article ul,article ol,dl{ 
padding:0 0 0 40px;
}
article ul li{background-position:0 6px;}
.unit li{margin-left:-30px;}
/* HEADINGS ======================================================== */
aside h2{font-size:1.3125em;}

/* FORMS =========================================================== */
article:not(.withSidebar) input[type=text],article:not(.withSidebar) input[type=password],article:not(.withSidebar) input[type=email]{
width:66%; 
}
.login{
border-top:6px solid #393536;
height:34px;
overflow:hidden;
background:#64554C;
box-shadow:inset 0 -5px 8px rgba(0,0,0,.18);
position:relative;z-index:1;
}
.login .loginLink{
top:2px;
z-index:9;
background:0;
}
.loginForm{
overflow:hidden;
position:relative;
width:auto;
padding:3px 0 0 2%;
background:0;
box-shadow:none
}
.inputWrap{
position:relative;
float:left;
width:24%;
margin:0 0.5%;
}
.loginForm label{
top:-2px;left:4%;
}
.loginForm input[type=text],.loginForm input[type=email],.loginForm input[type=password]{
height:16px;
line-height:16px;
margin:0;
box-shadow:none;
}
.loginForm .forgot{
float:right;
margin:6px 17% 0 0;
font-size:0.6875em;
color:#ffdfb4;
text-shadow:0 0 2px rgba(0,0,0,1);
}
.loginForm .forgot:hover{
color:#fff;
}
.login .button{
float:left;
font-size:1em;
margin:1px 0 0 1%;
padding:0 8px;
}
.loginForm .close{display:none;}

/* COMMENTS ================================================== */
.comment{
margin:0 -3.77%;
}
/*========================================================================= */
}



/*=========================================================================
940 PX
--------------------------------
^ Switch on floated grid units
^ Add breathing space to columns
^ Kill bottom margin on last-children of grid columns
^ "Posing" positions for flipper units!
^ Shrink some input widths down further
=========================================================================== */

@media only screen and (min-width: 940px) {
/*========================================================================= */
/*CONTENT */
#main p,#main address,#main ul,#main ol,#main dl{
font-size:1em;
}
#main .unit *:last-child{margin-bottom:0;}
#main .unit{
float:left;
margin:0 2.44% 2.5% 0
}
/* unit3 */
#main .unit3{ width:26.26%; } /*since percentage borders are not possible, need to approximate the compensation for 6px of horizontal borders*/
#main .unit3.minimal{ width:29.26%; } 
#main .unit3.flip{width:31.66%;}

/* unit2 */
#main .unit2{ width:43.4%; }
#main .unit2.minimal{ width:47.5%; }

.col{ width:25.4%; }
#main,.site-footer,.login{ margin-left:28.6%;/* (.col width + padding - 2px) */ }

/* FORMS */
article:not(.withSidebar) input[type=text],article:not(.withSidebar) input[type=password],article:not(.withSidebar) input[type=email]{
width:50%; 
}
/* LISTINGS */
.listing h2{
width:75%;
}
.focus{
margin:0 10%;
padding:0 5%;
border-left:10px solid #D1CAC0;
}
#main .buttress{
border-width:100px;
}
.commentBody,.commentMeta{
width:75%
}

/*========================================================================= */
}


/*=========================================================================
1281 PX
--------------------------------
^ Gettin a bit large now... tweak for better line lengths.
=========================================================================== */

@media only screen and (min-width: 1281px) {
/*========================================================================= */
#main > article, #main > article.withSidebar{
margin:2.5% 8%;
}
#main .buttress{
border-width:160px;
}
/*========================================================================= */
}



/*=========================================================================
(LARGE) RETINA DISPLAYS (and IE!!)
--------------------------------
^ SVG logo
^ Double-sized BG images
@TODO - Need to sort out large retina logo - eg Retina MBP.
=========================================================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 768px), 
only screen and (-o-min-device-pixel-ratio: 3/2) and (min-width: 768px), 
only screen and (min-device-pixel-ratio: 1.5) and (min-width: 768px){
/* ======================================================================== */

 /* NB: for some reason IE 7/8 are reading this MQ. Maybe a respond.js bug/missing feature? */
.logo{display:none}
.oldie .logo{display:block}
.logo.x2{ /*SVG logo*/
display:block;
margin:8px 0 16px;
width:93%;
float:right;
}
.ie7 .logo.x2,.ie8 .logo.x2{display:none}
article ul li,dt{
background:url("/images/JSV2_bullet@2x.png") no-repeat 0 5px;
background-size:10px 12px;
}
dt{background-position:0 14px}
.oldie article ul li,.oldie dt{background:url("/images/JSV2_bullet.png") no-repeat 0 4px;}
.flip h3{
background:url("/images/flip-arrow@2x.png") no-repeat 100% 50%;
background-size:16px 25px;
}
.oldie .flip h3{background:url("/images/flip-arrow.png") no-repeat 100% 50%;}
.twitter{
background:url("/images/twitter@2x.png") no-repeat;
background-size:25px 17px;
}
.oldie .twitter{background:url("/images/twitter.png") no-repeat;}

/* ========================================================================= */
}