/* 
Set of basic paramters, not necessarily layout-related
*/

body,div,dl,dt,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{
    margin:0;
    padding:0;
    /* background-color: #000; */
}

p
{
    line-height: 1.2em;
}

table
{
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit;
}

a
{
    text-decoration: none;
    color: #eca53d;
}

fieldset,img
{
    border:0;
}

address,caption,cite,code,dfn,th,var
{
    font-style:normal;
    font-weight:normal;
}

li
{
    list-style-type: disc;
}

caption,th
{
    text-align:left;
}


q:before,q:after
{
    content:'';
}

abbr,acronym
{
    border:0;
    font-variant:normal;
}

sup
{
    font-size: 80%;
    vertical-align:text-top;
}

sub
{
    vertical-align:text-bottom;
}

input,textarea,select
{
    font-family:inherit;
    font-weight:inherit;
    font-size:100%;
}

legend
{
    color:#000;
}

body
{
    font-size: small;
}

pre,code,kbodyContainer,samp,tt
{
    font-family:monospace;
    font-size:  108%;
    line-height:100%;
}



/* 

Layout stuff begins here

*/


#doc,#doc2,#bodyContainer,.document
{
    margin:auto;
    /* debug 
    border: solid 1px red;
    */
}

#pageContainer
{
    width: 100%;
    background-image: url("/images/GS_landingBGimg.png");
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 680px;
}

/*
This is the main container for page content
*/
#bodyContainer
{
    
    width: 930px;
    margin-left:auto;
    margin-right: auto;
    margin-top: 1%;
}

/*
Wide header container, the same width as the pageContainer
*/
#header
{
    margin:0px;
    padding:0px;
    /* debug 
    border: solid 1px green;
    */
}

/*
Container for the gemstone logo
*/
#gemstoneLogo
{
    margin-left: 17.8%;
    width: 20%;
    max-width: 159px;
    max-height: 66px;
    /* debug
    border: solid 1px yellow; 
    */
}

#s2Announce
{
    text-align: center;
}

#s2AnnLogo
{
    width: 94%;
    margin-bottom: 13px; 
}
div#topCrumbs
{
    margin-left: 18.6%;
    margin-bottom: 10px;
}

/*
columnContainer is the first sub-container inside pageContainer
*/
#columnContainer
{
    width: 100%;
    margin-bottom: 0.4em;
    /* debug 
    border: solid 1px white; 
    */
}

/*
cBox is another large container 
*/
#columnContainer .cBox
{
    position:static;
    float:none;
    width:auto;
}

.cBox
{
    position:relative;
    margin-left: auto;
    margin-right: auto;

    /* debug 
    border: solid 1px yellow;
    */
}


div.cColumns
{
    width: 100%;
    /* debug
    border: solid 1px white;
    */
}

.cColumns div.column
{
    /* debug
    border: solid 1px white;
    border-style: inset;
     background: #fff;
    */
    
}


/*
cColumns is the last large container before the column divs
*/

/* Leftmost column for site nav and social menu */
.cColumns .cColumnA
{
    float: left;
    width: 16%;
}

/* columns B and C are primaily used on the front page
   they are the left and right halves of the body content of the landing page */
.cColumns .cColumnB
{
    float:left;
    width: 39%;
}

.cColumns .cColumnC
{
    float:left;
    width: 28%;
}

/* Column D is the right-hand menu or customer list as on the landing page */
.cColumns .cColumnD
{
    float:left;
    width: 16%;
    position: relative;
}

/* ######### Alternate columns with different widths ######### */

.cColumns .cColumnA2
{
    float: left;
    width: 17%;
}

.cColumns .cColumnB2
{
    float:left;
    width: 38%;
}

.cColumns .cColumnC2
{
    float:left;
    width: 27%;
}

.cColumns .cColumnD2
{
    float:left;
    width: 17%;
    position: relative;
}



.cColumns .setHeight
{
    min-height: 494px;
}

/* full center column for use on the landing page*/
.cColumns .cColumnLanding
{
    float: left;
    width: 67%;
    border: dashed 1px #696969;
    border-top: none;
    
}

/* cColumnFull takes up the space of columns B and C
   Primarily for use on content pages  */
.cColumns .cColumnFull
{
    float: left;
    margin-right: 0;
    width: 67%;
    border: dashed 1px #696969;
    border-top: none;
    text-align: center;
    padding-bottom: 20px;
}

.cColumnFull div#bodyContent
{
    padding-top: 20px;
    padding-left: 0;
    width: 94%;
    min-height: 275px;
    margin-right: 0;
    background: #404042;
    text-align: left;
    padding-bottom: 20px;
}

#contVspace
{
    float: left;
    width: 1px;
    height: 600px;
}

/* center the content header by default */
div#content_header
{
    text-align: center;
    /*  Not sure about this
     border-bottom: dotted 1px #696969; */
    margin-bottom: 1em;
}

/* Assorted reusable content layout elements */

div.fullBox
{
    float: left;
    margin: 0;
    width: 98%;
    padding: 0.7em;
}

div.halfBox
{
    float: left;
    margin: 0;
    width: 45%;
    padding: 0.7em;
}

div.thirdBox
{
    float: left;
    padding: 0.6em;
    width: 32.4%;
}

div.quarterBox
{
    float: left;
    padding: 0.6em;
    width: 24.5%;
}

div.fifthBox
{
    float: left;
    padding: 0.6em;
    width: 19.6%;
}

div.centerBox
{
    width: 76%;
    margin-left: auto;
    margin-right: auto;
}

div.centerSomething
{
    width: 100%;
    text-align: center;
}

/* Landing video */
div#cLandingVid
{
    margin-bottom: 2.5%;
    text-align: center;
}


/* ######### Layout for specific pages ######### */

/* Gemfire Product page */
div#gfeProdDesc
{
    margin-top: 1em;
    margin-bottom: 0;
    line-height: 1.3em;
    width: 100%;
}

ul#gfeProdKeyFeatures
{
    margin-top: 0;
    margin-left: 0;
}

ul.gfeProdBenefits
{
    margin-left: 0;
    margin-right: 0;
}

ul#gfeProdKeyFeatures li, ul.gfeProdBenefits li
{
    list-style-image: url('/images/list-plus.gif');
    line-height: 145%;
    margin-left: 1.6em;
}

div#gfeProdList1
{
    float: left;
    width: 55%;
}

div#gfeProdList2 h2
{
    white-space: nowrap;
}

div#gfeProdList2
{
    float: left;
    margin-left: 1%;
    width: 44%;
}

/* GSS Product Page */
img#gssProdLogo
{
    margin-top: 1em;
}

div#gemfireAnim
{
    text-align: center;
}

/* ######### Landing page right column ######### */

/* right column items */
div#rDownload
{
    padding-left: 7px;
    border-bottom: dashed 1px #696969;
}

div#rMgmtProb
{
    padding-left: 7px;
    margin-top: 20%;
}

div#rCustomers
{
    position: absolute;
    bottom: 0;
    width: 156px;
}

div#rCustomersHead
{
    padding-left: 7px;
    border-bottom: dashed 1px #696969;
}

div#rDownloadHead, div#rCustomersHead
{
    padding-bottom: 0em;
}

div#rCustomersScroller
{
    margin-top: 7px;
    text-align: right;
}

/* cBox containing the lifestream and news headers */
div#streamNewsHeaders
{
    margin-top: 20px;
    margin-bottom: 5px;
}

div.streamNewsHeader
{
    height: 3em;
}

/* width tweak for the news column on the landing page */
div#news.cColumnC
{
    width: 28.2%;
}

/* ######### Customers List ######### */

table.customer
{
    width: 450px;
    border-collapse: collapse;
}

tr.custr td
{
    border-bottom: dotted 1px #696969;
}

table.customer td.custn
{
    background: #808080;
}

table.customer td.custl
{
    width: 254px;
    background: #FFFFFF;
}

span.custn
{
    display: block;
    font-weight: bold;
    /* border-bottom: dotted 1px #696969; */

}

/* critical, don't remove */
#bodyContainer:after,.cColumns:after
{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

/* ######### Footer area ######### */

#footerContainer
{
    height: 100%;
    width: 100%;
    background-color: #1b1b1b;
}

#footerContainer *
{
    background-color: #1b1b1b;
}

#footerContainer .fBox
{
    width: 88%;
    height: 100%;
    min-width: 600px;
    max-width: 1140px;
    margin-left:auto;
    margin-right: auto;
}

#footerContainer .footerBox
{
    float: left;
    width: 25%;
}

div.footerBox dl
{
    clear: both;
}

div.footerCopy
{
    clear:both;
    display: inline;
    text-align: center;
    line-height: 1.4em;
    color: #363636;
    width: 623px;
}

#pageFooter
{
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

#landingFooter
{
    width: 625px;
}

/* max-width enables the JS image-scaling
   other bit is an IE hack so images don't look like crap*/
img
{
    max-width: 100%;
    /* debug
    border: solid 1px white; 
    */
    /* IE hack */
   -ms-interpolation-mode: bicubic;
}


/* Video on the landing page */

.videoWrapper {
  position:relative;
  height: 0;
  border: solid 1px #414141;
}
* html .videoWrapper {
  margin-bottom: 45px;
  margin-bottom: 0;
}
.videoWrapper div,
.videoWrapper embed, 
.videoWrapper object {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.wideScreen {padding-bottom:60.25%;}
.fourBYthree {padding-bottom:75%;}
.chrome_25 {padding-top:25px;}
.chrome_35 {padding-top:35px;}