/**
 * Gravitywell CSS
 *
 * Author: Gravitywell Ltd (info@gravitywell.co.uk)
 * Media: Screen, Projector
 *
 **/


/* CSS RESET (Eric Meyers)
 * ----------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;
}
 /* remember to define focus styles! */
:focus {
   outline: 0;
}
body {
   line-height: 1;
   color: black;
   background: white;
   overflow-y: scroll;
}
ol, ul {
   list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: separate;
   border-spacing: 0;
}
caption, th, td {
   text-align: left;
   font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: "";
}
blockquote, q {
   quotes: "" "";
}


/**
* Z-indexes:
*       Header: 400
*         Menu: 500
*       Banner: 300
**/


/* MAIN LAYOUT
 * ----------- */

html {}
body { overflow: -moz-scrollbars-vertical; }
body, html {
   background-color: #ddd;
   text-align: center;
   font-family: Verdana, Arial, "Helvetica Neue", sans-serif;
   font-size: 11px;
   line-height: 15px;
   color: #333;
   background: #333 url("../images/layout/bg.gif") top left repeat;
}

#wrapper {
   margin: 0 auto;
   text-align: left;
   background-color: #fff;
   width: 960px;
   padding: 0 15px;
   background: transparent url("../images/layout/wrapper-bg.png") top left repeat-y;
}

#gwtip {
   display:none;
   background: transparent url("../images/tooltip/black_arrow.png") top left no-repeat;
   font-size:11px;
   height:80px;
   width:170px;
   padding:20px;
   color:#fff;
   z-index: 990;
   font-family: Verdana, Arial, "Helvetica Neue", sans-serif;
}


/** Header **/
#header {
   height: 170px;
   position: relative;
   z-index: 400;
}


#rssFeed {
   display: block;
   position: absolute;
   top: 10px;
   right: 35px;
   font-weight: bold;
   line-height: 16px;
   height: 16px;
   background: url("../images/icons/feed.png") top right no-repeat;
   padding: 0 22px 0 0;
}
#twitterLink {
   display: block;
   position: absolute;
   top: 10px;
   right: 15px;
   font-weight: bold;
   line-height: 16px;
   height: 16px;
   background: url("../images/icons/twitter.png") top right no-repeat;
   padding: 0 22px 0 0;
}
#rssFeed:hover {
   background-image: url("../images/icons/feed_go.png")
}


.content {
   float: left;
   display: inline;
   margin: 10px 0px 5px 10px;
}

/** Clearing Div **/
.clearit, .clearingdiv, .clear {
   clear: both;
}

.oneColBlock, .twoColBlock, .threeColBlock {
   display: inline;
}

/** Columns **/
#wrapper .oneColBlock {
   width: 273px;
   padding: 0 10px;
   margin: 10px;
   float: left;
}

#wrapper .twoColBlock {
   width: 586px;
   padding: 0 10px;
   margin: 10px;
   float: left;
}

#wrapper .threeColBlock {
   padding: 0 10px;
   margin: 10px;
   width: 900px;
   float: left;
}


/** Banners **/
.banner {
   width: 910px;
   margin: 0 -15px 0 -15px;
   padding: 40px 40px 30px 40px;
   position: relative;
   z-index: 300;
   clear: both;
}

.banner ul li {
   margin: 1px 0 0 0;
   font-size: 12px;
}
.bannerTop, .bannerBottom {
   position: absolute;
   width: 990px;
   height: 10px;
   background-color: transparent;
   background-position: top left;
   background-repeat: no-repeat;
}
.bannerTop {
   top: 0;
   left: 0;
}
.bannerBottom {
   bottom: -10px;
   left: 0;
}
.bannerOrange { background-color: #CE7725; }
.bannerOrange .bannerTop { background-image: url("../images/layout/banner/orange/top.png"); }
.bannerOrange .bannerBottom { background-image: url("../images/layout/banner/orange/bottom.png"); }


.bannerDark { background-color: #1A1A1A;}
.bannerDark .bannerTop { background-image: url("../images/layout/banner/dark/top.png"); }
.bannerDark .bannerBottom { display: none; }

.bannerGrey { background-color: #eee;}
.bannerGrey .bannerTop { background-image: url("../images/layout/banner/grey/top.png"); }
.bannerGrey .bannerBottom { background-image: url("../images/layout/banner/grey/bottom.png"); }


.bannerOrange h1, .bannerDark h1 {
   font-weight: 400;
   font-size: 30px;
   color: #fff;
   width: 350px;
}

.bannerGrey h1 {
   font-weight: 400;
   font-size: 30px;
   color: #333;
   width: 350px;
}


.banner.homepageMiddle {
   height: 110px;
   margin-bottom: 15px;

}

.banner.homepageMiddle ul {
   margin: 0;
}
.banner.homepageMiddle ul li {
   font-size: 11px;
}
.banner.homepageMiddle ul li a {
   font-size: 11px;
   line-height: 12px;
}
.banner.homepageMiddle h2 {
   margin: 0;
}
.banner.homepageMiddle .right ul li a {
   font-weight: bold;
}

.banner .homepageAdvert {
   position: absolute;
   top: -10px;
   left: 355px;
   height: 200px;
   padding: 5px;
   width: 270px;
   background: transparent url("../images/homepageads/background.png") top left no-repeat;
   z-index: 500;
   display: none;
}

.banner .homepageAdvert p {
   position: absolute;
   bottom: 15px;
   left: 5px;
   width: 250px;
   text-align: center;
   padding: 0 10px;
   font-size: 11px;
   line-height: 12px;
   margin: 0;
   color: #333;
}

* html .banner .homepageAdvert {
   background-image: url("../images/homepageads/background.gif");
}

.blogAdverts {
   position: relative;
   width: 270px;
   height: 200px;
   margin: 10px 0 10px 2px;
}
.blogAdverts .homepageAdvert {
   position: absolute;
   top: 0;
   left: 0;
   display: none;
}

.blogAdverts .homepageAdvert p {
   position: absolute;
   bottom: 15px;
   left: 5px;
   width: 250px;
   text-align: center;
   padding: 0 10px;
   font-size: 11px;
   line-height: 12px;
   margin: 0;
   color: #333;
}

.banner .right {
   position: absolute;
   top: 40px;
   left: 670px;
   width: 273px;
   text-align: right;
}

.banner.footer {
   height: 60px;
}

#footerGravitywell span, #footerGravitywellCMS span, #footerMailbloom span, #footerEcommerce span {
   display: none;
}

#footerGravitywell, #footerGravitywellCMS, #footerMailbloom, #footerEcommerce {
   position: absolute;
   width: 80px;
   height: 100px;
   top: 20px;
}

#footerGravitywell:hover, #footerGravitywellCMS:hover, #footerMailbloom:hover, #footerEcommerce:hover {
   background-position: 0 -99px;
}

#footerGravitywell {
   background: transparent url("../images/footerlogos/gravitywell.gif") top left no-repeat;
   left: 40px;
}
#footerGravitywellCMS {
   background: transparent url("../images/footerlogos/gravitywellcms.gif") top left no-repeat;
   left: 130px;
}
#footerMailbloom {
   background: transparent url("../images/footerlogos/mailbloom.gif") top left no-repeat;
   left: 220px;
}
#footerEcommerce {
   background: transparent url("../images/footerlogos/ecommerce.gif") top left no-repeat;
   left: 300px;
}
#footerCopywrite {
   position: absolute;
   width: 600px;
   right: 40px;
   bottom: 20px;
   font-size: 10px;
   text-align: right;
   color: #777;
}

#footerCopywrite a {
   color: #777;
}
#footerCopywrite a:hover {
   color: #fff;
}


/* LOGO
 * ---- */
#logo {
   position: absolute;
   width: 125px;
   height: 145px;
   top: 19px;
   left: 22px;
   background: transparent url("../images/logo.gif") top left no-repeat;
}
#logo span {
   display: block;
   font-size: 12px;
   zoom: 1;
   margin-left: -2000em;
}

/* MENU
 * ---- */

ul#menu {
   position: absolute;
   top: 150px;
   right: 15px;
   text-align: right;
   z-index: 500;
   font-size: 16px;
   margin: 0;
}
ul#menu li {
   float: left;
   list-style: none;
}
ul#menu li.first { border: none; }
ul#menu li.back {
   width: 9px; height: 30px;
   z-index: 8;
   position: absolute;
   background-color: #eee;
}

ul#menu li a {
   display: block;
   float: left;
   padding: 6px 15px 20px 15px;
   color: #CE7725;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: bold;
   position: relative;
   z-index: 10;
}
ul#menu li a:hover {
   /* background-color: #eee; */
   padding: 6px 15px 5px 15px;
}
ul#menu li a.selected {
   color: #fff;
   background-color: #CE7725;
}
ul#menu li a.selected:hover {
   background-color: #CE7725;
   padding: 6px 15px 20px 15px;
}



/* STYLES
 * ------ */

a {
   outline: none;
   text-decoration: none;
   color: #CF6600;
}
a:hover {
   text-decoration: none;
}
p, ul, ol {
   margin: 7px 0 0 0;
}

strong {
   font-weight: 600;
}

p.Miso, a.Miso {
   font-size: 16px;
   font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
   text-transform: uppercase;
   font-weight: 700;
   font-size: 23px;
   color: #D56D04;
}

h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

#homepage h2 { font-size: 23px; }

.content h1, .content h2, .content h3 {
   border-bottom: 1px solid #eee;
   padding: 10px 10px 3px 0px;
   margin: 0 0 10px 0;
}
.content p {
   margin: 10px 0;
}

.content a {
   color: #D56D04;
}
.content a:hover {

}

.content ul {
   margin: 10px 10px 10px 0px;
}
.content ul li {
   padding: 1px 0 1px 20px;
   background: #fff url("../images/icons/bullet_orange.png") 0 1px no-repeat;
}



/** FORMS **/
form input[type=text],
form textarea {
   border: none;
   border-left: 1px solid #eee;
   background-color: #eee;
   padding: 4px 4px;
   margin: 4px 0 8px 0;
   width: 96%;
   font-size: 11px;
   color: #000;
}

form textarea {
   height: 160px;
}

form input[type=text]:focus,
form textarea:focus {
   border-left: 1px solid #CE7725;
}

form label {
   font-weight: bold;
   color: #333;
}


/** Specific form section widths **/
.oneColBlock form input[type=text],
.oneColBlock form textarea {
   width: 264px;
}
.twoColBlock form input[type=text],
.twoColBlock form textarea {
   width: 577px;
}

/** FORM ERRORS **/
ul.errors {
   margin: -2px 0 20px 10px;
   padding: 0;
   color: #703333;
}
ul.errors li {
   background: transparent url("../images/extraicons/error_cross.gif") 0 1px no-repeat;
}


#submit-label { display: none; }


/** PAGE SPECIFIC SECTIONS **/


/* HOMEPAGE */
a.recentlyTitle {
   display: block;
   font-size: 18px;
   border: none;
}
.content .recentlyMeta {
   font-size: 12px;
}

#recentPosts {
   margin: 0; padding: 0;
}
#recentPosts li {
   margin: 5px 0 7px 0;
   padding: 0;
   overflow: hidden;
   background: none;
   clear: both;
}
#recentPosts li span {
   float: left;
   display: block;
   width: 45px;
}
#recentPosts li a {
   display: block;
   margin: 0 0 0 0px;
   float: left;
   width: 225px;
}


/** SERVICES **/
.banner.minimenu ul  {
   margin: 0;
   padding: 0;
   width: 910px;

}
.banner.minimenu ul li {
   text-align: left;
   font-size: 11px;
   width: 550px;
   margin: 0 0 5px 0;
   padding: 0 0 0 25px;
   background: url('../images/extraicons/services-bullet.gif') 0 6px no-repeat;
   font-family: Verdana, Arial, sans-serif;
   font-weight: bold;
}
.banner.minimenu ul li.selected, .banner.minimenu ul li:hover {
   background: url('../images/extraicons/services-bullet-active.gif') 0 6px no-repeat;
}
.banner.minimenu ul li.selected a {
   font-weight: bold;
}
.banner.minimenu ul li a:hover {
   text-decoration: none;
}

.banner.minimenu ul li a p {
   font-weight: normal;
   color: #000;
   margin: -2px 0 5px 0;
   line-height: 13px;
   font-size: 10px;
}

.banner.minimenu ul li a strong{
   font-size: 13px;
   text-transform: none;
}


#servicesImage {
   position: absolute;
   top: 35px;
   right: 25px;
   width: 291px;
   height: 162px;
}

#servicesImage img {
   display: none;
}




/** PORTFOLIO **/
#portfolioCategories {
   margin: 25px 0 0 25px;
   padding: 0;
   font-family: Verdana, Arial, sans-serif;
   font-size: 11px;
}
#portfolioCategories li {
   float: left;
}
#portfolioCategories li a {
   display: block;
   float: left;
   padding: 7px 12px;
   margin: 0 0 2px 2px;
   background-color: #eee;
   color: #333;
}
#portfolioCategories li a:hover {
   background-color: #E0E0E0;
   text-decoration: none;
}
#portfolioCategories li a.selected {
   background-color: #CE7725;
   color: #fff;
}

.portfolioItem {
   float: left;
   margin: 10px 0 20px 0 !important;
   position: relative;
}

.portfolioItem .portfolioImage {
   display: block;
   background-color: #eee;
   padding: 5px;
   height: 160px;
}
.portfolioItem .portfolioImage:hover {
   background-color: #ddd;
}

.portfolioItem .heading {
   display: block;
}
.portfolioItem .heading:hover {
   color: #333;
}

.portfolioItem p {
   font-size: 10px;
   line-height: 13px;
}

#wrapper .portfolioItem .oneColBlock {
   width: 283px;
   margin-right: 10px;
   padding-right: 0;
   padding-left: 8px;
   font-family: Verdana, Arial;
}

#wrapper .portfolioItem .oneColBlock ul li {
   padding: 0 0 0 20px; margin: 0;
   line-height: 12px;
   font-size: 10px;
   background-position: 0 -2px;
}

#wrapper .portfolioItem .desc {
   padding-top: 0 !important;
   padding-bottom: 26px;
}
#wrapper .portfolioItem .oneColBlock h2 {
   margin: 0; padding: 0;
}


.portfolioItem .portfolioMeta {
   position: absolute;
   font-size: 11px;
   bottom: 14px; right: 10px; width: 283px;
   line-height: 16px;
   height: 16px;
   padding: 7px 0 0 0;
   border-top: 1px solid #eee;
}
.portfolioItem.left .portfolioMeta {
   left: 15px;
}
.portfolioItem .viewWebsite {
   padding: 0 0 0 0px;
   display: block;
   float: left;
   height: 16px;
   line-height: 16px;
   font-family: Verdana, Arial;
   /* background: url("../images/icons/bullet_orange.png") 0 1px no-repeat; */
}

.portfolioItem .technologies {
   padding: 0 0 0 0px;
   margin: 0 3px 0 35px;
   display: block;
   float: right;
   height: 16px;
   line-height: 16px;
   font-family: Verdana, Arial;
   /* background: url("../images/icons/bullet_orange.png") 0 1px no-repeat; */
   cursor: pointer;
}
.portfolioClear {
   margin: 10px auto;
   border-top: 2px dotted #ddd;
   clear: both;
   width: 200px;
}


#portfolioFeatured .img {
   display: block;
   float: left;
   padding: 5px;
   background-color: #eee;
   margin: 0 0 5px 0;
}
#portfolioFeatured img {
   padding: 0 !important; margin: 0 !important;
   float: left;
}
#portfolioFeatured:hover .img {
   background-color: #ddd;
}



/** PRODUCTS **/
#productsSection .oneColBlock span {
   display: block;
   margin: 4px 0 5px 0;
   color: #333;
   background-color: #eee;
   padding: 7px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}
#productsSection .oneColBlock img {
   margin: 0 0 5px 0;
}

#productsSection .oneColBlock p:hover span {
   color: #000;
   background-color: #ddd;
}


/** BLOG **/
#blog .sidebar {
   width: 273px;
   padding: 0 10px;
   margin: 10px;
   float: right;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}
#blog .sidebar a.active{
   font-weight: bold;
}

#blog .blogMain {
   width: 586px;
   padding: 0 10px;
   margin: 10px;
   float: left;
}

#blog .blogMain h1 {
   margin: 0; padding: 10px 0px 5px 0px;
}

#blog .blogMain img {
   border: none;
}

#blog .blogMain.post h2 {
   color: #333;
   font-size: 20px;
}

#blog .blogMain.post p {
   margin: 0 0 20px 0;
}

#blog .readmore {
   margin: 12px 0 35px 0;
   padding-bottom: 0;
   font-weight: bold;
}

#blog .blogMain .meta {
   padding: 2px 0;
   margin: 0 0 15px 0;
   border-bottom: 1px solid #eee;
   color: #999;
   text-align: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}

#blog .pageSplit {
   height: 30px;
   background: transparent url("../images/layout/blog/page-split.jpg") 50% 50% no-repeat;
}

.blogSearch {
   height: 25px;
   overflow: hidden;
   margin: 5px 0 10px 0;
}

.blogSearch input {
   padding: 0; margin: 0;
   height: 25px;
   float: left;
}
.blogSearch #searchText {
   width: 210px;
   font-size: 11px;
   padding: 6px 5px;
   margin: 0 3px 0 0;
   height: 16px;
   border: none;
   background-color: #eee;
   border-bottom: 1px solid
}

.gist-file {
   font-size: 11px;
}
.embedFooter {
   background-color: #fff !important;
   border-bottom: none;
}


.paginationControl {
   text-align: center;
   padding: 5px;
   background-color: #eee;
   font-family: Verdana, sans-serif;
   font-size: 11px;
   border-top: 1px solid #ddd;
}
.paginationControl .disabled {
   color: #999;
}

.paginationControl a, .paginationControl span {
   padding: 0 2px;
}
.paginationControl span.current {
   font-weight: bold;
}


.blogMain .postTags {
    margin: 10px 0;
    padding: 5px;
    background-color: #fff;
    border-top: 1px solid #ccc;

}
.blogMain.post .postTags {
    margin: 30px 0 0 0;
    padding: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
}

body #wrapper .postTags h6 {
    color: #000;
    text-transform: none;
    font-size: 12px;
    margin: 0 0 5px 0;
}


.post pre {
   font-family: Monaco, Consolas, "Courier New", monospace;
   font-size: 11px;
   line-height: 1.5;
   background-color: #eee;
   border-left: 3px solid #ddd;
   padding: 10px;
   margin: -5px 0 15px 0;
   overflow: auto;
}


/** COMMENTS **/



#comments-block h3 {
    margin-top: 25px;
}

#comments-block .comment {
    margin: 10px 0 15px;
}


#comments-block .comment .comment-content {
    padding: 10px;
    background-color: #EEE;
    border-top: 1px solid #999999;
}


#comments-block .comment.gravitywell-post .comment-content {
    border-top: 1px solid #CE7725;
}


#comments-block .comment.gravitywell-post .comments-meta {
    background-color: #CE7725;
    color: #fff;
    border-bottom: 1px solid #CE7725;
}

#comments-block .comment.gravitywell-post .comments-meta a {
    color: #000;
}

#comments-block .comment .comments-meta {
    background-color: #e0e0e0;
    padding: 5px 10px;
    font-size: 10px;
    margin: 1px 0 0 0;
    border-bottom: 1px solid #999999;

}


#comments-post-block input, #comments-post-block textarea {
    width: 577px;
}

body #wrapper  #comment-post-form-submit {
    display: block;
    width: 150px;
    margin: 10px 0 0 0;
    padding: 4px 0;
    border: 0px solid #ccc;
    background-color: #ddd;
    text-align: center;
    color: #000;
}

body #wrapper  #comment-post-form-submit:hover {
    text-decoration: none;
    background-color: #ccc;
    color: #000;
}

#comments-post-block .formError {
    padding: 7px;
    margin: 0 0 10px 0;
    border: 1px solid #FF4242;
    font-weight: bold;
    background-color: #FFA5A5;
}

#comments-post-block .success {
    padding: 7px;
    margin: 0 0 10px 0;
    border: 1px solid #79C65D;
    font-weight: bold;
    background-color: #C5FFAF;
}

#comment-post-notallowed {
    margin: 15px 0 0 0;
}

body #wrapper #main #comment-post-notallowed p {
    font-weight: bold;
    margin: 0 5px 0 0;
}


/** CONTACT **/
#googleMapLink {
   display: block;
   height: 16px;
   line-height: 15px;
   vertical-align: middle;
   padding-left: 25px;
   background: url("../images/icons/map_go.png") top left no-repeat;
   margin: 15px 0 0 0;
}



/** MESSAGES **/
.errorMsg {
   margin: 15px 0;
   padding: 10px;
   background-color: #FFCCCC;
   color: #000;
   border-left: 1px solid #FE8686;
}

.successMsg {
   margin: 15px 0;
   padding: 10px;
   background-color:#E4FFD6;
   color: #000;
}





/* SPECIFICS */


.mailbloomImages {
   display: block;
   float: left;
   width: 586px;
   margin: 15px 0 15px 0;
}
.mailbloomImages div {
   display: block;
   float: left;
   width: 120px;
   height: 98px;
   padding: 5px;
   border: 1px solid #ddd;
   text-align: center;
   margin: 0 10px 10px 0;
}
.mailbloomImages div p {
   margin: 2px 0 0 0 !important;
   padding: 0 !important;
}
.mailbloomImages div img {
   border: none !important;
}
.mailbloomImages div a {
   border: none !important;
}


.oneColBlock .homepageContactForm #enquiry {
    height: 60px;
}



/**
 * CUFON STYLING
 */

/* Menu */
ul#menu li a { font-size: 12px; font-weight: normal; }
.cufon-active ul#menu li a { font-size: 16px; font-weight: bold; }


/* Headings */
#wrapper .banner h1 { font-size: 22px; line-height: 24px;}
#wrapper .banner h2 { font-size: 15px; line-height: 22px;}
.cufon-active #wrapper .banner h1 { font-size: 30px; line-height: 24px;}
.cufon-active #wrapper .banner h2 { font-size: 20px; line-height: 22px;}

h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; }
h5 { font-size: 11px; }
h6 { font-size: 10px; }
#homepage h2 { font-size: 16px; }

.cufon-active h1 { font-size: 23px; }
.cufon-active h2 { font-size: 20px; }
.cufon-active h3 { font-size: 18px; }
.cufon-active h4 { font-size: 16px; }
.cufon-active h5 { font-size: 14px; }
.cufon-active h6 { font-size: 12px; }
.cufon-active #homepage h2 { font-size: 23px; }

h1,
h2,
h3,
h4,
h5,
h6,
.Miso,
#menu a {
   visibility: hidden !important;
}

.cufon-ready .Miso { font-size: 150% !important; font-weight: bold; }

.cufon-ready h1,
.cufon-ready h2,
.cufon-ready h3,
.cufon-ready h4,
.cufon-ready h5,
.cufon-ready h6,
.cufon-ready .Miso,
.cufon-ready #menu a {
   visibility: visible !important;
}