/*===============================================*
 |                                               |
 |            Hardware Computerist               |
 |              Main Style Sheet                 |
 |                                               |
 *===============================================*/


BODY
{
    MARGIN: 0;
    HEIGHT: 100%;
    OVERFLOW-Y: AUTO;
    BACKGROUND-COLOR: #F0F0F0;
    FONT-FAMILY: "Times New Roman", Times, serif;
}


BODY:AFTER
{
    /* preload logo menu images */

    /* hide images */
    POSITION: ABSOLUTE;
    WIDTH: 0;
    HEIGHT: 0;
    OVERFLOW: HIDDEN;
    Z-INDEX: -1;

    /* load images */
    CONTENT: URL("../media/png/logomenu/menu.dim.png") URL("../media/png/logomenu/button.serious.png")
    URL("../media/png/logomenu/button.gaming.png") URL("../media/png/logomenu/button.productivity.png");
}


#Content
{
    MARGIN: 134PX 0PX 0PX 276PX;
    DISPLAY: BLOCK;
}


#Banner
{
    DISPLAY: BLOCK;
    TOP: 0PX;
    LEFT: 220PX;
    WIDTH: 100%;
    HEIGHT: 77PX;
    POSITION: FIXED;
    BACKGROUND-COLOR: #2A488B;
}


/* ----------------------------------- */

#LogoMenu
{
    DISPLAY: BLOCK;
    TOP: 5PX;
    LEFT: 5PX;
    WIDTH: 210PX;
    HEIGHT: 139PX;
    POSITION: FIXED;
    BACKGROUND: URL("../media/png/logomenu/logo.hardware.png") NO-REPEAT;
    TRANSITION: .1S;
}


#LogoMenu:HOVER
{
    BACKGROUND: URL("../media/png/logomenu/menu.dim.png") NO-REPEAT;
}


.Button
{
    DISPLAY: BLOCK;
    TOP: 3PX;
    LEFT: 3PX;
    HEIGHT: 43PX;
    WIDTH: 204PX;
    POSITION: ABSOLUTE;
    OPACITY: 0;
    TRANSITION: .1S;
}


#ButtonTop
{
    BACKGROUND: URL("../media/png/logomenu/button.serious.png")
}


#ButtonMiddle
{
    TOP: 48px;
    BACKGROUND: URL("../media/png/logomenu/button.gaming.png")
}


#ButtonBottom
{
    TOP: 93px;
    BACKGROUND: URL("../media/png/logomenu/button.productivity.png")
}


#ButtonTop:HOVER, #ButtonMiddle:HOVER, #ButtonBottom:HOVER
{
    OPACITY: 1;
}


/* ----------------------------------- */

#Navigation
{
    DISPLAY: BLOCK;
    TOP: 149PX;
    LEFT: 0PX;
    WIDTH: 220PX;
    HEIGHT: 100%;
    POSITION: FIXED;
    OVERFLOW-Y: SCROLL;
    OVERFLOW-X: HIDDEN;
    SCROLLBAR-WIDTH: NONE; /* FireFox - Hidden Scrollbar */
    -MS-OVERFLOW-STYLE: NONE; /* Explorer 10+  - Hidden Scrollbar */
}


#Navigation::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome / Safari / Opera Webkit - Hidden Scrollbar  */
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |                Link                 |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

A
{ TEXT-DECORATION: NONE; }


A:LINK
{ COLOR: #162850; }


A:VISITED
{ COLOR: #162850; }


/* A.Green:LINK, A.Green:VISITED
{ COLOR: #294820;} */


TR A
{
    DISPLAY: BLOCK;
    WIDTH: 100%;
}


TD A
{
    DISPLAY: BLOCK;
    WIDTH: 100%;
}


TD.SubSection A
{
    DISPLAY: BLOCK;
    WIDTH: 100%;
    HEIGHT: 100%;
    COLOR: #3F4B91;
}


A.Navigation:HOVER
{
    COLOR: WHITE;
    BACKGROUND-COLOR: #2A488B;
    BOX-SHADOW: 0PX 0PX 1PX 0PX #998577;
    BORDER-RADIUS: 2PX;
}


A.Navigation:ACTIVE
{
    COLOR: WHITE;
    BACKGROUND-COLOR: BLACK;
    BOX-SHADOW: 0PX 0PX 1PX 0PX GRAY;
    BORDER-RADIUS: 2PX;
}


TH.Navigation A
{
    DISPLAY: BLOCK;
    WIDTH: 100%;
    HEIGHT: 100%;
    LINE-HEIGHT: 23PX;
}


TD.Navigation A
{
    DISPLAY: BLOCK;
    WIDTH: 100%;
    HEIGHT: 100%;
    LINE-HEIGHT: 24PX;
}


A.Green:LINK
{ COLOR: #294820; /* dark army-green */ }


A.Green:VISITED
{ COLOR: #294820; /* dark army-green */ }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |                Label                |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

LABEL
{
    CURSOR: POINTER;
}


[TYPE=CHECKBOX]
{
    DISPLAY: NONE;
}


:CHECKED + DIV
{
    DISPLAY: NONE;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |              Heading                |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

H2 { MARGIN-TOP: 0PX; } /* previously 44PX */


H2.Title
{
    WIDTH: 836PX; /* less than 800 to compensate for border */
    TEXT-ALIGN: CENTER;
    LETTER-SPACING: .2PX;
    COLOR: BLACK;
    BACKGROUND: #9BA9CA;
    MARGIN-LEFT: -20PX;
    MARGIN-BOTTOM: 60PX;
    PADDING-TOP: 12PX;
    PADDING-BOTTOM: 12PX;
    BORDER-RADIUS: 3PX;
    BORDER-STYLE: SOLID;
    BORDER-WIDTH: 2PX;
}


H2.Info
{
    WIDTH: 800PX;
    FONT-SIZE: 1.42EM;
    TEXT-ALIGN: LEFT;
    COLOR: BLACK;
    MARGIN-TOP: -6PX;
    MARGIN-LEFT: 0PX;
    TEXT-DECORATION: NONE;
}


H3
{
    WIDTH: 738PX; /* less than 760 to compensate for border and padding */
    FONT-SIZE: 1.25EM;
    TEXT-INDENT: 30PX;
    PADDING: 6PX;
    MARGIN-LEFT: 25PX;
    MARGIN-BOTTOM: 30PX;
    COLOR: BLACK;
    BACKGROUND: #BAC2D7;
    BORDER-RADIUS: 3PX;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |             Paragraph               |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

P
{
    WIDTH: 800PX;
    FONT-SIZE: 1.1EM;
    TEXT-ALIGN: JUSTIFY;
    MARGIN-LEFT: 0PX;
    LINE-HEIGHT: 130%;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |            Superscript              |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

SUP
{
    FONT-SIZE: .6EM;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |                List                 |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

UL
{
    FONT-SIZE: 1.1EM;
    MARGIN-LEFT: 0PX;
    LIST-STYLE-TYPE: NONE;
    LINE-HEIGHT: 130%;
}


UL.Column2
{
    WIDTH: 360PX;
    -WEBKIT-COLUMN-COUNT: 2;
    -MOZ-COLUMN-COUNT: 2;
    COLUMN-COUNT: 2;
}


UL.Column3
{
    WIDTH: 540PX;
    -WEBKIT-COLUMN-COUNT: 3;
    -MOZ-COLUMN-COUNT: 3;
    COLUMN-COUNT: 3;
}


UL.Column4
{
    WIDTH: 720PX;
    -WEBKIT-COLUMN-COUNT: 4;
    -MOZ-COLUMN-COUNT: 4;
    COLUMN-COUNT: 4;
}


LI:BEFORE
{ CONTENT: "\2022\20"; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |               Table                 |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


TABLE
{
    MARGIN-LEFT: 15PX;
    MARGIN-TOP: 20PX;
    MARGIN-BOTTOM: 80PX;
    BORDER-COLLAPSE: SEPARATE;
    BORDER-SPACING: 0PX;
}


TD
{ TEXT-ALIGN: CENTER; }


TABLE.Info
{
    WIDTH: 800PX;
    FONT-SIZE: 1.1EM;
    MARGIN-TOP: 10PX;
    MARGIN-BOTTOM: 10PX;
    MARGIN-LEFT: 50PX;
    BORDER-SPACING: 2PX;
}


TH.Info
{
    HEIGHT: 22PX;
    WIDTH: 160PX;
    FONT-WEIGHT: BOLD;
    DIRECTION: RTL;
    TEXT-ALIGN: RIGHT;
    TEXT-INDENT: 16PX;
    PADDING: 3PX;
    COLOR: BLACK;
    BACKGROUND-COLOR: #DADADA; /* D8D8D8 D5D6D4 */
    BORDER: 1PX SOLID #F0F0F0;
    BORDER-RADIUS: 16PX;
}


TD.Info
{
    HEIGHT: 22PX;
    TEXT-ALIGN: LEFT;
    TEXT-INDENT: 16PX;
    PADDING: 3PX;
}

/* ----------------------------------- */

TABLE.SubSection
{
    WIDTH: 904PX;
    MARGIN-TOP: 2PX;
    MARGIN-BOTTOM: 2PX;
    MARGIN-LEFT: 2PX;
    BORDER-COLLAPSE: COLLAPSE;
}


TD.SubSection:HOVER
{
    BACKGROUND-COLOR: #E3E6EE;
}


TD.SubSection:ACTIVE
{
    BACKGROUND-COLOR: #CAD0DF;
}


TD.SubSection
{
    WIDTH: 120PX;
    VERTICAL-ALIGN: MIDDLE;
    TEXT-ALIGN: CENTER;
    LINE-HEIGHT: 170%;
    BORDER: 1PX SOLID #BAC3DA;
    -WEBKIT-USER-SELECT: NONE; /* Safari */
    -MS-USER-SELECT: NONE; /* IE 10 & 11 */
    USER-SELECT: NONE; /* Standard Syntax */
}

/* ----------------------------------- */

TABLE.Navigation
{
    MARGIN-TOP: 0PX;
    MARGIN-BOTTOM: 5PX;
    MARGIN-LEFT: 5PX;
    WIDTH: 210PX;
    BACKGROUND-COLOR: #FAFAFA;
    BORDER-SPACING: 2PX;
    BORDER: 1PX SOLID #B0B0B0;
    BORDER-RADIUS: 2PX;
    PADDING-TOP: 5PX;
    PADDING-BOTTOM: 5PX;
    PADDING-LEFT: 4PX;
    PADDING-RIGHT: 4PX;
}


TH.Navigation
{
    FONT-SIZE: 1.2EM;
    FONT-WEIGHT: BOLD;
    TEXT-ALIGN: LEFT;
    TEXT-INDENT: 6PX;
    HEIGHT: 24PX;
    WIDTH: 97PX;
    VERTICAL-ALIGN: MIDDLE;
    PADDING: 0PX;
}


TD.Navigation
{
    FONT-SIZE: 1.2EM;
    TEXT-ALIGN: LEFT;
    TEXT-INDENT: 8PX;
    HEIGHT: 24PX;
    VERTICAL-ALIGN: MIDDLE;
    PADDING: 0PX;
}

/* ----------------------------------- */

TABLE.Banner
{
    /* vertically align */
    TOP: 0;
    BOTTOM: 0;
    HEIGHT: 100%;
    MARGIN-TOP: 0PX;
    MARGIN-LEFT: 10PX;
}


TD.Banner
{
    FONT-SIZE: 2EM;
    FONT-WEIGHT: BOLD;
    LETTER-SPACING: .6PX;
    COLOR: WHITE;
    TEXT-ALIGN: LEFT;
    TEXT-INDENT: 40PX;
}


/* ----------------------------------- */

TABLE.Icon1Wide
{
    WIDTH: 185PX;
    MARGIN-LEFT: 40PX;
}


TABLE.Icon1
{
    WIDTH: 175PX;
    MARGIN-LEFT: 50PX;
}


TABLE.Icon2
{
    WIDTH: 350PX;
    MARGIN-LEFT: 50PX;
}


TABLE.Icon3
{
    WIDTH: 525PX;
    MARGIN-LEFT: 50PX;
}


TABLE.Icon4
{
    WIDTH: 700PX;
    MARGIN-LEFT: 50PX;
}


TD.Icon1
{
    WIDTH: 100%;
    PADDING-TOP: 6PX;
    PADDING-BOTTOM: 5PX;
    VERTICAL-ALIGN: TOP;
    TRANSITION: .1S;
}


TD.Icon2
{
    WIDTH: 50%;
    PADDING-TOP: 6PX;
    PADDING-BOTTOM: 5PX;
    VERTICAL-ALIGN: TOP;
    TRANSITION: .1S;
}


TD.Icon3
{
    WIDTH: 33%;
    PADDING-TOP: 6PX;
    PADDING-BOTTOM: 5PX;
    VERTICAL-ALIGN: TOP;
    TRANSITION: .1S;
}


TD.Icon4
{
    WIDTH: 25%;
    PADDING-TOP: 6PX;
    PADDING-BOTTOM: 5PX;
    VERTICAL-ALIGN: TOP;
    TRANSITION: .1S;
}


TD.Icon1:HOVER, TD.Icon2:HOVER, TD.Icon3:HOVER, TD.Icon4:HOVER
{
    BOX-SHADOW: 0PX 0PX 5PX 5PX #6E81AE;
    BORDER-RADIUS: 2PX;
}


TD.Icon1:ACTIVE, TD.Icon2:ACTIVE, TD.Icon3:ACTIVE, TD.Icon4:ACTIVE
{
    BOX-SHADOW: 0PX 0PX 4PX 4PX #6E81AE;
    BORDER-RADIUS: 2PX;
}


/* ----------------------------------- */


TD.Icon1 IMG.FilePurple, TD.Icon2 IMG.FilePurple, TD.Icon3 IMG.FilePurple, TD.Icon4 IMG.FilePurple
{
    WIDTH: 48PX;
    HEIGHT: 48PX;
}


TD.Icon1:HOVER IMG.FilePurple, TD.Icon2:HOVER IMG.FilePurple, TD.Icon3:HOVER IMG.FilePurple, TD.Icon4:HOVER IMG.FilePurple
{
    DISPLAY: NONE;
}


TD.Icon1 IMG.FileColor, TD.Icon2 IMG.FileColor, TD.Icon3 IMG.FileColor, TD.Icon4 IMG.FileColor
{
    WIDTH: 48PX;
    HEIGHT: 48PX;
    DISPLAY: NONE;
}


TD.Icon1:HOVER IMG.FileColor, TD.Icon2:HOVER IMG.FileColor, TD.Icon3:HOVER IMG.FileColor, TD.Icon4:HOVER IMG.FileColor
{
    DISPLAY: INLINE;
}


/* ----------------------------------- */


TD.Icon1:HOVER A:LINK, TD.Icon2:HOVER A:LINK, TD.Icon3:HOVER A:LINK, TD.Icon4:HOVER A:LINK
{
    COLOR: BLACK;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |                Image                |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

IMG
{ BORDER: 0PX; }

IMG.HardwareComputerist
{
    BORDER: 0PX;
    MARGIN-TOP: 5PX;
    MARGIN-LEFT: 5PX;
    MARGIN-BOTTOM: 1PX;
    WIDTH:210PX;
    HEIGHT:139PX;
}

IMG.LogoCollage
{
    BORDER: 0PX;
    MARGIN-TOP: 0PX;
    MARGIN-LEFT: 50PX;
    WIDTH:700PX;
    HEIGHT: 335PX;
}

IMG.Manual
{
    PADDING-LEFT: 45PX;
    PADDING-RIGHT: 45PX;
    BORDER: 0PX;
    BACKGROUND: #F0F0F0;
    HEIGHT: 306PX;
}


IMG.Manual3
{
    PADDING-LEFT: 24PX;
    PADDING-RIGHT: 24PX;
    BORDER: 0PX;
    BACKGROUND: #F0F0F0;
    HEIGHT: 306PX;
}


IMG.ManualWide
{
    PADDING-LEFT: 45PX;
    PADDING-RIGHT: 45PX;
    BORDER: 0PX;
    BACKGROUND: #F0F0F0;
    WIDTH: 306PX;
}


IMG.ManualWide2
{
    PADDING-LEFT: 38PX;
    PADDING-RIGHT: 38PX;
    BORDER: 0PX;
    BACKGROUND: #F0F0F0;
    WIDTH: 306PX;
}


IMG.App
{
    PADDING-LEFT: 45PX;
    PADDING-RIGHT: 45PX;
    BORDER: 0PX;
    BACKGROUND: #F0F0F0;
}


IMG.Book
{
    PADDING-LEFT: 45PX;
    PADDING-RIGHT: 45PX;
    BORDER: 0PX;
    BACKGROUND: #F0F0F0;
    HEIGHT: 306PX;
}


IMG.Book3
{
    PADDING-LEFT: 24PX;
    PADDING-RIGHT: 24PX;
    BORDER: 0PX;
    BACKGROUND: #F0F0F0;
    HEIGHT: 306PX;
}


IMG.ShowHide
{
    MARGIN: 0PX;
    WIDTH: 29PX;
    HEIGHT: 21PX;
    OPACITY: 0.6;
}


IMG.ShowHide:HOVER
{
    OPACITY: 1.0;
}


IMG.Banner
{
    VERTICAL-ALIGN: MIDDLE;
    WIDTH: 48PX;
    HEIGHT: 48PX;
}


IMG.File
{
    WIDTH: 48PX;
    HEIGHT: 48PX;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |              Division               |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

DIV.Cover
{
    WIDTH: 860PX;
    MARGIN-TOP: 30PX;
    MARGIN-BOTTOM: 80PX;
    TEXT-ALIGN: CENTER;
    MARGIN-LEFT: -30PX;
}


DIV.LogoCollage
{
    WIDTH: 802PX;
    MARGIN-TOP: 4PX;
    MARGIN-BOTTOM: 50PX;
    TEXT-ALIGN: LEFT;
    VERTICAL-ALIGN: CENTER;
    MARGIN-LEFT: 0PX;
}


DIV.ShowHide
{
    POSITION: FIXED;
    WIDTH: 29PX;
    HEIGHT: 21PX;
    TOP: 77PX;
    MARGIN-LEFT: 1137PX;
}


DIV.NavTable
{
    BACKGROUND-COLOR: #F0F0F0;
    POSITION: FIXED;
    WIDTH: 908PX;
    TOP: 77PX;
    MARGIN-LEFT: 220PX;
    MARGIN-BOTTOM: 0PX;
    BORDER-LEFT: 2PX SOLID #3F4B91;
    BORDER-RIGHT: 2PX SOLID #3F4B91;
    BORDER-BOTTOM: 2PX SOLID #3F4B91;
    BORDER-RADIUS: 0PX 0PX 2PX 2PX;
}


DIV.Spacer
{
    HEIGHT: 120PX;
    WIDTH: 1PX;
}


DIV.DoubleSpacer
{
    HEIGHT: 150PX;
    WIDTH: 1PX;
}


DIV.TopSpacer
{
    HEIGHT: 2PX;
    WIDTH: 1PX;
}


DIV.TopDoubleSpacer
{
    HEIGHT: 32PX;
    WIDTH: 1PX;
}


DIV.ParaSpacer
{
    HEIGHT: 35PX;
    WIDTH: 1PX;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
 |               Footer                |
 *~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

FOOTER
{
    MARGIN-BOTTOM: 40PX;
    COLOR: GRAY;
    TEXT-ALIGN: CENTER;
}

FOOTER.Copyright-Text
{
    MARGIN-TOP: 75PX;
    MARGIN-LEFT: -10PX;
    WIDTH: 800PX;
}


FOOTER.Copyright-Text:AFTER
{ CONTENT: "\A9\20 2021-2026 HardwareComputerist.AlterVista.org"; }


FOOTER.Copyright-Data
{
    MARGIN-TOP: -10PX;
    MARGIN-LEFT: 0PX;
    WIDTH: 800PX;
}


FOOTER.Copyright-Data:AFTER
{ CONTENT: "\A9\20 2021-2026 HardwareComputerist.AlterVista.org"; }