/*
HTML5 ✰ Boilerplate
style.css contains a reset, font normalization and some base styles.
credit is left where credit is due.
much inspiration was taken from these projects:
yui.yahooapis.com/2.8.1/build/base/base.css
camendesign.com/design/
praegnanz.de/weblog/htmlcssjs-kickstart
*/
/*
html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
html5doctor.com/html-5-reset-stylesheet/
*/
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;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
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; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */
/* fonts.css from the YUI Library: developer.yahoo.com/yui/
Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages
There are three custom edits:
* remove arial, helvetica from explicit font stack
* we normalize monospace styles ourselves
* table font-size is reset in the HTML5 reset above so there is no need to repeat
*/
body { font:14px/150% sans-serif; *font-size:small; } /* hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }
/* normalize monospace sizing
* en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
*/
pre, code, kbd, samp { font-family: monospace, sans-serif; }
/*
* minimal base styles
*/
body, select, input, textarea {
/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
color: #CCC;
/* set your base font here, to apply evenly */
font-family: 'Merriweather', "Helvetica Neue", Helvetica, "Arial";
font-weight: 100;
}
select, input, textarea {
color: #444;
}
/* Headers (h1,h2,etc) have no default font-size or margin,
you'll want to define those yourself. */
h1,h2,h3,h4,h5,h6 { font-weight: 100; }
/* always force a scrollbar in non-IE */
html { overflow-y: scroll; overflow-x: auto; }
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
a, a:active, a:visited {
color: #4ba00a;
text-decoration: none;
}
a:hover {
color: #6bc02a;
}
cite {
font-size: 85%;
display: block;
margin-top: 10px;
font-style: normal;
}
ul, ol { margin-left: 0; }
ol { list-style-type: decimal; }
/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {
padding: 15px;
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}
textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
/* align checkboxes, radios, text inputs with their label
by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }
/* webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }
/* colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px;
-moz-box-shadow: 0px 0px 5px red;
-webkit-box-shadow: 0px 0px 5px red;
box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid { background-color: #f0dddd; }
/* These selection declarations have to be separate.
No text-shadow: twitter.com/miketaylr/status/12228805301
Also: hot pink. */
::-moz-selection{ background: #b70d00; color:#fff; text-shadow: none; }
::selection { background:#b70d00; color:#fff; text-shadow: none; }
/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }
/* make buttons play nice in IE:
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button { width: auto; overflow: visible; }
/* bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }
/*
* Non-semantic helper classes
*/
/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
/* 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
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
.clearfix:before, .clearfix:after {
content: "\0020"; display: block; height: 0; visibility: hidden;
}
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
/* Primary Styles
Author:
*/
/* General */
h1, h2, h3, h4, .webfont {
font-family: 'Merriweather', "Helvetica Neue", Helvetica, "Arial";
color: inherit;
font-weight: 100;
}
h1 {
font-size: 36px;
display: inline-block;
line-height: 130%;
padding: 12px 0 6px;
}
h2 {
font-size: 24px;
/* display: inline-block; */
line-height: 130%;
padding: 6px 0 6px;
}
h3 {
font-size: 16px;
/* display: inline-block; */
line-height: 150%;
padding: 0 0 6px 0;
margin-bottom: 6px;
border-bottom: 1px dotted #444;
}
p {
margin: 0 0 18px 0;
}
a {
cursor: pointer;
}
ul {
list-style: none;
font-size: 14px;
line-height: 18px;
margin: 18px 0px 18px 0;
}
ul li {
background: url(../images/list-item1.png) 0px 8px no-repeat;
padding-left: 30px;
padding-top: 6px;
padding-bottom: 0px;
list-style-type: none;
}
ul ul {
margin: 0 0 0 18px;
list-style: square;
font-size: 14px;
font-weight: 100;
}
ul ul li {
padding: 0;
background: none;
}
/* body {font-family: helvetica, arial, sans-serif;} */
/* a{color:white;} */
.pika-wrap {width: 520px; margin: 0 auto;}
.pika-image {
position: relative;
height: 440px;
width: 875px;
background-color: #000;
border: 1px solid #F00;
padding: 10px;
behavior: url(js/PIE.htc);
margin: 0 auto 0 auto;
}
/*position image holders */
.pika-image .animation, .pika-image .main-image {position: absolute; top: 10px; left: 10px;}
.pika-image .animation {display: none;z-index:2;}
.pika-image img {border:0;}
.pika-image .caption {position: absolute; background-color: #111; font-size: 14px; color: #fafafa; padding: 10px; text-align: left; bottom: 50px; right: 10px; width: 855px;}
.pika-image .caption p {padding: 0; margin: 0; line-height: 14px;}
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
.pika-imgnav a.previous {background: url(../assets/images/prev.png) no-repeat left 50%; height: 340px; width: 50px; top: 10px; left: 10px;cursor:pointer;}
.pika-imgnav a.next {background: url(../assets/images/next.png) no-repeat right 50%; height: 340px; width: 50px; top: 10px; right: 10px;cursor:pointer;}
.pika-imgnav a.play {background: url(../assets/images/play.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display: none;cursor:pointer;}
.pika-imgnav a.pause {background: url(../assets/images/pause.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display:none;cursor:pointer;}
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;}
.pika-textnav a {font-size: 12px; text-decoration: none; font-family: helvetica, arial, sans-serif; color: #fff; padding: 4px; cursor: pointer; z-index: 999; }
.pika-textnav a:hover {background: #e5e5e5; color: #0065B2;}
.pika-textnav a.previous {float: left; width: auto; display: block;}
.pika-textnav a.next {float: right; width: auto; display: block;}
.pika-thumbs {margin: 10px 0 0 0; padding: 0; overflow: hidden; }
.pika-thumbs li {float: left; list-style-type: none; width: 74px; padding: 3px; margin: 0 2px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer; }
.pika-thumbs li:last {margin: 0;}
.pika-thumbs li .clip {position:relative;width: 74px; height: 74px; text-align: center; vertical-align: center; overflow: hidden; }
.clip span{background-color:black;position:absolute;top:5px;left:5px;display:block;}
ul#pikame{width:570px;}
/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 30px;}
.jcarousel-skin-pika .jcarousel-container-vertical { width: 90px; height: 350px; padding: 20px 20px;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 878px; margin: 0 auto 0 auto; top: 80px;}
.jcarousel-skin-pika .jcarousel-clip-vertical { width: 90px; height: 350px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}
.jcarousel-skin-pika .jcarousel-item-vertical {margin-bottom: 10px;}
.jcarousel-skin-pika .jcarousel-item-placeholder {background: #fff; color: #000;}
/*
* Media queries for responsive design
* These follow after primary styles so they will successfully override.
*/
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}
/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)
Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
div#headercontainer {
position: absolute;
}
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
j.mp/textsizeadjust
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; }
abbr:after { content: " (" attr(title) ")"; }
.ir a:after { content: ""; } /* Don't show links for images */
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; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
/* body {font-family: helvetica, arial, sans-serif;} */
/* a{color:white;} */
.pika-wrap {width: 520px; margin: 0 auto;}
.pika-image {
position: relative;
height: 440px;
width: 875px;
background-color: #000;
border: 1px solid #F00;
padding: 10px;
behavior: url(js/PIE.htc);
margin: 0 auto 0 auto;
}
/*position image holders */
.pika-image .animation, .pika-image .main-image {position: absolute; top: 10px; left: 10px;}
.pika-image .animation {display: none;z-index:2;}
.pika-image img {border:0;}
.pika-image .caption {position: absolute; background-color: #111; font-size: 14px; color: #fafafa; padding: 10px; text-align: left; bottom: 50px; right: 10px; width: 855px;}
.pika-image .caption p {padding: 0; margin: 0; line-height: 14px;}
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
.pika-imgnav a.previous {background: url(../assets/images/prev.png) no-repeat left 50%; height: 340px; width: 50px; top: 10px; left: 10px;cursor:pointer;}
.pika-imgnav a.next {background: url(../assets/images/next.png) no-repeat right 50%; height: 340px; width: 50px; top: 10px; right: 10px;cursor:pointer;}
.pika-imgnav a.play {background: url(../assets/images/play.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display: none;cursor:pointer;}
.pika-imgnav a.pause {background: url(../assets/images/pause.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display:none;cursor:pointer;}
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;}
.pika-textnav a {font-size: 12px; text-decoration: none; font-family: helvetica, arial, sans-serif; color: #fff; padding: 4px; cursor: pointer; z-index: 999; }
.pika-textnav a:hover {background: #e5e5e5; color: #0065B2;}
.pika-textnav a.previous {float: left; width: auto; display: block;}
.pika-textnav a.next {float: right; width: auto; display: block;}
.pika-thumbs {margin: 10px 0 0 0; padding: 0; overflow: hidden; }
.pika-thumbs li {float: left; list-style-type: none; width: 74px; padding: 3px; margin: 0 2px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer; }
.pika-thumbs li:last {margin: 0;}
.pika-thumbs li .clip {position:relative;width: 74px; height: 74px; text-align: center; vertical-align: center; overflow: hidden; }
.clip span{background-color:black;position:absolute;top:5px;left:5px;display:block;}
ul#pikame{width:570px;}
/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 30px;}
.jcarousel-skin-pika .jcarousel-container-vertical { width: 90px; height: 350px; padding: 20px 20px;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 1000px; margin: 0 auto 0 auto; top: 80px;}
.jcarousel-skin-pika .jcarousel-clip-vertical { width: 90px; height: 350px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}
.jcarousel-skin-pika .jcarousel-item-vertical {margin-bottom: 10px;}
.jcarousel-skin-pika .jcarousel-item-placeholder {background: #fff; color: #000;}
body {
background-image: url('../images/newnoise.jpg');
background-repeat: repeat-y;
background-attachment: fixed;
background-position: center top;
background-color: #262222;
font-family: 'Merriweather', "Helvetica Neue", Helvetica, "Arial";
font-weight: 400;
overflow: hidden;
}
div#shine {
width: 100%;
height: 650px;
position: fixed;
top: 0; left: 0;
background-image: url('../images/newnoiselight.jpg');
background-repeat: no-repeat;
background-position: center top;
z-index: 1;
}
div#shadow-left {
width: 674px;
height: 669px;
position: fixed;
top: 0; left: 0;
background-image: url('../images/shadow-left.png');
background-repeat: no-repeat;
z-index: 1;
}
div#shadow-right {
width: 674px;
height: 669px;
position: fixed;
top: 0; right: 0;
background-image: url('../images/shadow-right.png');
background-repeat: no-repeat;
z-index: 1;
}
/* Specific */
div#container {
margin: 100px auto;
margin-bottom: 10px;
width: 1000px;
min-height: 100px;
height: auto;
position: relative;
z-index: 60;
padding-top: 32px;
}
div.cv_sh {
margin: 0 auto;
width: 1050px;
height: 48px;
background-image: url('../images/curve_shadow.png');
background-repeat: no-repeat;
position: absolute;
left: -25px;
bottom: -48px;
opacity: 0.6;
z-index: 10;
}
div#infoBar {
margin: 0 auto;
height: 32px;
width: 100%;
position: fixed;
top: 0;
background-color: #222222;
/*
background-image: url(../images/headbg.png);
background-repeat: repeat-x;
*/
z-index:8;
overflow: hidden;
border-bottom: 1px dotted #000;
/*
-webkit-box-shadow: 1px 1px 8px #000;
box-shadow: 1px 1px 8px #000;
-moz-box-shadow: 1px 1px 8px #000;
*/
}
#infoContent {
margin: 0 auto;
width: 100%;
height: 32px;
position: fixed;
text-align: center;
color:#999;
top: 0;
left: 0;
}
ul#links {
margin: 0;
width: 920px;
position: relative;
margin-right: auto;
margin-left: auto;
text-align: right;
z-index:80;
list-style: none;
padding: 0;
}
ul#links li {
margin:2px 0px 5px 0px;
width: auto;
display: inline-block;
color: #FFF;
font-size: 16px;
font-weight: 400;
position: relative;
list-style: none;
background-image: none;
padding: 0;
border-left: 1px solid #000;
}
ul#links li a {
margin: 0; padding: 2px 8px;
text-align: left;
display: block;
color: #EEE;
}
ul#links ul {
position: absolute;
top: 30px;
left: -1px;
width: 280px;
margin: 0;
display: none;
}
ul#links ul.right {
left: auto;
right: 0;
width: 320px
}
ul#links ul li {
text-align: left;
margin: 0;
padding: 0;
width: 100%;
border-bottom: 1px solid transparent;
}
ul#links ul li a {
color: white;
}
ul#links li:hover a {
color: white;
}
ul#links li:hover ul {
display: block;
}
ul#links li:hover, ul#links li ul {
background-color: rgba(0,0,0,0.6);
}
ul#links ul li:hover {
border-left-color: #4ba00a;
}
ul#links li.create:hover, ul#links li.create ul {
background-color: rgba(126,0,0,0.5);
}
ul#links li.connect:hover, ul#links li.connect ul {
background-color: rgba(102,190,10,0.5);
}
ul#links li.control:hover, ul#links li.control ul {
background-color: rgba(0,160,255,0.5);
}
div#infoContent a {
color: #888;
text-decoration: none;
text-shadow: #000 -1px -1px -1px;
display: block;
height: 26px;
padding-left: 12px;
padding-right: 12px;
line-height: 26px;
}
div#infoContent a:visited {
text-decoration: none;
}
div#infoContent a:hover {
color: #BBB;
/* background-color: #111; */
}
div#infoContent #browser {
margin: 0 auto;
width: 500px;
position: relative;
z-index: 1;
top:2px;
text-align:left;
}
#browser p {
color: #e1e1e1;
font-size: 12px;
margin-bottom:2px;
padding-top: 5px;
}
div#infoContent #browser #icon, div#icon {
float: left;
position: relative;
margin: 0px 5px 0px 0px;
width: 26px;
height: 26px;
}
div#infoContent #search {
width: 220px;
position: absolute;
top: 0; right: 0;
padding: 0;
z-index:2;
text-align: right;
/* display: none; */
}
div#infoContent #search input {
margin: 0 auto;
font-weight: 200;
font-size:12px;
line-height: 22px;
height: 20px;
width: 120px;
margin: 4px 0px 4px 0px;
background-color:#444;
color: #999;
border:1px ridge #555;
}
div#infoContent #search input[type=button] {
margin: 4px 0px 4px 2px;
height: 24px;
width: 30px;
background-color: #800000;
color: #FFF;
border: 1px solid #bc0000;
cursor: pointer;
}
div#headercontainer {
width: 100%;
position: fixed;
top: 0;
height: 130px;
text-align: center;
}
div#header {
margin: 0 auto;
width: 1000px;
height: 110px;
position: relative;
z-index: 40;
margin 0 auto;
padding-top: 0px;
background-color: #222;
background-image: url(../images/header-bg.png);
background-repeat: repeat-x;
/*
box-shadow: 0px 4px 20px #000;
-webkit-box-shadow: 0px 6px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 4px 20px #000;
*/
border-left: 1px solid #333333;
border-bottom: 1px solid #272727;
border-right: 1px solid #272727;
}
div#logo {
width: 185px;
height: 90px;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
position: absolute;
top: 0px;
margin: 0px 0px 0px 20px;
}
div#pageIdentifier {
position: absolute;
top: 40px; right: 40px;
width: 600px;
height: auto;
text-align: right;
}
div#pageIdentifier h3 {
color: #575555;
font-size: 48px;
line-height: 48px;
font-weight: 200;
text-shadow: black -1px -1px;
border: 0;
}
div#tweets {
width: 270px;;
height: 180px;
/* background-color: #aee3f4; */
background-color: #111;
border: 1px solid #333;
color: #777;
font-size: 11px;
line-height: 11px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
overflow: hidden;
border-radius: 6px;
-moz-border-radius: 6px;
-moz-border-radius: 6px;
position: absolute;
top: 26px;
left: 20px;
behavior: url(/js/PIE.htc);
}
#tweets ul {
list-style: none;
}
#tweets li {
height: auto;
list-style: none;
z-index: 5;
background-image: none;
font-size: 12px;
position: relative;
vertical-align: middle;
width: 150px;
height: 160px;
}
#tweets li div {
height: 160px;
}
div#tweetView {
position: absolute;
top: 10px;
left: 90px;
width: 160px;
}
div#tweet_bird {
width: 100px;
height: 100px;
background-image: url('../images/twitter.png');
background-repeat: no-repeat;
z-index: 5;
position: absolute;
top: 10px;
left: 0px;
}
.company-details {
font-family: "Droid Sans", Helvetica, Arial;
position: absolute;
bottom: 10px;
}
#projects {
margin: 0 auto;
width: 1000px;
height: 325px;
position: relative;
top: 60px;
}
#video {
width: 1000px;
height: 338px;
position: relative;
top: 0px;
margin: 0 auto;
z-index: 50;
}
#commentary {
position: absolute;
top: 120px;
left: 60px;
width: 400px;
}
#player {
background-color:transparent;
display: none;
width: 720px;
height:400px;
padding:72px 0px;
}
div#projects.case-studies {
height: 300px;
top: 100px;
}
div#projects.case-studies.show {
height: 315px;
top: 70px;
}
div#about {
margin: 0 auto;
width: 1000px;
height: 300px;
position: relative;
top: 120px;
z-index: 1;
}
div#about div {
margin: 0 20px
}
div#about h2 {
font-size: 48px;
margin-top: 60px;
}
div#about h3 {
font-size: 24px;
margin-top: 10px;
padding-top: 16px;
border-top: 1px dotted #999;
color: #999;
}
div#projects_cnt {
width: 400px;
height: 300px;
margin: 60px 20px 20px 45px;
position: absolute;
left: 0;
z-index: 2;
color: #FFF;
display: none;
}
div#projects_cnt ul {
width: auto;
max-width: 300px;
font-size: 18px;
font-weight: 100;
list-style: none;
margin-top: 20px;
margin-bottom: 15px;
margin-left: 5px;
}
div#projects_cnt ul li {
line-height: 32px;
background: url(../images/tick.png) 240px 0px no-repeat;
}
div#projects_cnt h2.type {
position: absolute;
right: 0;bottom: 0;
display: inline-block;
font-weight: bold;
}
div#projects_cnt a:link {
text-decoration: none;
}
div#projects_cnt a:visited {
text-decoration: none;
}
div#projects_cnt a:hover {
/* color: #C00; */
}
div#projectLinks {
width: 400px;
position: absolute;
bottom: 0;
}
div#projects_img {
margin: 0 auto;
position: absolute;
right: 0; top: 0;
width: 600px;
height: 420px;
background-repeat: no-repeat;
z-index: 10;
display: none;
background-position: right;
}
div#projects p.desc {
color: #FFF;
font-size: 18px;
line-height: 140%;
}
div#projects ul.sectionList {
}
div#glow {
display: none;
width: 1200px;
height: 300px;
/* background-image: url('../images/glow.png'); */
background-repeat: no-repeat;
position: absolute;
left: -100px;
bottom: 0;
z-index: 1;
opacity: 0.1;
}
div#main {
margin: 0 auto;
width: 100%;
height: auto;
position: relative;
bottom: 40px;
min-height: 300px;
background-color: #1C1C1C;
border-top: 1px solid #272727;
border-left: 1px solid #333333;
border-right: 1px solid #272727;
}
div.shadowleft {
position: absolute;
width: 20px;
height: 99.6%;
background-image: url('../images/shadowleft.png');
background-repeat: repeat-y;
left:-20px;
top: 0px;
}
div.shadowright {
position: absolute;
width: 20px;
height: 99.6%;
background-image: url('../images/shadowright.png');
background-repeat: repeat-y;
right:-20px;
top:0px;
}
.topadj {
margin-top: 8px;
}
.row {
margin: 0 auto;
width: 960px;
text-align: center;
}
.rowleft {
text-align: left;
}
.ccolumn {
margin: 0px 5px;
width: 306px;
display: block;
float: left;
position: relative;
cursor: pointer;
background-image: url(../images/trans.png);
background-position: center top;
background-repeat: no-repeat;
}
.ccolumn2 {
margin: 0px 2px;
width: 180px;
display: block;
float: left;
position: relative;
cursor: pointer;
background-image: url(../images/trans.png);
background-position: center top;
background-repeat: no-repeat;
}
.ccolumn2 .hqdesc {
padding: 10px 15px;
width: 146px;
height: auto;
min-height: 405px;
padding-bottom: 60px;
margin-top: 0px;
}
.ccolumn2 .hqimg {
width: 175px;
height: 175px;
margin-top: 20px;
}
.ccolumn2 .hqimg img {
width: 175px;
height: 175px;
}
div#ccc {
height: 165px;
}
.csection {
min-height: none;
height: 165px;
text-align: center;
}
#homecols {
position: relative;
text-align: center;
left: 16px;
}
#homecols .ccolumn {
height: 600px;
color: #CCC;
text-align: left;
margin-top: 18px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
behavior: url(/js/PIE.htc);
}
div.ccc {
margin: 5px;
}
.in {
margin: 6px 12px 12px 12px;
}
#homecols .in {
margin: 20px 30px;
}
#homecols .in h2 {
margin-top: 70px;
font-size: 18px;
}
div#hqintro {
margin-top: 40px;
}
#hqcols {
margin-bottom: 60px;
}
div.hqimg {
height:300px;
}
div.hqdesc {
background-color: #DEDEDD;
color: #444;
text-align: left;
height: 350px;
padding: 20px 30px;
margin: 30px 0 0 5px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
behavior: url(/js/PIE.htc);
}
div.hqdesc h2 {
color: #4ba00a;
font-size: 18px;
}
.ccolumn2 .hqdesc h2 {
font-size: 16px;
}
.ccolumn2 .hqdesc p {
font-size: 12px;
}
h2.cshead {
margin-bottom: 0px;
}
div.csection h3 {
font-size: 36px;
line-height: 36px;
padding: 8px 0 10px 0;
font-weight: 100;
color: #888;
margin: 10px 0 10px 0;
position: relative;
z-index: 4;
text-shadow: #111 -1px -1px -1px;
}
div.csection h2 {
font-size: 16px;
color: #aaa;
font-weight: 100;
text-align: center;
position: relative;
}
div#ccc img.shineglow {
position: absolute;
top: 0; left :0;
display: none;
z-index: 1;
}
div#create {
border-bottom: 2px solid #7d0000;
}
div#connect {
border-bottom: 2px solid #44b40d;
}
div#control {
border-bottom: 2px solid #00aeff;
}
div#create_glow {
background-color: #7d0000;
opacity: 0.5;
}
div#connect_glow {
background-color: #44b40d;
opacity: 0.5;
}
div#control_glow {
background-color: #00aeff;
opacity: 0.5;
}
div.cglow {
width: 315px;
height: 13px;
display: inline-block;
}
div#tagline {
margin: 0 auto;
width: 998px;
border-bottom: 1px solid #363333;
padding: 0 0 12px 0;
margin-top: 0;
position: relative;
/* background-color: #200; */
background-image: url(/images/tagline-bg.jpg);
background-repeat: no-repeat;
background-position: center top;
color: #FFF;
}
body.hq div#tagline {
background-image: url(/images/tagline-bg-hq.jpg);
background-position: center -70px;
}
div#tagline div {
margin: 0 40px 20px 40px;
}
div#tagline h2 {
margin: 0 auto;
padding: 0;
font-size: 20px;
line-height: 32px;
color: #EEE;
}
div#tagline h2.max {
margin: 0 auto;
padding: 0;
font-size: 20px;
line-height: 32px;
color: #EEE;
max-width: 625px;
float: left;
clear: both;
}
div#tagline h1 {
margin: 12px auto 0 auto;
font-size: 32px;
color: #EEE;
}
h2.section_intro {
text-align: left;
font-size: 32px;
float: left;
line-height: 48px;
padding: 12px 0;
}
div#jumpTo {
width: 100%;
margin: 0 auto;
position: relative;
text-align: center;
padding: 20px 0px 8px 0px;
font-size: 14px;
}
div#jumpTo a {
cursor: pointer;
margin: 0px 6px 0px 6px;
}
div.cbox {
/* behavior: url(PIE.htc); */
width: 960px;
min-height: 300px;
height: auto;
margin: 15px 0 35px 0;
/*
box-shadow:inset 0 0 10px #222;
-moz-box-shadow:inset 0 0 10px #222;
-webkit-box-shadow:inset 2px 2px 12px #222;
*/
position: relative;
overflow: hidden;
color: #FFF;
padding-bottom: 15px
}
div.cbox-right {
/* behavior: url(PIE.htc); */
float: right;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
div.cbox-left {
/* behavior: url('css/PIE.htc'); */
float: left;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
div.cbox div.in {
margin: 20px 40px;
margin-right: 0;
}
div.cbox-left div.in {
margin-left: 80px;
}
div.cbox-right div.in {
margin-right: 80px;
}
body.hq div.cbox h2 {
font-family: "Droid Sans", Helvetica, Arial, sans-serif;
margin: 0;
line-height: 100%;
}
body.hq div.cbox h2 a {
color: #444;
}
body.hq div.cbox-left h2 a {
color: #EFEFEF;
}
.mainbox {
/* background-color: #222; */
color: #C2C2C2;
padding-bottom: 60px;
width: 100%;
}
.mainbox .in {
width: 100%;
margin: 40px 20px;
}
/*
div.mainbox h2 {
font-size: 28px;
}
*/
div.mainbox h4 {
font-size: 22px;
margin: 2px 0px 5px 0px;
}
.col {
margin: 0px 16px 0 16px;
height: auto;
width: auto;
float: left;
position: relative;
border: 0px dotted red;
}
.snug {
margin:0;
}
div.main-article {
max-width: 580px;
_width: 580px;
}
._1 {
width: 48px;
}
._2 {
width: 128px;
}
._3 {
width: 208px;
}
._4 {
width: 288px;
}
._5 {
width: 368px;
}
._6 {
width: 448px;
}
._7 {
width: 528px;
}
._8 {
width: 608px;
}
._9 {
width: 688px;
}
._10 {
width: 768px;
}
._11 {
width: 848px;
}
._12 {
width: 928px;
}
#gallery_bg {
height: auto; width: 1000px; background-image: url(/images/gallery/frame.png); background-repeat: no-repeat; position: relative; background-position: left center; top: 0; margin: 0 auto 0 auto; border: 0px solid #0F0; z-index: 20;
}
.col2 {
padding: 20px;
height: auto;
min-height: 250px;
float: left;
position: left;
color: #444;
background-color: #EEE;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 1px 1px 5px #2a0303;
-webkit-box-shadow: 2px 2px 5px #2a0303;
-moz-box-shadow: 2px 2px 5px #2a0303;
margin-bottom: 40px;
behavior: url(/js/PIE.htc);
}
div.mainbox ul li {
line-height: 22px;
}
div.create {
background-color: #471f1f;
/*
background-image: url('../images/shapes/create.png');
background-repeat: no-repeat;
*/
}
div.connect {
background-color: #325b17;
/*
background-image: url('../images/shapes/connect.png');
background-repeat: no-repeat;
*/
}
div.control {
background-color: #1e587b;
/*
background-image: url('../images/shapes/control.png');
background-repeat: no-repeat;
*/
}
div.even {
behavior: url(/js/PIE.htc);
background-color: #343434;
color: #FFF;
}
div.odd {
behavior: url(/js/PIE.htc);
background-color: #e4e4e4;
color: #333;
}
div.even a:hover {
color: #eee;
}
div.even h2,p {
color: inherit;
}
div.odd h2,p,h3 {
color: inherit;
}
div.odd ul {
width: 600px;
position: relative;
z-index: 5;
list-style: disc;
font-size:14px;
line-height: 20px;
font-weight: normal;
margin: 8px 0 14px 0;
}
div.even ul {
width: 600px;
position: relative;
z-index: 5;
list-style: disc;
color: #FFF;
font-size:14px;
line-height: 20px;
font-weight: normal;
margin: 0px 0px 18px 75px;
}
div.even ul ul {
font-size: 14px;
line-heiht: 18px;
list-style: circle;
margin: 2px 0px 2px 25px;
}
div.odd ul ul {
font-size: 14px;
line-height: 18px;
list-style: circle;
margin: 0;
margin: 2px 0px 2px 25px;
}
div.even ul li, div.odd ul li {
padding-left: 30px;
}
div.even ul.listItems li {
color: #FFF;
}
div.odd ul.listItems li {
color: #333;
}
h3.super {
font-size: 200px;
font-weight: 200;
color: #FFF;
opacity: .06;
position: absolute;
bottom: -65px;
z-index: 1;
display: block;
/* Not sure if this works with img */
}
div.cbox h2 {
font-size: 32px;
font-weight: 100;
margin: 10px 0;
position: relative;
z-index: 2;
}
div.cbox h3 {
font-size: 18px;
margin: 18px 0;
width: 450px;
}
div.cbox h4 {
margin: 0px 0px 10px 50px;
font-size: 16px;
}
div.cbox p {
max-width: 480px;
}
div.img {
width: auto;
height: auto;
min-height: 200px;
/* border: 1px solid #000; */
position: absolute;
bottom: 0; right: 0;
z-index: 3;
border: 0;
}
div.img img {
border: 0;
}
a.anchorLink {
position: relative;
display: block;
float: left;
}
a.anchorLinkFrom {
font-family: "Droid Sans", Helvetica, Arial, sans-serif;
letter-spacing: -10%;
display:inline-block;
height:24px;
line-height:24px;
padding:0 12px;
background:#444;
color:#AAA;
font-weight:normal;
font-size:16px;
text-shadow: 0 -1px 0 #222;
position:relative;
border:0px solid #DFDFDF;
border-bottom-color: #888;
border-right-color: #AAA;
margin:0 6px 10px 0;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
behavior: url(/js/PIE.htc);
}
a.anchorLinkFrom:hover {
color: #FFF;
background-color: #4ba00a;
}
.links {
}
div#contactContent {
width: 100%;
}
div#contactContent p {
color: #BBB;
}
table.contactForm {
margin-top: 15px;
}
table.contactForm th {
font-weight: normal;
padding: 5px;
text-align: left;
padding-left: 2px;
}
table.contactForm td {
padding: 5px;
}
h2.num {
font-size: 32px;
line-height: 140%;
margin-bottom:30px;
color: #BBB
}
h4.num {
margin-top: 15px;
font-size: 20px;
color: #888;
}
table.contactForm input, table.contactForm textarea {
padding: 2px;
font-family: Helvetica, Helvetica-Neue, Arial, sans-serif;
width: 286px;
}
input[type=submit], input[type=reset] {
border: 1px solid #336600; background-color: #99CC33; color: #336600; text-shadow: #CCFF66 1px 1px 1px; margin: 10px 0 0;
font-size: 16px;
}
table.contactForm input[type=reset] {
border-color:#666; background-color:#CCC;color:#666;text-shadow:none;
width: 60px; float: left;
}
table.contactForm textarea {
width: 360px;
height: 200px;
}
div#footer {
width: 1000px;
height: 440px;
position: relative;
text-align: left;
padding: 0;
color: #999;
margin-top: -45px;
margin-bottom: 0px;
z-index: 0;
background-color: #340000;
background-image: url(/images/tagline-bg.jpg);
background-position: center top;
background-repeat: no-repeat;
}
div#footer div.inner {
float: left;
position: relative;
width: 960px;
margin: 20px;
height: 420px;
}
.legal {
font-size: 0.6rem;
position: absolute; bottom: 0;
}
.fb {
padding-bottom: 10px; padding-left:15px;
}
#social-links {position: absolute; top: 230px; left: 662px;}
#social-links a {margin-left: 20px;}
#redder-twitter-link {position: absolute; top: 170px; right: 20px;}
div#clients_container div.inner {
position: relative;
float: left;
width: 920px;
margin: 20px 40px;
}
/* Case Studies */
h3.sub {
font-size: 24px;
text-align: left;
padding-bottom: 0;
color: #BBB;
margin: 20px 0px 5px 0px;
}
p.sub {
font-size: 16px;
line-height: 22px;
text-align: left;
color: #EEE;
margin: 15px 0;
}
hr {
border: 0;
height: 1px;
background-color: #EEE;
width: 90%;
margin: 0;
margin-left: 20px;
}
ul.sub {
color: #EEE;
text-align: left;
font-size: 16px;
margin: 15px 30px 15px 60px;
list-style: none;
line-height: 24px;
}
div#clients_container div.casestudy {
width: 920px;
margin: 0px auto 0px auto;
border-top: 1px dashed #666;
position: relative;
}
#project_desc {
margin: 20px 50px;
}
#project_summary {
behavior: url(/js/PIE.htc);
float: right;
background-color: #222;
border: 1px double #CCC;
margin: 6px 0 20px 0;
border-radius: 6px;
}
#project_summary div {
margin: 12px 20px;
}
#cs_testimonial {
behavior: url(/js/PIE.htc);
float: right;
margin: 20px 0 20px 20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 0 10px #FFFFFF;
-moz-box-shadow: 0 0 10px #FFFFFF;
box-shadow: 0 0 10px #FFFFFF;
}
#cs_testimonial div {
margin: 12px 20px;
}
div.casestudy .desc {
}
div.casestudy img.img {
width: 250px;
height: 90px;
position: relative;
margin: 22px;
}
.csodd {
background-color: #212121;
}
.cseven {
background-color: #282828;
}
div.casestudy .left {
text-align: left;
float: left;
}
div.casestudy .right {
text-align: left;
float: right;
}
div.cscontain {
width: 60%;
margin: 10px 20px
}
div.casestudy p.date {
font-style: italic;
color: #666;
font-size: 12px;
position: relative;
margin: 2px 0px 5px 20px;
}
div.casestudy p {
margin: 2px 0px 5px 20px;
padding: 0;
background-color: none;
max-width: 98%;
color: #AAA;
clear:both;
}
div.casestudy h2 {
margin: 5px 0px 5px 20px;
color: #EEE;
font-size: 26px;
position: relative;
}
div#logoimg {
position: relative;
margin: 32px;
}
div.clientBox {
margin: 25px 20px;
display: inline-block;
}
h2.mainTitle {
margin: 15px 35px;
}
p.mainP {
margin: 10px 35px;
color: #EEE;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div.error {
margin: 40px;
margin-bottom: 0;
background-color: #C00;
color: #FFF;
font-weight: 100;
padding: 20px;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
width: 880px;
}
div.error p {
color: #FFFFFF;
}
div.error div.alert {
color: white;
font-size: 72px;
font-weight: 800;
height: 40px;
margin-right: 20px;
font-family: Helvetica, Arial, sans-serif;
float: left;
}
/* ------ buttons
-----------------------------------------------*/
a.btn {
font-family: "Droid Sans", Helvetica, Arial, sans-serif;
letter-spacing: -10%;
float:left;
display:inline-block;
height:44px;
line-height:44px;
padding:0 20px 0 60px;
background:#222;
color:#eee;
font-weight:normal;
font-size:18px;
text-shadow: 0 -1px 0 #222;
position:relative;
border:1px solid #888;
border-bottom-color: #000;
border-right-color: #444;
margin:0 10px 10px 0;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
behavior: url(/js/PIE.htc);
}
div.ccolumn2 a.btn {
float: left;
width: 85px;
font-size: 12px;
padding: 0px 5px 0px 50px;
}
div a.btn:hover {
border-color:#cacaca;
color: #222;
background-color: #4ba00a;
text-shadow: 0 1px 0 #8fe44e;
}
a.btn span {
display:block;
position:absolute;
bottom:0px;
left:2px;
width:48px;
height:48px;
background-repeat:no-repeat;
background-position:center;
}
div.ccolumn2 a.btn span {
width: 28px;
height: 28px;
left: 8px;
bottom: 8px;
}
a.btn.full {
width: 52%;
}
a.btn.activity span {
background-image:url(../images/icons/activity.png);
}
a.btn.activitya span {
background-image:url(../images/icons/activityadd.png);
}
a.btn.activityd span {
background-image:url(../images/icons/activitydelete.png);
}
a.btn.activityw span {
background-image:url(../images/icons/activitywarn.png);
}
a.btn.add span {
background-image:url(../images/icons/add.png);
}
a.btn.address span {
background-image:url(../images/icons/activity.png);
}
a.btn.addressd span {
background-image:url(../images/icons/addressdelete.png);
}
a.btn.addressa span {
background-image:url(../images/icons/adressadd.png);
}
a.btn.addresss span {
background-image:url(../images/icons/addresssearch.png);
}
a.btn.book span {
background-image:url(../images/icons/book.png);
}
a.btn.booka span {
background-image:url(../images/icons/bookadd.png);
}
a.btn.bookd span {
background-image:url(../images/icons/bookdelete.png);
}
a.btn.books span {
background-image:url(../images/icons/booksearch.png);
}
a.btn.activity span {
background-image:url(../images/icons/activity.png);
}
a.btn.bulb span {
background-image:url(../images/icons/bulb.png);
}
a.btn.fav span {
background-image:url(../images/icons/fav.png);
}
a.btn.chart span {
background-image:url(../images/icons/chart.png);
}
a.btn.activity span {
background-image:url(../images/icons/activity.png);
}
a.btn.comment span {
background-image:url(../images/icons/comment.png);
}
a.btn.commenta span {
background-image:url(../images/icons/commentadd.png);
}
a.btn.commentua span {
background-image:url(../images/icons/commentuseradd.png);
}
a.btn.commentud span {
background-image:url(../images/icons/commentuserdelete.png);
}
a.btn.commentus span {
background-image:url(../images/icons/commentusersearch.png);
}
a.btn.delete span {
background-image:url(../images/icons/delete.png);
}
a.btn.edit span {
background-image:url(../images/icons/edit.png);
}
a.btn.email span {
background-image:url(../images/icons/email.png);
}
a.btn.emaila span {
background-image:url(../images/icons/emailadd.png);
}
a.btn.emaild span {
background-image:url(../images/icons/emaildelete.png);
}
a.btn.folder span {
background-image:url(../images/icons/folder.png);
}
a.btn.foldera span {
background-image:url(../images/icons/folderadd.png);
}
a.btn.folderd span {
background-image:url(../images/icons/folderdelete.png);
}
a.btn.info span {
background-image:url(../images/icons/info.png);
}
a.btn.lock span {
background-image:url(../images/icons/lock.png);
}
a.btn.unlock span {
background-image:url(../images/icons/lockopen.png);
}
a.btn.page span {
background-image:url(../images/icons/page.png);
}
a.btn.pagea span {
background-image:url(../images/icons/pageadd.png);
}
a.btn.paged span {
background-image:url(../images/icons/pagedelete.png);
}
a.btn.rss span {
background-image:url(../images/icons/rss.png);
}
a.btn.search span {
background-image:url(../images/icons/search.png);
}
a.btn.time span {
background-image:url(../images/icons/time.png);
}
a.btn.user span {
background-image:url(../images/icons/user.png);
}
a.btn.usera span {
background-image:url(../images/icons/useradd.png);
}
a.btn.userd span {
background-image:url(../images/icons/userdelete.png);
}
a.btn.users span {
background-image:url(../images/icons/usersearch.png);
}
a.btn.useri span {
background-image:url(../images/icons/userinfo.png);
}
a.btn.warn span {
background-image:url(../images/icons/warning.png);
}
a.btn.control span {
background-image:url(../images/icons/switch.png);
}
a.btn.connect span {
background-image:url(../images/icons/speechbubble.png);
}
a.btn.create span {
background-image:url(../images/icons/paper-boat.png);
}
a.btn.builder span {
background-image:url(../images/icons/builder.png);
}
a.btn.branches span {
background-image:url(../images/icons/branches.png);
}
a.btn.binder span {
background-image:url(../images/icons/binder.png);
}
.ccolumn2 a.btn.builder span {
background-image: url("../images/hqbuildermin.png");
}
.ccolumn2 a.btn.branches span {
background-image: url("../images/hqbranchesmin.png");
}
.ccolumn2 a.btn.binder span {
background-image: url("../images/hqbindermin.png");
}
.ccolumn2 a.btn.basket span {
background-image: url("../images/hqbasketmin.png");
}
.ccolumn2 a.btn.beehive span {
background-image: url("../images/hqbeehivemin.png");
}
a.btn.hq span {
background-image:url(../images/icons/hq.png);
}
a.btn.linkpage span {
background-image:url(../images/icons/magnifying-glass.png);
}
a.btn.backtotop span {
background-image:url(../images/backtotop.png);
}
a.btn.webdesignanddev span {
background-image: url(../images/icons/webdesignanddev.png);
}
a.btn.mediaandgraphics span {
background-image: url(../images/icons/pantone_book.png);
}
a.btn.iconcreation span {
background-image: url(../images/icons/iconcreation.png);
}
a.btn.audiovideo span {
background-image: url(../images/icons/audiovideo.png);
}
a.btn.cms span {
background-image: url(../images/icons/cms.png);
}
a.btn.taskmanagement span {
background-image: url(../images/icons/taskmanagement.png);
}
a.btn.dynamicmodules span {
background-image: url(../images/icons/dynamic.png);
}
a.btn.webconsultancy span {
background-image: url(../images/icons/webconsultancy.png);
}
a.btn.webandemailhosting span {
background-image: url(../images/icons/webandemailhosting.png);
}
a.btn.webmarketing span {
background-image: url(../images/icons/seo.png);
}
a.btn.socialmedia span {
background-image: url(../images/icons/social.png);
}
a.btn.franchisesoftware span {
background-image: url(../images/icons/franchisesoftware.png);
}
a.btn.businesssystems span {
background-image: url(../images/icons/businesssystems.png);
}
a.btn.ecommerce span {
background-image: url(../images/icons/ecommerce.png);
}
a.btn.bespoke span {
background-image: url(../images/icons/service.png);
}
a.btn.hqbuilder span {
background-image: url(../images/icons/hqbuilder.png);
}
a.btn.hqbranches span {
background-image: url(../images/icons/hqbranches.png);
}
a.btn.hqbinder span {
background-image: url(../images/icons/hqbinder.png);
}
a.btn.hqbeehive span {
background-image: url(../images/icons/hqbeehive.png);
}
a.btn.hqbasket span {
background-image: url(../images/icons/hqbasket.png);
}
a.btn.contactphone span {
background-image: url(../images/icons/phoneicon4btn.png);
}
a.btn.backtotop {
font-size: 12px;
padding-left: 25px;
padding-right: 10px;
}
a.btn.backtotop span {
width: 24px;
}
a.btn.callaction {
bottom: 18px;
position:absolute;
width: 140px;
}
.actioncall {
background-color: transparent;
border: 1px solid #9eb30e;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
position: relative;
behavior: url(/js/PIE.htc);
}
.feature-panel { behavior: url(/js/PIE.htc); }
div.col2.actioncall {background-image: url(/images/tagline-bg-hq.jpg); background-position: right; min-height: 100px; height: 200px; margin-top:40px;}
.actioncall h2 {color: #ddd; font-size: 22px;}
.actioncall h3 {margin-top: 20px; color: #ddd; border-color: #ddd;}
.actioncall p {color: #ddd; margin-bottom: 0;}
.actioncall p {color: #ddd; margin-top: 10px;}
.actioncall .telephone-number {font-size: 30px; margin-bottom: 0; padding-bottom: 0;}
.actioncall a.btn.callaction {left: 25px; margin-top: 0; padding-top: 0;}
#footer ul#site-map-links {margin: 0; margin-top: 10px; padding: 0; list-style: none; width: 700px;}
#footer ul#site-map-links li {list-style: none; background: none; line-height: 11px; margin: 1px 0 0 0; padding: 0; display: inline; float: left; width: 110px; margin-right: 10px;}
#footer ul#site-map-links li a {font-weight: bold; background: none; padding: 0; margin: 0;line-height: 11px; color: #aaa; font-family: "Droid Sans", Helvetica, Arial; font-size: 10px;}
#footer ul#site-map-links li ul {margin: 0; margin-top: 5px; padding: 0; margin-bottom: 10px;}
#footer ul#site-map-links li ul li { margin: 0; padding: 0;float: none; list-style: none; display: block; height: auto; line-height: 12px;}
#footer ul#site-map-links li ul li a {font-weight: normal; margin: 0; padding: 0; height: auto; line-height: 12px;}
#footer ul#site-map-links-singles {margin: 0; margin-top: 10px; padding: 0; list-style: none; width: 700px;}
#footer ul#site-map-links-singles li {list-style: none; background: none; line-height: 11px; margin: 1px 0 0 0; padding: 0; display: inline; float: left; width: 110px; margin-right: 10px;}
#footer ul#site-map-links-singles li a {font-weight: bold; background: none; padding: 0; margin: 0;line-height: 11px; color: #aaa; font-family: "Droid Sans", Helvetica, Arial; font-size: 10px;}
#footer ul#site-map-links-singles li ul {margin: 0; padding: 0; margin-bottom: 10px;}
#footer ul#site-map-links-singles li ul li {float: none; list-style: none; display: block;}
#footer ul#site-map-links-singles li ul li a {font-weight: normal;}
.portfolio-link {position: absolute; bottom: 10px; left: 20px;}
.portfolio {
float: right;
width: 180px;
height: 120px;
}
.portfolio img {
float: left;
margin: -40px 0 -40px -50px;
}
.portfolio div {
text-align: right;
width: 180px;
height: 45px;
padding: 10px;
font-size: 18px;
margin-top: 30px;
border: 1px solid red;
background-image: url(/images/tagline-bg.jpg);
background-repeat: no-repeat;
background-position: right top;
border-radius: 6px;
}
.portfolio a {
color: #FFF;
}
div.cbox-left div.in .portfolio {
margin-right: 60px;
}
#menu-hq-link {float: right;} /* @todo - move to menu section */
li#menu-hq-link ul { left: auto; right: 0; width: 320px }
ul.no-sub-indent li ul {margin-left: 0; padding-left: 0; margin-top: 8px; margin-bottom: 16px;}
/* MH - IE7 browser fixes */
/* make header show */
html.ie7 #shine {display: none;}
html.ie7 #headercontainer {z-index: 100;}
html.ie7 #logo {left: 0;}
html.ie7 #infoContent {z-index: 200;}
/* menu positioning */
html.ie7 ul#links { margin-left: 140px; }
html.ie7 ul#links li {display: inline;}
/* image link positioning */
html.ie7 ul#links li.image-link#menu-home-link {margin-bottom: -7px;}
html.ie7 ul#links li.image-link#menu-hq-link {margin-top: -36px; margin-right: -30px;}
/* menu mouseover fix */
html.ie7 ul#links li ul li a, html.ie8 ul#links li ul li a {display: block; background-color: #000; filter: alpha(opacity=80);}
html.ie7 ul#links li ul li, html.ie8 ul#links li ul li {border-bottom: none;}
html.ie7 ul#links li.create a:hover, html.ie8 ul#links li.create a:hover, html.ie7 ul#links li.create ul li a, html.ie8 ul#links li.create ul li a { background-color: rgb(126, 0, 0); }
html.ie7 ul#links li.connect a:hover, html.ie8 ul#links li.connect a:hover, html.ie7 ul#links li.connect ul li a, html.ie8 ul#links li.connect ul li a { background-color: rgb(102, 190, 10); }
html.ie7 ul#links li.control a:hover, html.ie8 ul#links li.control a:hover, html.ie7 ul#links li.control ul li a, html.ie8 ul#links li.control ul li a { background-color: rgb(0, 160, 255); }
html.ie7 ul#links li a:hover, html.ie8 ul#links li a:hover, html.ie7 ul#links li li a:hover, html.ie8 ul#links li li a:hover {display: block; background-color: #000; }
/* dropdown overlap fix */
html.ie7 ul#links li.create ul li {z-index: 1000}
html.ie7 ul#links li.connect ul li {z-index: 1001}
html.ie7 ul#links li.control ul li {z-index: 1002}
html.ie7 ul#links li.clients ul li {z-index: 1003}
html.ie7 ul#links li.case-studies ul li {z-index: 1004}
/* homepage icons */
html.ie7 #home-speech-logo {margin-top: 0; margin-bottom: 0px; top: 70px;}
html.ie7 #home-switch-logo {margin-top: 0px; margin-bottom: 0px; top: 60px;}
/* back to top button alignment */
html.ie7 #backtotop { margin-bottom: -4px; }
/* bottom of footer */
html.ie7 .company-details {bottom: 1px; left: -940px; margin-top: 20px; font-size: 10px;}
html.ie7 #cs_testimonial, html.ie8 #cs_testimonial {background-color: #333; width: 266px;}
/* content specifc */
html.ie7 #ie7hackrightpanel {position: absolute; top: 220px; right: 20px;}
html.ie7 .clientBox {display: inline;}
.hidden {
display: none;
}