/* Style sheets for Michael Howarth's website   michaelhowarth.eu */
/* Screen 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 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 */



/* Variable definitions (not yet working) */
:root {
    --laptopthreshold: 701px; 
}
/* var() does not work with @media */
/* Custom environmental variable definitions - env() instead of var() (?)*/



/*  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 paragraph text is Arial */

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



/* Standard links */

a:link
    {
    text-decoration: underline;
    color: rgb(50,50,150);
    }

a:visited, a:active
    {
    text-decoration: underline;
    color: rgb(60,60,100);
    }

a:hover
    {
    text-decoration: underline;
    color: blue;
    }

/* On a device that has a mouse pointer, set the links to be not underlined unless hovering: */

@media (any-pointer: fine) {
a:link
    {
    text-decoration: none;
    color: rgb(50,50,200);
    }
a:visited, a:active
    {
    text-decoration: none;
    color: rgb(50,50,100);
    }
a:hover
    {
    text-decoration: underline;
    color: blue;
    }
}



/* Define styles when displayed in laptop mode, and when displayed in mobile mode */
/*  */
/* "Laptop" and "mobile" are here defined by the element/browser width in pixels */
/* While I could instead use min-device-width, 1. I prefer my software to respond to changes  */
/* in browser width, & 2. min-device-width now deprecated - see developer.mozilla.org) */

@media (min-width: 701px) { 
div.size4laptop
    {
    display: block;
    }
}
@media not (min-width: 701px) { 
div.size4laptop
    { 
    display: none; 
    } 
}



@media (min-width: 701px) { 
div.size4mobile
    {
    display: none; 
    }
}
@media not (min-width: 701px) { 
div.size4mobile
    { 
    display: block;
    } 
}



/*                                                         */
/*        Header with composite pic                        */
/*                                                         */
/*        Header with composite pic: laptop mode           */
/*           - Uses conventional default Header 1 settings */
/*           - Pic size independent of browser width       */
/*                                                         */
/*        Header with composite pic: mobile mode           */
/*           - Uses conventional default Header 2 settings */
/*           - Pic size scales to be 80% of browser width  */



/*                                 */
/*       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 when in laptop mode  */
/* Base <h1> on the conventional default Header 1 settings */
@media (min-width: 701px) { 
    h1
    {
    color: black;
    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 */
    }
}


/* <h1> definition when in mobile mode  */
/* Base <h1> on the conventional default *** Header 2 *** settings  :-) */
@media not (min-width: 701px) { 
    h1
    {
    color: black;
    font-family: arial, sans-serif;
    font-weight: bold;
    font-style: normal;     /* Not italic, not oblique */
    font-size: 1.5em;       /* Usual conventional default <h2> settings (see https://www.w3schools.com/tags/tag_hn.asp) */
    margin-top: 1.83em;     /* Usual conventional default <h2> setting of 0.83em, plus 1em for nice spacing above */
    margin-bottom: 1.83em;  /* Usual conventional default <h2> setting of 0.83em, 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 when in laptop mode  */
/* Picture size independent of browser width              */
@media (min-width: 701px) { 
div.CompositePicBorder
    {
    display: block;
    margin: auto;
    width: 455px;
    height: 227px;
    }
}


/* Composite Picture size definition when in mobile mode  */
/* Picture size scales to be 80% of browser width         */
@media not (min-width: 701px) { 
div.CompositePicBorder
    {
    display: block;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    }
}



/*                                 */
/*       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, for lists, is a yellow star from the EU flag */
.refbullet
    {
    list-style-image: url(Yellowstar_24x24.bmp);
    }


/* 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 & Quotes                                 */
/*                                                         */
/*        EU Flag & Quotes: laptop mode                    */
/*           - The pair displayed side-by-side             */
/*           - EU flag with thin blue border & box shadow  */
/*                                                         */
/*        EU Flag & Quotes: mobile mode                    */
/*           - EU flag displayed above quotes              */
/*           - EU flag horizontally centred on page        */
/*           - EU flag with thin blue border & box shadow  */
/*           - Quotes with thin blue border & box shadow   */



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

/* EU Flag Area definition when in laptop mode */
@media (min-width: 701px) { 
div.EUflagArea
    {
    display: block;
    width: 40%; 
    float: left; 
    padding-left: 5%;
    padding-top: 3%;      /* lowers the EU flag a smidge, looking better balanced when the quotes are adjacent right */
    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 Area definition when in mobile mode */
@media not (min-width: 701px) { 
div.EUflagArea
    { 
    display: block;
    width: 100%; 
    float: left; 
    overflow: hidden; 
    } 
}


/* EU Flag and its border - set to be white, so that the white background on the animated GIF isn't visible */

/* EU Flag Border definition when when in laptop mode, moderate width window */
@media (min-width: 701px) { 
div.EUflagborder 
    {
    display: block; 
    margin-left: 5%;      /* 5% margin outside the white box with 1px blue border looks good on moderate width screens */
    margin-right: 5%; 
    border: 1px solid blue;
    border-radius: 5px;
    box-shadow: 5px 5px 10px grey;
    padding-left: 10px;   /* Notional 10px padding left and right */
    padding-right: 10px;
    padding-top: 10px;    /* 10px top & btm padding, together with space above & below the <p></p> in which the EUflag.gif is embedded looks nice */
    padding-bottom: 10px;
    background-color: white;  /* EU flag sits waving inside a white box with 1px blue border & grey shadow */
    overflow: hidden;
    }
}


/* EU Flag Border margins when in laptop mode, wide window */
@media (min-width: 1101px) { 
div.EUflagborder 
    {
    border: 1px solid dimgrey; /* 30/10/23: grey colour is only for test purposes */
    margin-left: 15%;     /* Larger margins outside the white box with 1px blue border look nicer on wide screens */
    margin-right: 15%;    /* All other attributes inherited from the @media (min-width: 701px) section above */
    }
}


/* EU Flag Border margins when in laptop mode, ultra wide window */
@media (min-width: 1501px) { 
div.EUflagborder 
    {
    border: 1px solid black; /* 30/10/23: black colour is only for test purposes */
    margin-left: 20%;     /* Larger margins outside the white box with 1px blue border look nicer on ultra wide screens */
    margin-right: 20%;    /* All other attributes inherited from the @media (min-width: 701px) section above */
    }
}


/* EU Flag Border definition when in mobile mode, moderate width window */
@media not (min-width: 701px) { 
div.EUflagborder
    { 
    display: block; 
    width: 53%; 
    float: left; 
    margin-left: 20%; 
    margin-right: 20%; 
    margin-bottom: 20%;       /* Insert nice gap underneath EU flag box, ie between it and Quotes box, in mobile mode*/
    border: 1px solid blue; 
    border-radius: 5px; 
    box-shadow: 5px 5px 10px grey;
    padding-left: 3%; 
    padding-right: 3%; 
        /* padding is inside the element; border lies outside the element; margin lies outside the border */
        /* Note sum of the widths = 20% + 1px + ( 3% + 53% + 3% ) + 1px + 20% = 99% + 2px => fits inside the screen 100% width */
    background-color: white;  /* EU flag sits waving inside a white box with 1px blue border & grey shadow */
    overflow: hidden; 
    } 
}


/* EU Flag Border margins when in mobile mode, narrow window */
@media not (min-width: 551px) { 
div.EUflagborder 
    {
    width: 73%;
    border: 1px solid blue;
    margin-left: 10%;     /* Smaller margins outside the white box with 1px blue border look nicer on narrow screens */
    margin-right: 10%;    /* All other attributes inherited from the @media not (min-width: 701px) section above */
        /* Note sum of the widths = 10% + 1px + ( 3% + 73% + 3% ) + 1px + 10% = 99% + 2px => fits inside the screen 100% width */
    }
}



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

/* Quotes Area definition when in laptop mode */
@media (min-width: 701px) { 
div.QuotesArea
    {
    display: block;
    width: 50%; 
    float: right; 
    padding-right: 5%; 
    overflow: hidden; 
    }
}


/* Quotes Area definition when in mobile mode */
@media not (min-width: 701px) { 
div.QuotesArea
    { 
    display: block; 
    width: 89%; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
    border: 1px solid blue; 
    border-radius: 5px; 
    box-shadow: 5px 5px 10px gray;
    padding: 3%; background-color:#ACC2F0;>     /* slightly darker blue #ACC2F0 for contrast */
        /* "overflow: hidden;" omitted so that box shadow is visible */
        /* Note sum of the widths = 2% + 1px + ( 3% + 89% + 3% ) + 1px + 2% = 99% + 2px => fits inside the 100% width */
    } 
}


/* 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 styles  */
/*                                 */

ul.hamburgerUL {
    list-style-type: none;          /* no bullet for each list element */
    margin: 0;
    padding: 0; 
    }

.HamburgerDropdownContent {
    display: none;                  /* Dropdown box not initially visible (until hover event, see code below) */
    position: absolute;             /* When the box is visible, do not adjust or move the other elements */
    right: 8px;                     /* Aligns the box RHS nicely with the mid-blue language bar RHS */
    background-color: #4476DD;      /* Darker blue for the box */
    min-width: 120px;               /* A nice width for both laptop & mobile, with & without mouse pointer */
    box-shadow: 0px 5px 10px green; /* Shadow adds a little interest to the box */
    z-index: 1;                     /* Dropdown box sits on top of all other elements */
    }

/* On hover over the hamburger, display the dropdown box */
.hamburgerLI:hover .HamburgerDropdownContent {
    display: block;
    }



/* Define styles for the language flags */
/*                                      */
/* In particular, do something exciting when mouse hovers over each (non-greyed out) language flag */
/* i.e. spinning flags                                                                             */

/* German language flag (always rotates about the X-axis)*/

.DElanguage {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the DE flag into a smaller space */
@media (any-pointer:fine) {
.DElanguage {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.DElanguage a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("Flag_DE76x52.bmp");
    background-size: cover;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    -o-transition: all 1.2s;
    transition: all 1.2s;
    }
.DElanguage:hover a {
    -webkit-transform: rotateX(720deg);
    -moz-transform: rotateX(720deg);
    -ms-transform: rotateX(720deg);
    -o-transform: rotateX(720deg);
    transform: rotateX(720deg);
    }

.DElanguageGrey {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the grey DE flag into a smaller space */
@media (any-pointer:fine) {
.DElanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.DElanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("FlagGreyDE76x52.bmp");
    background-size: cover;
    }


/* French language flag (always rotates about the Y-axis) */

.FRlanguage {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the FR flag into a smaller space */
@media (any-pointer:fine) {
.FRlanguage { 
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.FRlanguage a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("Flag_FR76x52.bmp");
    background-size: cover;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    -o-transition: all 1.2s;
    transition: all 1.2s;
    }
.FRlanguage:hover a {
    -webkit-transform: rotateY(720deg);
    -moz-transform: rotateY(720deg);
    -ms-transform: rotateY(720deg);
    -o-transform: rotateY(720deg);
    transform: rotateY(720deg);
    }

.FRlanguageGrey {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the grey FR flag into a smaller space */
@media (any-pointer:fine) {
.FRlanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.FRlanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("FlagGreyFR76x52.bmp");
    background-size: cover;
    }


/* Spanish language flag */

.ESlanguageX {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the ES flag (rotation about the X-axis) into a smaller space */
@media (any-pointer:fine) {
.ESlanguageX {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.ESlanguageX a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("Flag_ES76x52.bmp");
    background-size: cover;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    -o-transition: all 1.2s;
    transition: all 1.2s;
    }
.ESlanguageX:hover a {
    -webkit-transform: rotateX(720deg);
    -moz-transform: rotateX(720deg);
    -ms-transform: rotateX(720deg);
    -o-transform: rotateX(720deg);
    transform: rotateX(720deg);
    }

.ESlanguageY {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the ES flag (rotation about the Y-axis) into a smaller space */
@media (any-pointer:fine) {
.ESlanguageY {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.ESlanguageY a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("Flag_ES76x52.bmp");
    background-size: cover;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    -o-transition: all 1.2s;
    transition: all 1.2s;
    }
.ESlanguageY:hover a {
    -webkit-transform: rotateY(720deg);
    -moz-transform: rotateY(720deg);
    -ms-transform: rotateY(720deg);
    -o-transform: rotateY(720deg);
    transform: rotateY(720deg);
    }

.ESlanguageGrey {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the grey ES flag into a smaller space */
@media (any-pointer:fine) {
.ESlanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.ESlanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("FlagGreyES76x52.bmp");
    background-size: cover;
    }


/* English language flag */


.ENlanguageX {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the EN flag (rotation about the X-axis) into a smaller space */
@media (any-pointer:fine) {
.ENlanguageX {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.ENlanguageX a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("Flag_UK76x52.bmp");
    background-size: cover;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    -o-transition: all 1.2s;
    transition: all 1.2s;
    }
.ENlanguageX:hover a {
    -webkit-transform: rotateX(720deg);
    -moz-transform: rotateX(720deg);
    -ms-transform: rotateX(720deg);
    -o-transform: rotateX(720deg);
    transform: rotateX(720deg);
    }

.ENlanguageY {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the EN flag (rotation about the Y-axis) into a smaller space */
@media (any-pointer:fine) {
.ENlanguageY {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.ENlanguageY a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("Flag_UK76x52.bmp");
    background-size: cover;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    -ms-transition: all 1.2s;
    -o-transition: all 1.2s;
    transition: all 1.2s;
    }
.ENlanguageY:hover a {
    -webkit-transform: rotateY(720deg);
    -moz-transform: rotateY(720deg);
    -ms-transform: rotateY(720deg);
    -o-transform: rotateY(720deg);
    transform: rotateY(720deg);
    }

.ENlanguageGrey {
    width:  76px;
    height: 52px;
    margin: 10px;
    }
/* On a device that has a mouse pointer, squeeze the grey EN flag into a smaller space */
@media (any-pointer:fine) {
.ENlanguageGrey {
    width:  38px;
    height: 26px;
    margin:  5px;
    }
    }
.ENlanguageGrey a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("FlagGreyUK76x52.bmp");
    background-size: cover;
    }