/******************************************************************************

  Script    :   fixed_responsive_grid_style.css
  Author    :   C.E. Berry
  Version   :   5.00.013
  Notes     :   CSS Stylesheet containing CSS base responsive style

                All material contained within is the intellectual property of
                SysExcel Ltd and as such may not be reproduced in any way
                shape or form without the prior consent of SysExcel Ltd.

********************************************************************************

    RESPONSIVE GRID LAYOUT - DEFINES LAYOUT OF COLUMNS FOR DIFFERENT DEVICES

********************************************************************************/

/*----  Base grid - 960px wide  ---*/

.responsivegrid
{
                                position: relative;
                                width: 960px;
                                margin: 0 auto;
                                padding: 0;
}

.responsivegrid .gridcolumn,
.responsivegrid .gridcolumns
{
                                float: left;
                                display: inline;
                                margin-left: 10px;
                                margin-right: 10px;
}

.gridrow
{
                                margin-bottom: 0;
}

/*----  Nested Column Classes  ---*/

.gridcolumn.leftcolumn,
.gridcolumns.leftcolumn
{
                                margin-left: 0;
}
.gridcolumn.rightcolumn,
.gridcolumns.rightcolumn
{
                                margin-right: 0;
}

/* Base Grid */
.responsivegrid .one.gridcolumn,
.responsivegrid .one.gridcolumns
{
                                width: 40px;
}

.responsivegrid .two.gridcolumns
{
                                width: 100px;

}

.responsivegrid .three.gridcolumns
{
                                width: 160px;
}

.responsivegrid .four.gridcolumns
{
                                width: 220px;
}

.responsivegrid .five.gridcolumns
{
                                width: 280px;
}

.responsivegrid .six.gridcolumns
{
                                width: 340px;
}

.responsivegrid .seven.gridcolumns
{
                                width: 400px;
}

.responsivegrid .eight.gridcolumns
{
                                width: 460px;
}

.responsivegrid .nine.gridcolumns
{
                                width: 520px;
}

.responsivegrid .ten.gridcolumns
{
                                width: 580px;
}

.responsivegrid .eleven.gridcolumns
{
                                width: 640px;
}

.responsivegrid .twelve.gridcolumns
{
                                width: 700px;
}

.responsivegrid .thirteen.gridcolumns
{
                                width: 760px;
}

.responsivegrid .fourteen.gridcolumns
{
                                width: 820px;
}

.responsivegrid .fifteen.gridcolumns
{
                                width: 880px;
}

.responsivegrid .sixteen.gridcolumns
{
                                width: 940px;
}

.responsivegrid .one-third.gridcolumn,
.responsivegrid .one-third.gridcolumns
{
                                width: 300px;
}

.responsivegrid .two-thirds.gridcolumn,
.responsivegrid .two-thirds.gridcolumns
{
                                width: 620px;
}

/*---  Offset/padded columns  ---*/

.responsivegrid .padded-one-column,
.responsivegrid .padded-one-columns
{
                                padding-left: 60px;
}

.responsivegrid .padded-two-columns
{
                                padding-left: 120px;
}

.responsivegrid .padded-three-columns
{
                                padding-left: 180px;
}

.responsivegrid .padded-four-columns
{
                                padding-left: 240px;
}

.responsivegrid .padded-five-columns
{
                                padding-left: 300px;
}

.responsivegrid .padded-six-columns
{
                                padding-left: 360px;
}

.responsivegrid .padded-seven-columns
{
                                padding-left: 420px;
}

.responsivegrid .padded-eight-columns
{
                                padding-left: 480px;
}

.responsivegrid .padded-nine-columns
{
                                padding-left: 540px;
}

.responsivegrid .padded-ten-columns
{
                                padding-left: 600px;
}

.responsivegrid .padded-eleven-columns
{
                                padding-left: 660px;
}

.responsivegrid .padded-twelve-columns
{
                                padding-left: 720px;
}

.responsivegrid .padded-thirteen-columns
{
                                padding-left: 780px;
}

.responsivegrid .padded-fourteen-columns
{
                                padding-left: 840px;
}

.responsivegrid .padded-fifteen-columns
{
                                padding-left: 900px;
}

/********************************************************************************

    SPECIFIC STYLES FOR ALL TABLETS

********************************************************************************/

@media only screen and
(min-width: 569px) and
(max-width: 1024px)
{
}

/********************************************************************************

    SPECIFIC STYLES FOR TABLETS (LANDSCAPE)

********************************************************************************/

@media only screen and
(min-width: 569px) and
(max-width: 1024px) and
(orientation: landscape)
{
}

/********************************************************************************

    SPECIFIC STYLES FOR TABLETS (PORTRAIT)

********************************************************************************/

@media only screen and
(min-width: 569px) and
(max-width: 1024px) and
(orientation: portrait)
{
    .responsivegrid
    {
                                width: 768px;
    }

    .responsivegrid .gridcolumn,
    .responsivegrid .gridcolumns
    {
                                margin-left: 10px;
                                margin-right: 10px;
    }

    .gridcolumn.leftcolumn, .gridcolumns.leftcolumn
    {
                                margin-left: 0;
                                margin-right: 10px;
    }

    .gridcolumn.rightcolumn, .gridcolumns.rightcolumn
    {
                                margin-right: 0;
                                margin-left: 10px;
    }

    .leftcolumn.rightcolumn
    {                           margin-left: 0;
                                margin-right: 0;
    }

    .responsivegrid .one.gridcolumn,
    .responsivegrid .one.gridcolumns
    {
                                width: 28px;
    }
    .responsivegrid .two.gridcolumns
    {
                                width: 76px;
    }

    .responsivegrid .three.gridcolumns
    {
                                width: 124px;
    }

    .responsivegrid .four.gridcolumns
    {
                                width: 172px;
    }

    .responsivegrid .five.gridcolumns
    {
                                width: 220px;
    }

    .responsivegrid .six.gridcolumns
    {
                                width: 268px;
    }

    .responsivegrid .seven.gridcolumns
    {
                                width: 316px;
    }

    .responsivegrid .eight.gridcolumns
    {
                                width: 364px;
    }

    .responsivegrid .nine.gridcolumns
    {
                                width: 412px;
    }

    .responsivegrid .ten.gridcolumns
    {
                                width: 460px;
    }

    .responsivegrid .eleven.gridcolumns
    {
                                width: 508px;
    }

    .responsivegrid .twelve.gridcolumns
    {
                                width: 556px;
    }

    .responsivegrid .thirteen.gridcolumns
    {
                                width: 604px;
    }

    .responsivegrid .fourteen.gridcolumns
    {
                                width: 652px;
    }

    .responsivegrid .fifteen.gridcolumns
    {
                                width: 700px;
    }

    .responsivegrid .sixteen.gridcolumns
    {
                                width: 748px;
    }

    .responsivegrid .one-third.gridcolumn,
    .responsivegrid .one-third.gridcolumns
    {
                                width: 236px;
    }

    .responsivegrid .two-thirds.gridcolumn,
    .responsivegrid .two-thirds.gridcolumns
    {
                                width: 492px;
    }

    /* Offsets */
    .responsivegrid .padded-one-column,
    .responsivegrid .padded-one-columns
    {
                                padding-left: 48px;
    }

    .responsivegrid .padded-two-columns
    {
                                padding-left: 96px;
    }

    .responsivegrid .padded-three-columns
    {
                                padding-left: 144px;
    }

    .responsivegrid .padded-four-columns
    {
                                padding-left: 192px;
    }

    .responsivegrid .padded-five-columns
    {
                                padding-left: 240px;
    }

    .responsivegrid .padded-six-columns
    {
                                padding-left: 288px;
    }

    .responsivegrid .padded-seven-columns
    {
                                padding-left: 336px;
    }

    .responsivegrid .padded-eight-columns
    {
                                padding-left: 384px;
    }

    .responsivegrid .padded-nine-columns
    {
                                padding-left: 432px;
    }

    .responsivegrid .padded-ten-columns
    {
                                padding-left: 480px;
    }

    .responsivegrid .padded-eleven-columns
    {
                                padding-left: 528px;
    }

    .responsivegrid .padded-twelve-columns
    {
                                padding-left: 576px;
    }

    .responsivegrid .padded-thirteen-columns
    {
                                padding-left: 624px;
    }

    .responsivegrid .padded-fourteen-columns
    {
                                padding-left: 672px;
    }

    .responsivegrid .padded-fifteen-columns
    {
                                padding-left: 720px;
    }

}

/********************************************************************************

    SPECIFIC STYLES FOR ALL MOBILES

********************************************************************************/

@media only screen and
(max-width: 568px)
{
}

/********************************************************************************

    SPECIFIC STYLES FOR MOBILES (LANDSCAPE)

********************************************************************************/

@media only screen and
(max-width: 568px) and
(orientation: landscape)
{
    .responsivegrid
    {
                                width: 420px;

    }

    .responsivegrid .gridcolumns,
    .responsivegrid .gridcolumn
    {
                                margin: 0;
    }

    .responsivegrid .one.gridcolumn,
    .responsivegrid .one.gridcolumns,
    .responsivegrid .two.gridcolumns,
    .responsivegrid .three.gridcolumns,
    .responsivegrid .four.gridcolumns,
    .responsivegrid .five.gridcolumns,
    .responsivegrid .six.gridcolumns,
    .responsivegrid .seven.gridcolumns,
    .responsivegrid .eight.gridcolumns,
    .responsivegrid .nine.gridcolumns,
    .responsivegrid .ten.gridcolumns,
    .responsivegrid .eleven.gridcolumns,
    .responsivegrid .twelve.gridcolumns,
    .responsivegrid .thirteen.gridcolumns,
    .responsivegrid .fourteen.gridcolumns,
    .responsivegrid .fifteen.gridcolumns,
    .responsivegrid .sixteen.gridcolumns,
    .responsivegrid .one-third.gridcolumn,
    .responsivegrid .one-third.gridcolumns,
    .responsivegrid .two-thirds.gridcolumn,
    .responsivegrid .two-thirds.gridcolumns
    {
                                width: 420px;
    }

    .responsivegrid .padded-one-column,
    .responsivegrid .padded-one-columns,
    .responsivegrid .padded-two-columns,
    .responsivegrid .padded-three-columns,
    .responsivegrid .padded-four-columns,
    .responsivegrid .padded-five-columns,
    .responsivegrid .padded-six-columns,
    .responsivegrid .padded-seven-columns,
    .responsivegrid .padded-eight-columns,
    .responsivegrid .padded-nine-columns,
    .responsivegrid .padded-ten-columns,
    .responsivegrid .padded-eleven-columns,
    .responsivegrid .padded-twelve-columns,
    .responsivegrid .padded-thirteen-columns,
    .responsivegrid .padded-fourteen-columns,
    .responsivegrid .padded-fifteen-columns
    {
                                padding-left: 0;
    }

}

/********************************************************************************

    SPECIFIC STYLES FOR MOBILES (PORTRAIT)

********************************************************************************/

@media only screen and
(max-width: 568px) and
(orientation: portrait)
{
    .responsivegrid
    {
                                width: 300px;
    }

    .responsivegrid .gridcolumns,
    .responsivegrid .gridcolumn
    {
                                margin: 0;
    }

    .responsivegrid .one.gridcolumn,
    .responsivegrid .one.gridcolumns,
    .responsivegrid .two.gridcolumns,
    .responsivegrid .three.gridcolumns,
    .responsivegrid .four.gridcolumns,
    .responsivegrid .five.gridcolumns,
    .responsivegrid .six.gridcolumns,
    .responsivegrid .seven.gridcolumns,
    .responsivegrid .eight.gridcolumns,
    .responsivegrid .nine.gridcolumns,
    .responsivegrid .ten.gridcolumns,
    .responsivegrid .eleven.gridcolumns,
    .responsivegrid .twelve.gridcolumns,
    .responsivegrid .thirteen.gridcolumns,
    .responsivegrid .fourteen.gridcolumns,
    .responsivegrid .fifteen.gridcolumns,
    .responsivegrid .sixteen.gridcolumns,
    .responsivegrid .one-third.gridcolumn,
    .responsivegrid .one-third.gridcolumns,
    .responsivegrid .two-thirds.gridcolumn,
    .responsivegrid .two-thirds.gridcolumns
    {
                                width: 300px;
    }

    .responsivegrid .padded-one-column,
    .responsivegrid .padded-two-columns,
    .responsivegrid .padded-three-columns,
    .responsivegrid .padded-four-columns,
    .responsivegrid .padded-five-columns,
    .responsivegrid .padded-six-columns,
    .responsivegrid .padded-seven-columns,
    .responsivegrid .padded-eight-columns,
    .responsivegrid .padded-nine-columns,
    .responsivegrid .padded-ten-columns,
    .responsivegrid .padded-eleven-columns,
    .responsivegrid .padded-twelve-columns,
    .responsivegrid .padded-thirteen-columns,
    .responsivegrid .padded-fourteen-columns,
    .responsivegrid .padded-fifteen-columns
    {
                                padding-left: 0;
    }

}

/********************************************************************************

     CLASSES TO CLEAR NESTING, WRAP ROWS ETC.

********************************************************************************/

.responsivegrid:after
{
                                content: "\0020";
                                display: block;
                                height: 0;
                                clear: both;
                                visibility: hidden;
}

.clearup:before,
.clearup:after,
.gridrow:before,
.gridrow:after
{
                                content: '\0020';
                                display: block;
                                overflow: hidden;
                                visibility: hidden;
                                width: 0;
                                height: 0;
}

.gridrow:after,
.clearup:after
{
                                clear: both;
}

.gridrow,
.clearup
{
                                zoom: 1;
}

/*---  Manual class to clear columns etc. use as <br class="clearupall" />  ---*/

.clearupall
{
                                clear: both;
                                display: block;
                                overflow: hidden;
                                visibility: hidden;
                                width: 0;
                                height: 0;
}

/********************************************************************************

    RESPONSIVE IFRAME

********************************************************************************/

.responsive-iframe-container
{
                                position: relative;
                                padding-bottom: 56.25%;
                                padding-top: 30px;
                                height: 0;
                                overflow: hidden;
}

.responsive-iframe-container iframe,
.responsive-iframe-container object,
.responsive-iframe-container embed
{
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
}