/* There are a lot of fixed sizes in the style sheet, each
page consists of segments

A standard segment is 360px by 175x with a 10px gap to the right
and bottom

You can create segments of many sizes by combining the following sizes

widthHalf
width2
width3
height2
height3
full-segment

<-------------- 1100px -------------->
<-- 360px ->
+----------+ +----------+ +----------+ - -
|          | |          | |          | | | 175px
|          | |          | |          | | |
+----------+ +----------+ +----------+ | _
                                       |
+----------+ +-----------------------+ |
|          | |       width2          | |
|          | |                       | | 545px
|          | +-----------------------+ |  
| height2  |                           |  <-- 10px gap 
|          | +---+  +---+ +----------+ |  
|          | |   |  |   | |          | |
|          | |widthHalf | |          | |
+----------+ +---+  +---+ +----------+ _
            ^
            |
           10px
           gap
*/


body
{
    font-family: Century Gothic, Arial, Sans-Serif; /* Century Gothic is installed with office, even on Macs - maybe */
    font-size: 16px;
    color: White;
}

body, html
{
    background-color: #1E2E50;
    height: 100%;
    min-width: 1100px
}

p 
{
    margin-bottom: 5px;
}


h1 { font-size: 80px; margin-bottom: 5px; font-weight: bold }
h2 { font-size: 60px; margin-bottom: 5px; font-weight: bold }
h3 { font-size: 30px; margin-bottom: 5px; font-weight: bold }
h4 { font-size: 20px; margin-bottom: 5px; font-weight: bold }

.massive { font-size: 80px }
.largest { font-size: 60px }
.large { font-size: 30px }
.big { font-size: 20px }
small, .small {font-size: 15px; font-family: Arial }

.black { color: Black; }

b { font-weight: bold }
i { font-style: italic }
ul, li {margin-left: 10px; padding-left: 0;}
ul { margin-bottom: 5px } /* to match <P> */

a { text-decoration: underline; color: white; }
a:focus { outline: none; } /* dotted box hack for FF */

.page
{
    padding-top: 20px;
    margin: 0px auto;
    width: 1110px;
    position: relative;
}

.title
{
    font-size: 60px;
    margin-bottom: 50px;
}

/* Segments */

.segment
{
    margin: 0px 10px 10px 0px;
    width: 360px;
    height: 175px;
    float: left;
    overflow: hidden;
    position: relative;
}

.widthHalf
{
    width: 175px;
}

.width2
{
    width: 730px;
}

.width3
{
    width: 1100px;
}

.height2
{
    height: 360px;
}

.height3
{
    height: 545px;
}

.full-segment
{
    width: 1100px;
    height: 545px;
}

/* Content of segment classes */

.content
{
    margin: 10px;
}

.nomargin
{
    margin: 0px !important;
}

/* Back to front page */

.back
{
    position: absolute;
    height: 40px;
    width: 20px;
    top: 700px;
    right: 10px;
    cursor: pointer;
    background-image:url(images/back.png);
}

/* Ref link when segment has ref to page or url */

.ref 
{
    position: absolute;
    height: 40px;
    width: 20px;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
    background-image:url(images/next.png);
}

/* Ref link suitable for pale/white segment */
.dark .ref
{
    background-image:url(images/nextdark.png);
}

/* Colour pallettes - these would be better generated in code I'm sure */

.oth1 { background-color : #9DC467 }
.oth2 { background-color : #7e8873 }
.oth3 { background-color : #b0a85b }
.oth4 { background-color : #4650b1 }

.cld1 { background-color : #5461A5 }
.cld2 { background-color : #5D6E99 }
.cld3 { background-color : #6F7294 }
.cld4 { background-color : #515b73 }

.foo1 { background-color : #469246 }
.foo2 { background-color : #3aa146 }
.foo3 { background-color : #31663a }
.foo4 { background-color : #5d9b5d }

.clear 
{
    clear: both;
}


/* ==================== */
/* =     CAROUSEL     = */
/* ==================== */

.carousel-wrap                {margin:0; padding:0}
.carousel-wrap > li             {margin:0; padding:0; display:block; height:750px;}

/* Prevent all images from displaying on load */
.carousel-wrap > li + li      {display:none;}

.carousel                   {margin:0 auto 20px auto; position:relative}
.carousel .arrow-left,
.carousel .arrow-right      {display:none; position:absolute; top:700px; width:10px; height:32px; cursor:pointer;}
.carousel .arrow-left       {left:6px; background-image:url(images/common/carousel-left.png);}
.carousel .arrow-right      {right:6px; background-image:url(images/common/carousel-right.png);}
.carousel-content           {width:980px; height:300px;}
.carousel .blobs            {display:block;height:10px;overflow:hidden;}
.carousel .blobs a          {background:url(images/common/carousel-blob.png) no-repeat; width:10px; height:10px; margin:0 2px;}

img.center {   display: block;   margin-left: auto;   margin-right: auto; }