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

    MICHAEL'S HANDS COLORS

    Ported from the classic-ASP site's Design/Custom.css so the
    NamtiraWeb layout keeps the look the site has always had:
    white text over a fixed blue background photo, a transparent
    sidebar in light green, and white content panels with
    orange-red headings.

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

:root {
	/****************************************************************
        NESTED PANEL DEPTH
        LightGreen on the panel blue is 6.3:1; past about 10% lightening it
	   falls under AA, so the steps are small (4/7/10/13).
    ****************************************************************/
	--detail-lighten-base: 4%;
	--detail-lighten-step: 3%;

	/****************************************************************
        THEME IMAGES
        Michael's banner is a 221x100 PNG pinned to the top left, so the
        header is far shorter than a site with full-width banner art.
    ****************************************************************/
	--img_Body_Background: url('/Design/Images/Page_Background.jpg');
	--img_Body_Background_Position: left top;
	--img_Body_Background_Repeat: no-repeat;
	--img_Body_Background_Size: cover;
	--img_Header_Banner: url('/Design/Images/Banner.png');
	--img_Header_Banner_Position: left top;
	--Header_Height: 140px;

	/****************************************************************
        BODY
        The blue page photo is fixed and does not repeat, with the
        solid blue showing through anywhere the image does not reach.
    ****************************************************************/
	--clr_Body_Background_Top: #227AC4;
	--clr_Body_Background_Bottom: #227AC4;
	--clr_Body_Background_Color: #227AC4;
	--clr_Body_Background_Image: url('/Design/Images/Page_Background.jpg');
	--clr_Body_Heading: #0A67A3;
	--clr_Body_Text: white;
	--clr_Body_Link: DarkSlateBlue;
	--clr_Body_Accent: white;
	/****************************************************************
        HEADER
        Banner.png carries the branding, so the header itself is
        transparent and its text is white with a midnight-blue shadow.
    ****************************************************************/
	--clr_Header_Background: transparent;
	--clr_Header_SiteTitle: white;
	--clr_Header_PageTitle: white;
	--clr_Header_Heading: white;
	--clr_Header_Text: white;
	--clr_Header_Link: white;
	--clr_Header_Accent: LightGreen;
	--clr_Header_Shadow: MidnightBlue;
	/****************************************************************
        NAVIGATION
    ****************************************************************/
	--clr_Nav_Background: transparent;
	--clr_Nav_Link: white;
	--clr_Nav_Visited: var(--clr_Nav_Link);
	/****************************************************************
        SIDEBAR
        Transparent over the page photo, in bold light green.
        The gateway buttons are white on dark green.
    ****************************************************************/
	--clr_Sidebar_Background: transparent;
	--clr_Sidebar_Heading: DarkBlue;
	--clr_Sidebar_Text: LightGreen;
	--clr_Sidebar_Link: DarkBlue;
	--clr_Sidebar_Accent: LightGreen;
	--clr_Sidebar_Button: DarkGreen;
	--clr_Sidebar_Button_Link: white;
	--clr_Sidebar_Button_Hover: LightGreen;
	--clr_Sidebar_Button_Hover_Link: DarkGreen;
	/****************************************************************
        CONTENT
    ****************************************************************/
	--clr_Content_Background: white;
	--clr_Content_Heading: #FF4100;
	--clr_Content_Text: #03426A;
	--clr_Content_Link: DarkSlateBlue;
	--clr_Content_Accent: Teal;
	--clr_Content_Visited: DarkSlateBlue;
	/****************************************************************
        CODE BLOCKS
    ****************************************************************/
	--clr_Code_Background: black;
	--clr_Code_Text: greenyellow;
	/****************************************************************
        PANELS
        Michael's insert bars and quotes are midnight blue on white.
    ****************************************************************/
	/* Lighter than the #03426A body-text blue, because the panels fill large
	   areas -- pagebar rows, sitemap nodes -- and the darker navy was heavy at
	   that size. The hue is 205 degrees, sampled from Page_Background.jpg
	   itself (the water averages #2686CC), so the panels read as the same
	   blue as the photo behind them. Clears WCAG AA comfortably: 6.3:1
	   against the light green text, 8.9:1 against white. */
	--clr_Panel_Background: #154D75;
	--clr_Panel_Background_Light: var(--clr_Content_Background);
	--clr_Panel_Text: LightGreen;
	/* Used only by the PageBar hover states, which fill with the navy panel
	   color -- so this has to be light, not another blue. */
	--clr_Panel_Text_Light: white;
	--clr_Panel_Link: LightSkyBlue;
	--clr_Panel_Heading: white;
	--clr_Panel_Accent: LightGreen;
	/****************************************************************
        PAGE BARS
        The classic site outlined these with PageHeader.jpg, a white sheet
        of paper with a curling corner. The graphic could not survive the
        solid fill the bars take on hover, so the outline is a border now
        and the sheet is a pale blue descending gradient.
    ****************************************************************/
	--clr_PageBar_Top: #E4EFFA;
	--clr_PageBar_Bottom: white;
	--clr_PageBar_Edge: #E2E2E2;
	/****************************************************************
        TABLES
    ****************************************************************/
	--clr_Table_Background: #a7cfde;
	--clr_Table_Background_Light: #C8DEE5;
	--clr_Table_MainText: black;
	--clr_Table_AccentText: Teal;
}

/********************************************************************
    BASE COLOR APPLICATION
*********************************************************************/

body { color: var(--clr_Body_Text); }

a { color: var(--clr_Body_Link); }
a:visited, a:hover, a:active { color: var(--clr_Body_Accent) }

/* Michael's header is the banner graphic, so nothing paints behind it. */
header {
	background-color: var(--clr_Header_Background);
	color: var(--clr_Header_Text);
}

h1 { color: var(--clr_Header_SiteTitle); }
h2, h3 { color: var(--clr_Header_PageTitle); }

/* The footer sits directly on the page photo, as the old Trailer did. */
footer {
	background-color: transparent;
	color: var(--clr_Sidebar_Text);
	border-top: 1px solid LightGreen;
}

footer p.Copyright { color: var(--clr_Sidebar_Text); }