﻿/* David's Additions */

.para_wrap {text-align: justify;}
.title { display: block; text-indent: -4000px; }
.c-image { display: block; margin: auto; margin-top:2em; }

.shorty { background-position: 0 -175px;  }
.shorty .main { height: 185px; }
.shorty .text { float:none; width: auto; padding-top: 30px; }
.shorty .main h2 { font-size: 20px; line-height: 140%; }


/* Main Doc Styles*/
header > div, .main, .actual, footer > div { margin: auto; width: 980px; }
body { background: url(/images/background.jpg) repeat-x; }
footer { background-color: #eee; margin-top: 40px; }
.wrapper {}
.balloons { float :right; }

/* fonts */
a { color: #267a9a; text-decoration: underline; }
a:hover { color: #f60; text-decoration: underline; }

h1,h2,h3,h4,h5,h6 {}

hr { border:0; border-top: 1px solid #eee; margin: 35px 0; }
b, strong { font-weight: bold; }
em, i { font-style: italic; }

/* Header Styles */
header { height: 54px; background-color: rgba(0, 0, 0, 0.3); padding-top: 13px;}
header #logo { float: left; }
header nav { font-size: 14px; font-family: Arial; font-weight: bold; float: right; padding-top: 13px; float: right;}
header nav li { display: inline-block; float:left; }
header nav li a { color: white; padding: 10px 15px; text-transform: uppercase; text-decoration: none; text-shadow: 1px -1px #000; z-index:999; }
header nav li a:hover { text-decoration: none; }
header .selected a { background-color: #999; background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; }
.navfix {width: 980px;}


/* Main Styles */
.main { height: 410px; margin-bottom: 30px; color: white; }
.main .text { float: left; width: 50%; padding-top: 60px;}
.main-image { float: left; position: absolute; top: 7px; z-index: -1; }
.main h1 {font-weight: normal; font-size : 60px; padding-bottom: 30px; font-family: "Helvetica Neue Condensed Black", "impact", "HelveticaNeue-CondensedBold",  "Helvetica Neue", "Helvetica",  "Arial", "sans-serif";}
.main h2 { font-size: 20px; font-family: Georgia; font-weight: normal; letter-spacing: 0px; line-height: 140%; }

.standout {color: #eee; }
.main .landingtext h1 {font-weight: normal; font-size: 58px; Line-height:88%; padding-bottom: 30px; font-family:"Helvetica Neue Condensed Black", "impact", "HelveticaNeue-CondensedBold", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";}
.main .landingtext h2 {font-weight: normal; font-size: 27px; line-height: 110%; letter-spacing: 0px; font-family:Georgia; }
.main .landingtext {float: right; width: 45%; padding-top: 60px;}
/*-----------------*/

/* Actual Styles */
.actual { clear: both; font-family: georgia; font-size: 16px; color: #666; line-height: 140%; text-align:justify;}
.actual p {margin-bottom: 10px;}
.actual > ul > li { display: inline-block; width: 33%; vertical-align: top;  text-align:left; }
.actual > .row { padding-top: 35px;}
.landing_text {font-size: 18px; line-height: 140%;}

/* row Styles */
.row {zoom: 1;margin-left: -20px;}
.row:before, .row:after {display: table; content: ""; zoom: 1; *display: inline;}
.row:after {clear: both;}
[class*="col-"] {display:  inline; float: left; margin-left: 20px;}

/* Column Styles */

/* LANDING PAGE LAYOUIT */
/*for landing page (no nav column)*/
.col_950 {width: 950px}
.col-950 h3 span {padding-left: 25px; }

/* landing page columns (no Nav column is used v*/
.col-49 {width: 450px;}
.col-49 h3 {font-size: 40px; color: #267a9a; margin-bottom: 23px; letter-spacing: 1px; font-family:"Helvetica Neue Condensed Black", "impact", "HelveticaNeue-CondensedBold", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";}
.col-49 h4 {color: #267a9a; text-transform: uppercase; margin-top: 2em; }
.col-49 h4 + ul { margin: 5px 0; }
.col-49 h5:first-child {margin-top: 0; }
.col-49 li { line-height: 1.5em; margin-left: 30px; list-style: disc;}


/* NORMAL PAGE LAYOUIT */
/*This is the left hand column for navigation */
.col-250 { width: 250px; color: #666; font-size: 24px; font-family: impact; }
.col-250 nav { text-transform: uppercase; list-style: none; }
.col-250 nav li { line-height: 50px; }
.col-250 nav li.selected a { color: #666; }
.col-250 a { text-decoration: none; }
.col-250 h3 { text-transform: uppercase; font-size: 24px; }
.col-250 h3 a { color: #666; }
.col-250 h3 span { padding-left: 25px; }

/* Left Hand Navigation Styles */
/*  Images based due to font problems */
#nav-story a span { background-image: url(/images/titles/x/our-story.png); }
#nav-team a span { background-image: url(/images/titles/x/our-team.png); }
#nav-philo a span { background-image: url(/images/titles/x/our-philosophy.png); }
#nav-overview a span { background-image: url(/images/titles/x/overview.png); }
#nav-snapshot a span { background-image: url(/images/titles/x/snapshot.png); }
#nav-endpoint a span { background-image: url(/images/titles/x/endpoint.png); }
#nav-hello a span { background-image: url(/images/titles/x/say-hello.png); }
#nav-case-study a span { background-image: url(/images/titles/x/software-compliance.png); height: 42px; }


/* This is the Column that holds the primary content for each page*/
.col-700 { width: 700px; }
.col-700 h4 + ul { margin: 5px 0; }
.col-700 h5:first-child { margin-top: 0; }
.col-700 li { line-height: 1.5em; margin-left: 30px; list-style: disc;}
.col-700 h4 {font-size: 18px; color: #267a9a; font-weight:Bold; text-transform: uppercase; margin-top: 0em; font-family:"Arial";}


/*This is the content split into two columns layout*/
.col-340 { width: 340px; }
.col-340 h3 {font-size: 40px; font-family: "Helvetica Neue Condensed Black","Helvetica","impact","Arial","sans-serif"; color: #267A9A; margin-bottom: 5px; letter-spacing: 1px; }
.col-340 h4 {font-size: 18px; color: #267a9a; font-weight:Bold; text-transform: uppercase; margin-top: 0em; font-family:"Arial";}
.col-340 h5 {font-size: 18px;  color: #267a9a; font-weight:bold; text-transform: uppercase; margin-top: 2em; font-family: "Arial";}



/* footer Styles */
footer > div { padding-top: 10px; }
footer > div > ul > li { display: inline-block; width: 24%; vertical-align: top; padding-bottom: 20px; }
footer h4 { color: #666; font-size: 14px; font-family: arial; font-weight: bold; text-transform: uppercase; padding: 0 0 10px 0; }
footer ul ul { line-height: 140%; font-family: georgia; font-size: 16px; padding-left: 10px; }
footer .l { float: left; }
footer p.l { margin-top: 24px; }
footer .r { float: right; color: #666; font-size: 12px; font-family: arial; }
footer .in-touch { font-family: "Helvetica Neue Condensed Black", impact, 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 1px; font-size: 19px; color: #666; }
footer { background-color: #EEE; margin-top: 40px; padding-top: 20px; background-image: url(/images/titles/x/footsie.png);}



/* Team Styles */
.team { }
.team li { list-style: none; }
.team li > img { float: left; }
.team li div { padding-left: 220px; margin-top: 20px; }
.team h4 {font-size: 18px; color: #267a9a; font-weight:Bold; text-transform: uppercase; margin-top: 8px; font-family:"Arial";}

/* Blog related - currently not installed and not used*/
.blog .col-250 ul { }
.blog .col-250 ul li { margin-bottom: 10px; }
.blog .col-250 h3 { color: #666; margin-top: 40px; }
.blog .col-250 h3:first-child { margin-top: auto; }
.blog .col-250 a { text-decoration: underline; font-size: 18px; font-family: Georgia; }
.blog .col-250 p { font-size: 18px; font-family: Georgia; }
.blog input { width: 200px; padding: 5px; font-size: 18px; font-family: Georgia; color: #666; }
.blog button { background-color: #267a9a; color: White; border: 0; font-size: 18px; font-family: Georgia; }

/* Case Study Styles */
.case-study h3 { margin: 1em 0 0; }
nav.case-study-nav li { line-height: inherit; }
nav li a span { display: block; width: 180px; height: 19px; text-indent: -4000px; margin: 5px 0; background-repeat: no-repeat; }
nav li#nav-case-study.selected a span { background-position: 0 -49px; }
nav li#nav-case-study a:hover span { background-position: 0 -97px; }
nav li.selected a span { background-position: 0 -18px; }
nav li a:hover span { background-position: 0 -36px; }

/* Philosophy Page */
.philosophy h3 { text-indent: -4000px; width: 100%; height: 40px; background-repeat: no-repeat; }
.philosophy h3 { font-size: 30px; margin-bottom: .3em; }


/*  Philosphy image links
.philosophy #language { background-image: url(/images/titles/x/language.png); }
.philosophy #big-picture { background-image: url(/images/titles/x/big-picture.png); }
.philosophy #data-driven { background-image: url(/images/titles/x/data-driven.png); }
.philosophy #fast { background-image: url(/images/titles/x/fast.png); }
.philosophy #different { background-image: url(/images/titles/x/different.png); }
*/


/* Image links (based on Tag ID) rather than Font based.  Used to correct font errors 
#taming { background: url(/images/titles/taming.png) 0 0 no-repeat; width: 424px; height: 145px; }
#snapshot-blue { background: url(/images/titles/snapshot-blue.png) 0 0 no-repeat; width: 156px; height: 36px; }
#endpoint-blue { background: url(/images/titles/endpoint-blue.png) 0 0 no-repeat; width: 146px; height: 36px; }
#about { background: url(/images/titles/cstory.png) 0 0 no-repeat; width: 265px; height: 53px; }
#team { background: url(/images/titles/cteam.png) 0 0 no-repeat; width: 260px; height: 53px; }
#philosophy { background: url(/images/titles/cphilosophy.png) 0 0 no-repeat; width: 412px; height: 53px; }
#services { background: url(/images/titles/cservices.png) 0 0 no-repeat; width: 339px; height: 44px; }
#snapshot { background: url(/images/titles/csnapshot.png) 0 0 no-repeat; width: 339px; height: 44px; }
#endpoint { background: url(/images/titles/cendpoint.png) 0 0 no-repeat; width: 339px; height: 44px; }
#case-study { background: url(/images/titles/ccase-study.png) 0 0 no-repeat; width: 576px; height: 104px; }
#contact { background: url(/images/titles/ccontact.png) 0 0 no-repeat; width: 235px; height: 44px; }
*/


/* SAVE - http://nicolasgallagher.com/pure-css-gui-icons/demo/
------------------------------------------------------------------------------------------------------------------------------- */

.save {position:relative; z-index:1; overflow:hidden; list-style:none; padding:0; margin:0 0 0.75em;}

.save a:link, 
.save a:visited {display:block; border:0; padding-left:28px;}

.save a:hover, 
.save a:focus, 
.save a:active {background:transparent;}

.save:before, 
.save:after,
.save a:before, 
.save a:after {content:""; position:absolute;top:50%; left:0;}


.save:before,
.save a:before {
    left:6px;
    border-width:10px 0 10px 8px;
    border-style:solid;
    border-color:transparent #666;
    margin-top:-9px;
    background:transparent;
    /* css3 */
    -webkit-transform:rotate(22.5deg);
    -moz-transform:rotate(23deg);
    -o-transform:rotate(22.5deg);
    transform:rotate(22.5deg);
}

.save a:before {
    left:6px;
    /* css3 */
    -webkit-transform:rotate(157.5deg);
    -moz-transform:rotate(160deg);
    -o-transform:rotate(157.5deg);
    transform:rotate(157.5deg);
}

.save a:after {
    border-width:8px 10px 0;
    border-style:solid;
    border-color:#666 transparent;
    margin-top:-3px;
    background:transparent;
}

.save:hover:before,
.save:focus:before,
.save:active:before,
.save a:hover:before,
.save a:focus:before,
.save a:active:before {border-left-color:#333; background:transparent;}

.save a:hover:after,
.save a:focus:after,
.save a:active:after {border-top-color:#333; background:transparent;}

