/*
* 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.
*/
/* =============================================================================
HTML5 element display
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* http://clagnut.com/blog/348/#c790
* 2. Force vertical scrollbar in non-IE
* 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
* www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
* 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
*/
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
/*
* These selection declarations have to be separate
* No text-shadow: twitter.com/miketaylr/status/12228805301
* Also: hot pink!
*/
::-moz-selection { background: #0067ac; color: #fff; text-shadow: none; }
::selection { background: #0067ac; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }
.no-format-link a, .no-format-link a:hover, .no-format-link a:active {
color: white !important;
}
/* =============================================================================
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: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
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: gist.github.com/413930 */
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; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* Improve image quality when scaled in IE7
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img { border: 0; -ms-interpolation-mode: bicubic; }
/*
* Correct overflow displayed oddly in IE9
*/
svg:not(:root) {
overflow: hidden;
}
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
*/
button, input { line-height: normal; *overflow: visible; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
/*
* Remove inner padding and border in FF3/4
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
/* =============================================================================
Primary styles
Author:
========================================================================== */
/* =============================================================================
Non-semantic helper classes
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide for both screenreaders and browsers:
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* =============================================================================
PLACEHOLDER Media Queries for Responsive Design.
These override the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
/* =============================================================================
Print styles.
Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; 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; } /* css-discuss.incutio.com/wiki/Printing_Tables */
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; }
}
/* =============================================================================
Padding Styles
========================================================================== */
.top_pad {
padding-top: 50px;
}
.bottom_pad {
padding-bottom: 20px;
}
.left_pad {
padding-left:20px;
}
.right_pad {
padding-right: 20px;
}
.text_center {
text-align: center;
}
.h_50 {
height: 50px;
}
li {
}
@font-face{ font-family:'lightWebFont';
src:url('../fonts/opensans-light-webfont.ttf');
src:url('../fonts/opensans-light-webfont.eot') format('eot'),
url('../fonts/opensans-light-webfont.woff') format('woff'),
url('../fonts/opensans-light-webfont.ttf') format('truetype'),
url('../fonts/opensans-light-webfont.svg') format('svg');
font-weight:normal;
font-style:normal;
}
html,body{font-family:'lightWebFont';color:#f2ede3;height:120%;width:100%;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}
#content{min-width:1200px;}
p,h1,h2,h3,h4,h5,h6{-moz-user-select:text;-webkit-user-select:text;-ms-user-select:text;user-select:text;}
a:hover,a:active{color:#c94a00;text-decoration:none;}
#main{height:100%;width:100%;}
p{font-size:12px;}
h1{line-height:1em;font-family:'lightWebFont';font-size:75px;padding:0;margin:0;font-weight:normal;}
h2{font-size:55px;font-weight:normal;}
h3{font-family:'lightWebFont';font-size:32px;font-weight:bold;}
h4{font-family:'lightWebFont';font-size:30px;font-weight:normal;}
h5{font-family:'lightWebFont';font-size:26px;font-weight:normal;}
ul{list-style:none;padding:0;}
li{display:inline;}
ol{font-size:64px;}
#nav{height:100px;position:relative;}
.no-touch .animateArrow{-webkit-transition:-webkit-transform 0.2s ease-in;-moz-transition:-moz-transform 0.2s ease-in;-ms-transition:-ms-transform 0.2s ease-in;/* Required to prevent flicker in Safari */
-webkit-perspective:1000;-webkit-backface-visibility:hidden;}
.no-touch .animateArrowParent:hover .animateArrow{-webkit-transform:translate(5px,0);-moz-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0);}
.disabled{visibility:hidden;}
.relative{position:relative;}
.noBold{font-family:'lightWebFont';}
.bold{font-family:'lightWebFont';}
.toUpper{text-transform:uppercase;}
.clear_fix{overflow:hidden;display:inline-block; position: relative;}
.nav-list{float:right;padding-top:30px;font-size:16px;}
.diligence {display:block;list-style: disc; padding-top:30px;font-size:64px;}
html,body{background-color:#FFF;color:#4e4e4e;}
#header{margin-left:auto;margin-right:auto;}
#header2{margin-left:auto;margin-right:auto;}
strong{font-weight:normal;font-family:'lightWebFont';}
#header,#header_scroll{margin-left:auto;margin-right:auto;}
#header_scroll{width:100%;background-color:white;height:50px;top:-10px;position:fixed;z-index:99;}
#header_scroll li{margin-top:-10px;}
#header_scroll ul.nav-list{margin-top:-10px;margin-right:18px;}
#headerImage{width:1200px;height:400px;background:url("../images/projects/3101-8.jpg") no-repeat;background-size:cover;margin-left:auto;margin-right:auto;}
#home{margin-top:20px;}
.paper-headline{color:#f2ede3;font-size:70px;line-height:0.85;margin-top:141px;text-rendering:optimizeLegibility;}
.frame{width:200px;height:200px;margin:5px;display:inline-table;background-size:auto 150%;border-bottom:45px solid rgba(255,255,255,0.6);background-repeat:no-repeat;background-position:50% 30%;}
.frame:hover{border-bottom:45px solid rgba(255,255,255,0.9);}
.title-word{clear:left;display:block;float:left;margin-bottom:7px;}
#paperSubtext{color:#f2ede3;/* XXX match the text color in the headline image */
float:left;font-size:22px;text-transform:uppercase;margin-top:1.5em;}
#pickUpTools{margin-bottom:24px;text-align:center;}
#freeDownload{position:absolute;left:0;bottom:20px;margin-left:0;margin-right:0;}
.sectionHead p{position:absolute;text-align:right;right:0px;bottom:22px;margin:0;padding:0;color:#c94a00;}
.circle,.circle2{width:2px;height:2px;background-color:rgba(0,103,172,4);border-radius:2px;box-shadow:2px 2px 10px 10px rgba(0,103,172,1); margin-left:40px;margin-right:40px;margin-top:80px;margin-bottom:30px;background-color:rgba(0,103,172,0.9);box-shadow:2px 2px 10px 10px rgb(0,103,172);display:inline-block;}
/*
#wind-turbine div.circle{background-color:rgba(86,61,155,0.9);box-shadow:2px 2px 10px 10px #563d9b;}
#sound-monitoring div.circle{background-image:url('../images/segment.jpg');background-size:cover;background-color:none;box-shadow:none;width:50px;height:50px;}
#vending-soft div.circle{background-color:rgba(50,235,50,0.9);box-shadow:2px 2px 10px 10px rgba(50,235,50,0.9);}
*/
.circleCont{display:flex;margin-left:auto;margin-right:auto;width:250px;display:-webkit-box;/* OLD - iOS 6-,Safari 3.1-6 */
display:-moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
display:-ms-flexbox;/* TWEENER - IE 10 */
display:-webkit-flex;}
.circleCont #wind-turbine{display:flex;margin-left:auto;margin-right:auto;width:200px;display:-webkit-box;/* OLD - iOS 6-,Safari 3.1-6 */
display:-moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
display:-ms-flexbox;/* TWEENER - IE 10 */
display:-webkit-flex;background-color:#563d9b;}
.sectionDescription{width:auto;margin-top:150px;margin-bottom:60px;padding-left:100px;padding-right:100px;font-size:40px;clear:both;text-align:center;}
/*--- Feature Sections (3 Column layout) ---*/
.featureSection{margin-left:auto;margin-right:auto;}
.featureRow{margin-bottom:20px;margin-left:auto;margin-right:auto;text-align:center;width:100%;}
.featureUnit3Column{min-height:100px;width:30.9%;margin:0 1.1%;float:left;}
.featureUnit3Column h3{margin-top:295px;margin-bottom:0px;}
.featureUnit3Column p{width:100%;text-align:left;}
/*--- End Feature Sections ---*/
/*--- Tools Section ---*/
#tools img.mixer{padding-top:73px;/* 275px vertical space - 202px image height */
padding-left:37px;/* (275px horizontal space - 201px image width) / 2 */}
/*--- End Tools Section ---*/
/* --- Interface --- */
#interface{}
#interfaceDemp{position:absolute;width:546px;height:429px;left:-142px;top:25px;background-image:url("../assets/images/ipad-frame.png");z-index:2;}
#paperInterfaceCarousel{/* this guy is the viewport;it wraps #paperInterfaceCarousel .content */
position:absolute;/* margin:53px 0 0 -81px;*/
width:426px;height:498px;top:-10px;left:-81px;z-index:10;overflow:hidden;}
#paperInterfaceCarousel .content{/* this guy is the actual content -- one large canvas w/ sprite bg img */
background:url("../assets/images/carousel-ui.jpg") no-repeat 0px;width:1704px;height:498px;}
.buttons{margin:0;position:absolute;top:476px;left:86px;z-index:21;}
#interface .sectionLeft{margin-top:10px;}
#interface .sectionRight{float:right;/* TODO why isn't this the default...? */
margin-top:60px;}
#interface .sectionRight p{margin:2em 0;}
#interface .featureSection{/**
UPDATE:the below was written when .sectionLeft contained the header.
it no longer does,but the reasoning below still stands. FYI!
this feature section follows two sections floated alongside each other,a
.sectionLeft -- which contains the absolutely-positioned carousel above --
and a .sectionRight -- which takes up more vertical space in the flow than
the .sectionLeft since the image carousel has been removed from the flow.
we want this feature section to clear both sections -- including the image
carousel! -- but since the image carousel isn't part of the flow,we can
only achieve this by hardcoding in the total vertical space to offset by.
we use the .sectionLeft since it's taller than the .sectionRight when you
include the image carousel,and we explicitly clear none since we *don't*
know how much height the taller-in-the-flow .sectionRight of text takes.
we also rely on the .sectionLeft's h1 being two lines. yuck!
for the image carousel,the ipad is the #interfaceDemp element,but the
actual carousel is taller to account for both the buttons below the ipad
and the hand that shows up on the last image. it seems that these guys'
heights are included in #paperInterfaceCarousel,so we use that.
XXX we may also want to add some extra spacing here to match the natural
margins (20px) between feature rows,but we don't do that here right now
since it doesn't feel visually needed:(a) the first/left-most feature's image already has whitespace of its own;its content is vertically centered,with transparency above and below.
(b) the spacing for the carousel already accounts for the hand that shows
up on the last image,but this hand isn't there by default,so the
spacing so far already feels ample by default.
TODO if either of these factors change,we may want to add extra spacing.
THUS,this hardcoded number is the sum of (all from .sectionLeft):- 80px top from #paperInterfaceCarousel
- 498px height from #paperInterfaceCarousel
phew! let's use regular CSS flow in the future! -aseemk
UPDATE:we're also no longer showing the hand,and we've moved the header
from the left to the right,so we want to subtract the amount for the hand
while adding some for spacing. arbitrarily going from 578px to 538px.
**/
margin-top:538px;}
/*--- End interface ---*/
/*--- Get Ideas Out ---*/
#sharing{min-height:600px;/* not the default of 723px from shared.css */}
#sharingCarousel{position:absolute;top:85px;margin-left:-44px;width:500px;}
#sharingCarousel .buttons{top:420px;left:198px;}
#tumblrTheme{/* this guy is the viewport;it wraps #tumblrTheme .content */
display:block;float:left;margin-top:10px;width:447px;height:419px;overflow:hidden;}
#tumblrTheme .content{/* this guy is the actual content -- one large canvas w/ sprite bg img */
background:url("/assets/images/carousel-pages.jpg") no-repeat 0 0;width:1788px;height:419px;}
#tumblrTheme:hover .content{/* Removing hover for now since we're no longer linking to Tumblr pages
background:url("../assets/images/carousel-pages-hover.png") no-repeat;*/}
#sharing .sectionRight{float:right;/* TODO why isn't this the default...? */
margin-top:40px;}
#sharing .sectionRight p{margin:3em 0 0;}
#sharing .featureSection{/**
UPDATE:this feature section has actually been removed,and the header has
also moved from .sectionLeft to .sectionRight. much of the explanation
below still applies,but the numbers here haven't been updated. FYI!
similar reasoning here as #interface's .featureSection.
in this case,the #sharingCarousel element contains most of the carousel,
but the buttons aren't part of that,so we use those buttons as our
effectively-tallest element here.
XXX we add some extra spacing here for visual feel since here,unlike in
#interface,the features' current placeholder images don't have their own
whitespace *and* there's no overlay to account for.
TODO we may want to remove or adjust this spacing once we replace the
features' placeholder images with actual images.
THUS,this hardcoded number is the sum of (all from .sectionLeft):- 18px margin-top from h1.sectionTitle
- 75px -- x3 for three lines -- font-size from h1.sectionTitle
- 438px top from #sharingCarousel's .buttons
- 12px height from the buttons themselves (.carouselButton in shared.css)
- 20px visual spacing to match margin-bottom from .featureRow
phew again! ;) -aseemk
**/
margin-top:713px;}
/*--- End Get Ideas Out ---*/
/*--- Get Stylus ---*/
#stylus{min-height:720px;}
#stylus .sectionLeft p{width:385px;margin-top:45px;}
#stylus #stylusBG{position:absolute;top:65px;width:445px;height:655px;background:url("/assets/images/stylus-bg.jpg") no-repeat 0 50%;}
#buyStylus,#pogoConnect{background:#ca4a1e;-moz-border-radius:100em;-webkit-border-radius:100em;border-radius:100em;color:#fff;display:block;font-size:18px;height:50px;line-height:50px;text-align:center;width:148px;}
.no-touch #buyStylus,
.no-touch #pogoConnect{-webkit-transition:background-color 0.2s ease-out;-moz-transition:background-color 0.2s ease-out;-o-transition:background-color 0.2s ease-out;-ms-transition:background-color 0.2s ease-out;transition:background-color 0.2s ease-out;}
.no-touch #buyStylus:hover,
.no-touch #pogoConnect:hover{background-color:#211f1f;}
/*--- End Get Stylus ---*/
/*--- Buzz ---*/
.buzzHead{margin-bottom:90px;}
#buzz{clear:both;height:auto;min-height:0;}
.buzzUnit{display:inline-block;width:30%;margin:0 1.5% 40px;vertical-align:top;}
.buzzUnit:hover{color:inherit;}
.buzzUnit .logo{color:transparent;height:80px;opacity:0.45;overflow:hidden;text-indent:9999em;width:260px;-webkit-transition:opacity 0.2s ease-out;-moz-transition:opacity 0.2s ease-out;-o-transition:opacity 0.2s ease-out;-ms-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out;}
.svg .buzzUnit .logo{background:url("/assets/images/buzz.svg") no-repeat 50% 0;}
.no-svg .buzzUnit .logo{background:url("/assets/images/buzz.png") no-repeat 50% 0;}
.no-touch .buzzUnit:hover .logo{background-position:0 0;opacity:1;}
.buzzUnit blockquote{color:#211f1f;/* don't look like a link;XXX duplicated from body */
font-size:18px;margin:0;padding:1.5em 0 0.5em;/** XXX using padding instead of margin here since we need margin
around the logos for whitespace but we don't want that margin to
collapse with these. */
position:relative;}
.buzzUnit blockquote:before{content:'“';position:absolute;top:1.5em;/* XXX to match the 1.5em padding-top above */
left:-0.4em;}
.buzzUnit blockquote:after{content:'”';}
#buzz .buzzUnit .ixda{background-position:50% -80px;}
#buzz .buzzUnit .crunchies{background-position:50% -160px;}
#buzz .buzzUnit .apple-design-award{background-position:50% -240px;}
#buzz .buzzUnit .theverge{background-position:50% -320px;}
#buzz .buzzUnit .fastco{background-position:50% -400px;}
/*--- End Buzz ---*/
/*--- Resolution Tweaks ---*/
@media only screen and (max-height:540px){#toolsVideo{width:640px;height:360px;margin-left:-320px;margin-top:-180px;}
}
/*--- End Resolution Tweaks ---*/
/*--- TF Styles 2013 --*/
a{color:rgb(60,60,60);}
a:link{color:rgb(60,60,60);}
a:hover{}
a:visited{}
.nav-list a:link{padding:10px;}
.diligence ul li{display:block;list-style: disc; padding-top:30px;font-size:64px;}
a:hover{color:#0067ac;}
.featureUnit4Column{display:inline-table;position:inherit;width:20%;margin:10px;background-size:no-repeat cover;}
#project_summary{display:-moz-inline-box;}
.projectBox{display:inline-block;vertical-align:top;}
.boxInner{width:300px;margin-left:auto;margin-right:auto;}
.boxInner p{text-align:center;width:320px;font-size:28px;margin-bottom:10px;margin-top:15px;}
.projectBox #box2{padding-left:10px;}
#service_summary{height:230px;text-align:center;padding-top:50px;padding-bottom:50px;position:relative;display:inline;}
#box_1{}
#box_2{}
#box_3{}
#box_4{}
.sum_box{background:rgba(60,60,60,0.9);display:inline-table;height:230px;margin:2px;margin-bottom:5px;width:32%;color:white;}
.sum_box:hover{background:#8400ac;}
.sum_box img{margin:auto;}
.content{height:auto;margin:auto;position:relative;top:40px;width:100px;}
.sum_container{}
.text{display:table;position:relative;text-align:center;width:100%;overflow:hidden;font-size:22px;top:62px;color:white;}
.inner_text{display:table-cell;vertical-align:middle;}
form#contact input,form#contact textarea{}
#email_success{background-color:rgba(152,251,152,0.9);width:90%;height:150px;margin-left:auto;margin-right:auto;text-align:center;padding:20px;margin-top:20px;position:relative;top:-200px;left:-10px;display:none;}
#hidden{display:none;}
#wind-turbine{}
.left{left:0px;position:relative;}
.text{overflow:hidden;}
.right{position:relative;margin-left:150px;padding-top:40px;}
.center{margin-left:70px;margin-right:auto;}
.lightbox-container{height:auto;overflow:hidden;}
.lightbox-container{display:-webkit-box;/* OLD - iOS 6-,Safari 3.1-6 */
display:-moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
display:-ms-flexbox;/* TWEENER - IE 10 */
display:-webkit-flex;/* NEW - Chrome */
display:flex;}
.scroll{height:auto;overflow:auto;z-index:999;}
a.fancybox{color:black;text-decoration:none;}
.fancybox-nav{overflow:hidden;}
.fancybox-outer h1{font-size:40px;line-height:1.2em;margin-top:10px;margin-bottom:10px;}
.fancybox-outer h2{font-size:35px;line-height:1.2em;margin-top:10px;margin-bottom:10px;}
.fancybox-outer h3{font-size:20px;line-height:1.2em;margin-top:10px;margin-bottom:10px;}
p{font-size:1.5em;margin-top:8px;margin-bottom:8px;line-height:1.4em;}
.project_title{width:210px;display:inline-block;position:relative;text-wrap:wrap;overflow:hidden;clear:both;text-align:center;padding-right:10px;display:table-caption;font-size:15px;padding-bottom:15px;padding-left:5px;padding-right:5px;font-weight:700;}
.wide{}
.wide p{}
.narrow{}
.contactFlex{display:-webkit-box;/* OLD - iOS 6-,Safari 3.1-6 */ display:-moz-box;/* OLD - Firefox 19- (buggy but mostly works) */ display:-ms-flexbox;/* TWEENER - IE 10 */ display:-webkit-flex;padding-top:50px;}
.spacer{height:30px;}
.alt{background-color:rgba(0,103,172,0.05);width:100%;}
div#projects.section.clear_fix.sized.part1{width:1170px; overflow: visible;}
.textRight{text-align:right;position:relative;}
.left .image{width:400px;}
.textbox{padding-top:0px;margin-top:-40px;margin-left:40px;width:600px;}
#projects em{padding-top:5px;padding-bottom:20px;display:block;}
.topBox{width:100%;height:230px;background-size:cover;}
#projectsReadMore{padding-top:50px;width:1200px;padding-bottom:30px;text-align:center;}
/*Comment or uncomment the appropriate #headerPhone */
/* NO Whitepapers, NO News*/.sectionDes
/*#headerPhone{width:200px;text-align:right;z-index:80;display:inline;float:right;position:relative;top:97px;left:512px;}*/
/* ONLY Whitepapers */
/*#headerPhone{width:200px;text-align:right;z-index:80;display:inline;float:right;position:relative;top:97px;left:584px;}*/
/* ONLY News*/
#headerPhone{width:200px;text-align:right;z-index:80;display:inline;float:right;position:relative;top:97px;left:575px;}
/* .sectionDes */
/* BOTH Whitepapers & news*/
/*#headerPhone{width:200px;text-align:right;z-index:80;display:inline;float:right;position:relative;top:97px;left:570px;}*/
#headerPhoneProject{width:200px;text-align:right;z-index:80;display:inline;float:right;position:relative;top:97px;left:602px;}
#headerPhoneMobile{display:none;text-align:right;z-index:80;float:right;position:relative;top:70px;}
/*#company{height:1350px;}*/
#featuredSection{padding-bottom:10px;}
.sectionLeft#software p{text-align:justify;width:550px;}
#whatwedo#sectionRight p{padding-top:40px;}
#hardware.sectionLeft{width:400px;}
#hardware.sectionLeft img{padding-top:60px;padding-bottom:30px;}
#hardware.sectionRight{width:520px;margin-top:10px;position:relative;}
#hardware p{text-align:justify;width:550px;margin-left:-150px;}
.middleBox{margin-left:16px;margin-right:16px;}
#technology{padding-bottom:90px;height:2000px;}
#contact{padding-bottom:30px;}
#returnToTop{position:relative;top:20px;padding-left:0px;margin-left:0px;left:10px;font-size:16px;}
#boilerSize{width:200px;}
#projects .thumbnail h3{position:relative;top:120px;padding:10px;width:110%;background-color:rgba(255,255,255,0.9);left:-10px;font-size:17px;height:100px;font-family:"lightWebFont";}
.thumbnail{overflow:hidden;min-height:200px;background-size:cover; margin-left: 6px; margin-right: 6px; width:23.8%}
#logo{height:130px;padding-top:10px;padding-bottom:10px;box-sizing:normal;}
#hardwareImage,#softwareImage{width:100%;}
#softwareImage{padding-top:30px;height:409px;width:353px;}
#hardwareImage{padding-top:30px;height:424px;width:353px;}
#paperImage{width:100%;}
#paperImage{padding-top:30px;max-width:360px;}
#newsImage{width:100%;}
#newsImage{padding-top:10px;padding-left:10px;max-width:360px;}
#featuredSound{background-image:url('../images/projects/404.jpg');}
#featuredProject1{background-image:url('../images/projects/x-092.jpg');}
#featuredProject2{background-image:url('../images/projects/vend.jpg');}
#googleMaps{width:100%;height:450px;}
#technology{height:750px;}
#projects img{width:100%;padding:10px;margin-left:-10px;padding-left:0;margin-right:0;}
#projects div.col-sm-8{padding-left:0px;padding-right:20px;}
span.aReadMore:after{content:" Click to read more...";}
.purpleHover:hover{background-color:#0067ac;}
.purpleHoverText:hover{color:#0067ac;}
.lightbox-container img{padding-bottom:20px;}
input,textarea,button{margin-top:10px}
h5.companyRegistration{margin-bottom:15px;}
.h700{height:700px;}
.purpleHoverText #smartRouter{padding-top:10px;}
#featuredSmartRouter{background-image:url('../images/projects/commshub.jpg');background-size:800px 800px;background-size:cover;}
.proLink{color:rgb(80,80,80);}
.hardwareText p{line-height:1.4em;padding-bottom:15px;}
.software{padding-right:40px;}
.software p{line-height:1.4em;padding-bottom:15px}
.ourCompany{margin-top:20px; margin-bottom:20px; margin-left:auto;}
#projects p{font-size:20px;}
.header-grid-outer{width:1236px;margin-left:auto;margin-right:auto;}
#headerPhone .glyphicon{padding-right:10px;}
.required-field-block{position:relative;}
#higherEducationIMG1{width:59%;padding-top:3px;}
#higherEducationIMG2{width:39%;float:right;}
img#condemnedMan1{padding-bottom:5px;height:170px;width:auto;}
img#condemnedMan2{float:right;position:relative;left:-20px;padding-right:0px;padding-bottom:0px;height:165px;width:auto;}
.required-field-block .required-icon{display:inline-block;vertical-align:middle;margin:-0.25em 0.25em 0em;background-color:#E8E8E8;border-color:#E8E8E8;padding:0.5em 0.8em;color:rgba(0,0,0,0.65);text-transform:uppercase;font-weight:normal;border-radius:0.325em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background 0.1s linear;-moz-transition:background 0.1s linear;transition:background 0.1s linear;font-size:75%;}
.required-field-block .required-icon{background-color:transparent;position:absolute;top:0em;right:0em;z-index:10;margin:0em;width:30px;height:30px;padding:0em;text-align:center;-webkit-transition:color 0.2s ease;-moz-transition:color 0.2s ease;transition:color 0.2s ease;}
.required-field-block .required-icon:after{position:absolute;content:"";right:1px;top:1px;z-index:-1;width:0em;height:0em;border-top:0em solid transparent;border-right:30px solid transparent;border-bottom:30px solid transparent;border-left:0em solid transparent;border-right-color:inherit;-webkit-transition:border-color 0.2s ease;-moz-transition:border-color 0.2s ease;transition:border-color 0.2s ease;}
.required-field-block .required-icon .text2{color:#B80000;font-size:26px;margin:-3px 0 0 12px;}
.fancybox-inner h1{padding-left:15px;}
.headerRight{text-align:right;padding-right:20px;}
.fancybox-custom .fancybox-skin{box-shadow:0 0 50px #222;}
#headergplusw .btn{display:none;}
#headergplusw a#name{position:relative;top:12px;}
.projects a{display:block;}
#recent{width:900px;text-align:left;}
#info{width:900px;position:relative;top:-390px;left:250px;}
#info p{width:600px;}
.sized{width:1200px;margin-left:auto;margin-right:auto;}
.sizedPaper{padding-left: 7px !important;}
#copyright{padding-top:10px; padding-bottom:30px;}
#remaining{text-align:right; padding-right:10px; padding-top:5px}
#message{resize:none;}
a[href="#sound-monitoring"].thumbnail{background-image:url('../images/projects/371.jpg');}
a[href="#wind-turbine"].thumbnail{background-image:url('../images/projects/wind_s.png');}
a[href="#smart-router"].thumbnail{background-image:url('../images/projects/commshub.jpg');}
a[href="#vending-soft"].thumbnail{background-image:url('../images/projects/vending_machine_s.jpg');}
a[href="#vending-hard"].thumbnail{background-image:url('../images/projects/187.jpg');}
a[href="#intelligent-gaming"].thumbnail{background-image:url('../images/projects/259.jpg');}
a[href="#wayteller"].thumbnail{background-image:url('../images/projects/wayteller_s.jpg');}
a[href="#live_label"].thumbnail{background-image:url('../images/projects/livelabel.jpg');}
a[href="#life-counter"].thumbnail{background-image:url('../images/projects/lifecounter.jpg');}
a[href="#telectroscope"].thumbnail{background-image:url('../images/projects/telectroscope1.jpg');}
a[href="#tower_of_london"].thumbnail{background-image:url('../images/projects/bloody_tower.jpg');}
a[href="#classroom_of_the_future"].thumbnail{background-image:url('../images/projects/classroom_of_the_future.jpg');}
a[href="#focal_point"].thumbnail{background-image:url('../images/projects/focalpoint.jpg');}
a[href="#puppeteer"].thumbnail{background-image:url('../images/projects/puppeteer_s.jpg');}
a[href="#higher_education"].thumbnail{background-image:url('../images/projects/higher_education.jpg');}
a[href="#weather_station"].thumbnail{background-image:url('../images/projects/weather.jpg');}
a[href="#survival_game"].thumbnail{background-image:url('../images/projects/survival_game.jpg');}
a[href="#go_to_it"].thumbnail{background-image:url('../images/projects/signals_s.jpg');}
a[href="#ruthin_gaol"].thumbnail{background-image:url('../images/projects/ruthin_s.jpg');}
a[href="#gressenhall"].thumbnail{background-image:url('../images/projects/gressenhall_s.jpg');}
a[href="#find_the_family"].thumbnail{background-image:url('../images/projects/WhoAmI_s.jpg');}
@media screen and (max-width:600px){
body{font-size:1em; width:100%; max-width:100%; min-width:100%; margin-left:0px; margin-left:0;}
.sized{width:100%; margin-left:0px;}
.col-xs-12{padding-top:10px;margin-left:auto;margin-right:auto;}
.mar5{width:auto;}
.sectionHead p{font-size:1em;}
p{font-size:1em;text-align:center;}
#wordCloud{width:100%;}
h1{font-size:1em;}
.sectionDescription{font-size:2em;}
.nav-list{display:none;}
.diligence ul li{display:block;list-style: disc; padding-top:30px;font-size:64px;}
/*#logo{height:auto; padding:10px;}*/
#headerScroll{display:none;}
#headerPhone{display:none;}
#headerPhoneMobile{display:block;left:0;font-size:1.3em;text-align:right;padding-right:20px;width:100%; z-index:9999; top:10px; line-height: 1.3em; text-align: center;}
#headerImage{width:100%; background-image:cover; background-image:url('../images/projects/mobile/3101-8.jpg'); margin:0; position:relative; top:30px;}
#whatwedo{width:100%;}
#mainBody{width:100%;}
#hardwareImage,#softwareImage,{height:auto;width:100%;margin-left:10px;}
#paperImage{height:auto;width:100%;margin-left:0px;}
#newsImage{height:auto;width:100%;margin-left:0px;}
#featuredSound{background-size:cover;}
#featuredWind{background-position:0 -900px;}
.mobileSizing{font-size:1em;padding-bottom:30px;}
.mobileSizing h5 {font-size: 1em;}
#projectsReadMore{width:100%;}
#contact{position:relative;}
#googleMaps{width:100%; border:0;}
#company{height: auto; padding-bottom:80px;}
.header-grid-outer{width:100%; margin-left:0px; text-align: center; float:none; padding:0px;}
/*#logo{width:300px; margin-left:10px; margin-right: 10px; text-align: center;}*/
#header{margin:0;}
div#header.clear_fix.sized{height:450px;}
.sectionDescription{padding:10px; margin-bottom:20px;}
div#wordCloudContainer{height:auto;}
h1{font-size:45px; text-align: center; padding:5px;}
h2{text-align: center;}
#projects, #whatwedo, #technology, #contact, #content{width:100%; min-width:100%; max-width:100%;}
#header_scroll{width:100%;}
#technology{height:1700px;}
.software{padding:5px;margin-left:auto; margin-right:auto;}
#QRCode{display:none;}
#featuredWind{background-position:0 0;}
}
@media screen and (max-width:320px){
body{font-size:1em; width:320px; max-width:320px; min-width:320px; margin-left:0px; margin-left:0;}
.sized{width:320px; margin-left:0px;}
.col-xs-12{padding-top:10px;margin-left:auto;margin-right:auto;}
.mar5{width:auto;}
.sectionHead p{font-size:1em;}
p{font-size:1em;text-align:center;}
#wordCloud{width:100%;}
h1{font-size:1em;}
.sectionDescription{font-size:2em;}
.nav-list{display:none;}
.diligence ul li{display:block;list-style: disc; padding-top:30px;font-size:64px;}
/*#logo{height:auto; padding:10px;}*/
#headerScroll{display:none;}
#headerPhone{display:none;}
#headerPhoneMobile{display:block;left:0;font-size:1.3em;text-align:right;padding-right:20px;width:300px; z-index:9999; top:10px; line-height: 1.3em; text-align: center;}
#headerImage{width:320px; background-image:cover; background-image:url('../images/projects/mobile/3101-8.jpg'); margin:0; position:relative; top:30px;}
#whatwedo{width:100%;}
#mainBody{width:100%;}
#hardwareImage,#softwareImage{height:auto;width:100%;margin-left:10px;}
#paperImage{height:auto;width:100%;margin-left:0px;}
#newsImage{height:auto;width:100%;margin-left:0px;}
#featuredSound{background-size:cover;}
#featuredWind{background-position:0 -900px;}
.mobileSizing{font-size:1em;padding-bottom:30px;}
.mobileSizing h5 {font-size: 1em;}
#projectsReadMore{width:100%;}
#contact{position:relative;}
#googleMaps{width:100%; border:0;}
#company{height: auto; padding-bottom:80px;}
.header-grid-outer{width:320px; margin-left:0px;}
/*#logo{width:300px; margin-left:10px; margin-right: 10px;}*/
#header{margin:0;}
div#header.clear_fix.sized{height:420px;}
.sectionDescription{padding:10px; margin-bottom:20px;}
div#wordCloudContainer.col-sm-4.col-xs-12{height:330px;}
h1{font-size:45px; text-align: center; padding:5px;}
h2{text-align: center;}
#projects, #whatwedo, #technology, #contact, #content{width:320px; min-width:320px; max-width:320px;}
#header_scroll{width:320px;}
#technology{height:1700px;}
.software{padding:5px;margin-left:auto; margin-right:auto;}
#QRCode{display:none;}
#featuredWind{background-position:0 0;}
}
.h100{height:100px;}
.h150{height:250px;}
.h200{height:200px;}
.h250{height:250px;}
.h300{height:300px;}
.w400{width:400px;}
.grey{background-color:grey;background-color:rgba(66,66,66,0.7);}
.pad5{padding:5px;}
.mar10{margin:10px;}
.h240{height:240px;}
.bp50{padding-bottom:50px;}
.bp20{padding-bottom:20px;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.l_bottom_pad{padding-bottom:80px;}
.sm_top_pad{padding-top:25px;}
.center{margin-left:auto;margin-right:auto;text-align:center;}
.w300{width:300px;}
.w100p{width:100%;}
@media only screen and (min-width: 600px) {
.header-grid-outer {
width: 100%;
position: fixed;
top: 0;
background: #FFFFFF;
z-index: 99;
}
#company {
margin-top: 0px;
}
}
#galleryHeading {
margin-top: 100px;
}
.topMargin {
margin-top: 150px;
}
#headerPhone{width:200px;text-align:right;z-index:80;display:inline;float:right;position:relative;top:97px;left:575px;}