/* Style sheets for Michael Howarth's website   michaelhowarth.eu */
/* Print style */

/* Derived from my University of Surrey webpages */
/* This style sheet 24 September 2022 */
/* Amended to treat devices with and without mouse pointer differently 24 November 2022 */
/* Different laptop and mobile behaviours implemented 25 November 2022 */
/* Hamburger dropdown menu for language flags 3 December 2022 */
/* div classes for Header, Composite Pic, Principal List, EU Flag & Quotes 9-13 September 2023 */



/*  9 Nov 2023: Headers: <h1> used only within the HeaderArea div class - see below */
/* 24 Nov 2022: All fonts 100%, since Viewport tag now implemented */



/* Normal paragraphs are to be Arial */

div.UseArialEverywhere p
	{
	font-family: arial, sans-serif;
	color: black;
	}



/* Standard links */

a:link, a:visited, a:active, a:hover
	{
	text-decoration: underline;
	color: black;
	}



/* The web site's responsive design renders the webpage differently on laptops and */
/* mobiles, and on devices that have or do not have a mouse = fine pointer */
/* */
/* For print purposes, assume the paper is A4 or Letter or Legal size */
/* Scale is therefore such that we treat the print device as a laptop with a fine pointer */

div.size4laptop
    { 
    display: block;
    } 

div.size4mobile
    { 
    display: none; 
    } 



/*                                 */
/*       Header Area               */
/*                                 */

/* Header Area definition: 9 Nov 2023: now just a basic block, independent of whether laptop or mobile mode  */
div.HeaderArea
    {
    display: block;
    width: 100%;
    float: left; 
    }


/* <h1> definition (printer treated as laptop)  */
/* Base <h1> on the conventional default Header 1 settings */
h1
    {
    color: MidnightBlue;    /* And why not? Just for a bit of fun */
    font-family: arial, sans-serif;
    font-weight: bold;
    font-style: normal;     /* Not italic, not oblique */
    font-size: 2em;         /* Usual conventional default <h1> settings (see https://www.w3schools.com/tags/tag_hn.asp) */
    margin-top: 1.67em;     /* Usual conventional default <h1> setting of 0.67em, plus 1em for nice spacing above */
    margin-bottom: 1.67em;  /* Usual conventional default <h1> setting of 0.67em, plus 1em for nice spacing below */
    }



/*                                 */
/*     Composite Picture Area      */
/*                                 */

div.CompositePicArea
    { 
    display: block;
    width: 100%; 
    float: left; 
    overflow: hidden;  
    img {                  /* In the CompositePicArea div, an image will occupy 100% of   */
        width: 100%;       /* the width of the element in which it is located (namely,    */
        }                  /* in this case, 100% of the CompositePicBorder element width) */
    } 


/* Composite Picture size definition (print device treated as laptop)  */
/* Picture size independent of browser / page width                    */
div.CompositePicBorder
    {
    display: block;
    margin: auto;
    width: 455px;
    height: 227px;
    }



/*                                 */
/*       Principal List Area       */
/*                                 */

div.PrincipalListArea {
    display: block;
    width: 100%; 
    float: left; 
    overflow: hidden;  
    }


/* Principal List Area: top and tail */
div.PLATopAndTail
    {
    width: 90%; 
    float: left; 
    padding-left:  5%; 
    padding-right:  5%; 
    overflow: hidden; 
    }


/* Principal List Area: main list */
div.PLABulletList
    {
    width: 80%; 
    float: left; 
    padding-left: 10%; 
    padding-right: 10%; 
    overflow: hidden; 
    }


/* Bullet style: use built-in style when printing */


/* Short sections of text, where I don't want a line break */
span.ohneBruch
        {
        white-space: nowrap;
        }

span.ohneBruchwithspacing
        {
        white-space: nowrap;
        line-height: 200%;
        }



/*                                 */
/*          EU Flag Area           */
/*                                 */

/* EU Flag Area definition (print device treated as laptop) */
div.EUflagArea
    {
    display: block;
    width: 40%; 
    float: left; 
    padding-left: 5%;
    padding-top: 3%; 
    text-align:center;        /* apparently the text-align is needed for IE browser */
                              /* In laptop mode the box shadow extends beyond the EUflagArea div, so omit overflow:hidden */
    }

/* EU Flag and its border - set to be white */

div.EUflagborder 
    {
    display: block;
    width: 227px;
    height: 180px;
    padding: 10px;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 5px 5px 10px grey;
    }



/*                                 */
/*          Quotes Area            */
/*                                 */

/* Quotes Area definition (print device treated as laptop) */
div.QuotesArea
    {
    display: block;
    width: 50%; 
    float: right; 
    padding-right: 5%; 
    overflow: hidden; 
    }


/* Quotes Area: Quotations */
div.QuotesAreaQuotation
    {
    width: 100%; 
    float:left; 
    }


/* Quotes Area: Comments   */
div.QuotesAreaComment
    {
    width: 70%; 
    float: left; 
    padding-left: 15%; 
    padding-right: 15%; 
    }


/* Hamburger dropdown menu: print device treated as laptop, so no hamburger :-) */



/* Define styles for the language flags */
/* For print purposes, it is sufficient to render the flags :-) */
/* However, "background" is usually ignored in rendering for print */
/* (both for the language flags, and for the EU flag above) */
/* So for each div tell the printer that the background image is important */
/* Also, for printing only, give each flag a 2px border */

.DElanguage { 
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid black;
    }
.DElanguage a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important;  /* Chrome, Safari 6-15.3, Edge (apparently) */
    color-adjust: exact !important;                /* Firefox 48-96  (apparently) */
    print-color-adjust: exact !important;          /* Firefox 97+, Safari 15.4+ (apparently) */
    background: url("Flag_DE76x52.bmp");
    background-size: cover;
    }
.DElanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid grey;
    }
.DElanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("FlagGreyDE76x52.bmp");
    background-size: cover;
    }

.FRlanguage { 
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid blue;
    }
.FRlanguage a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("Flag_FR76x52.bmp");
    background-size: cover;
    }
.FRlanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid grey;
    }
.FRlanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("FlagGreyFR76x52.bmp");
    background-size: cover;
    }

.ESlanguageX {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid red;
    }
.ESlanguageX a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("Flag_ES76x52.bmp");
    background-size: cover;
    }
.ESlanguageY {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid red;
    }
.ESlanguageY a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("Flag_ES76x52.bmp");
    background-size: cover;
    }
.ESlanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid grey;
    }
.ESlanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("FlagGreyES76x52.bmp");
    background-size: cover;
    }

.ENlanguageX {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid blue;
    }
.ENlanguageX a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("Flag_UK76x52.bmp");
    background-size: cover;
    }
.ENlanguageY {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid blue;
    }
.ENlanguageY a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("Flag_UK76x52.bmp");
    background-size: cover;
    }
.ENlanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    border:  2px solid grey;
    }
.ENlanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-print-color-adjust: exact !important; 
    color-adjust: exact !important;
    print-color-adjust: exact !important;
    background: url("FlagGreyUK76x52.bmp");
    background-size: cover;
    }