/*

page width: 820
menu width: 230
content width: 490

logo to top border: 20
logo to content: 52
logo to menu: 20

menu to left: 30
menu to content: 40
menu to aside: 40

content to top border: 30
content to right border: 30
content to text: 30




## Order of styles in css ##

CSS that old browsers can definitely understand (e.g. default fonts and colours).

    @media only screen {
      CSS2 and CSS3 for mobile and desktop. Old browsers don't understand the 'only' media query, all this query does is exclude them.
    }

    @media only screen and (min-width:850px){
      CSS2 and CSS3 for desktop.
    }

## Layout ##

### Desktop ###

    WRAP2 = PAGE
    PAGE = CONTENT
  
       WRAP .. (WRAP contains everything.)
             .|-----------|...PAGE
            . |HEADER|PAGE|  (CONTENT and SIDEBAR are contained by PAGE.)
    SIDEBAR...|------|    |  (MENU and SIDE are contained by SIDEBAR.)
          :   |MENU  |    |  :
          :   |------|    |  :
          :...|SIDE  |    |..:
              |-----------|
              |FOOTER     |
              |-----------|
            ..

WRAP is relatively positioned so that elements within it can be absolutely positioned.

HEADER is absolutely positioned in WRAP so that it appears top-left.

PAGE is displayed as a table with CONTENT and SIDEBAR as cells so that they appear side by side.

The table and cells flip the text-direction rtl/ltr so that CONTENT can appear before SIDEBAR in the html/plain text view.

MENU is absolutely positioned in SIDEBAR with the height of HEADER as its top.

SIDE is padded at the top with the height of HEADER + MENU.

FOOTER appears after PAGE.


### Mobile ###

    HEADER  MENU
    CONTENT
    SIDE
    FOOTER

WRAP is relatively positioned so that elements within it can be absolutely positioned.

MENU is absolutely positioned top-right in WRAP so that it appears alongside the header.

Everything else appears in source order.



## Source ##
    <wrap>
      <header>Header</header>
      <page>
        <content>
          <border>Content</border>
        </content>
        <sidebar>
          <side>Info</side>
          <menu>Menu</menu>
        </sidebar>
      </page>
      <footer>Footer</footer>
    </wrap>

  

## Debugging ##
#header { background-color: pink }
#border, #borderm { background-color: lightgreen }
#side, #sidem { background-color: skyblue }
#menu { background-color: lightcoral }
#menu ul { background-color:powderblue }
#footer { background-color: lightcyan }
#page { background-color: tomato }
#sidebar { background-color: pink }

*/

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* Ye olde browsers and basic defaults */
body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 14px; /* TODO: Figure out what to do with this, probably shouldn't be set on mobile but layout might depend on it */
}
div {
  padding: 14px;
}

/* Defaults + Mobile first */
@media only screen {
  html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
  #menu input{visibility:hidden}
  ul{list-style-type:none;margin:0;padding:0}
  div { padding:0 }

  #wrap {
    position:relative; /* This container has to have a position so that its children can be positioned absolutely */
    padding-top:3em; /* Height of header */

  }

  #header {
    height:3em;
    width:100%;
    padding:0.25rem 0 0 0.5rem;
    position:fixed;
    top:0;
  }
  #header a {
    position:relative;
    text-decoration:none;
    font-size:2em;
    font-style:italic;
    font-weight:bold;
    z-index:999;
  }

  #menu {
    position: fixed;
    top:0;
    right:0;
  }

  #menu label {
    position: absolute;
    display:block;
    top:0.5rem;
    right:0.5rem;
    margin:0 0.25rem;
    content:"";
    width:1.5rem;
    height:1.25rem;
    text-indent:-999rem;
    overflow:visible;

  }

  #menu ul {
    max-height: 0;
    overflow: hidden;
  }

  #menu ul li a {
    display:block;
    text-align:right;
    text-decoration:none;
    font-weight:bold;
    margin:0.5rem 0;
    padding:0.25rem;
  }
  #menu ul li a:hover,#menu ul li a:focus,#menu ul li a:active {
    text-decoration:none;
    font-weight:bold;
    margin:0.5rem 0;
    padding:0.25rem;
  }

  #menu input:checked +label,#menu input:checked ~ label { /* TODO: Work out proper use of + and ~ */
    border-color:transparent;
  }
  #menu input:checked +label:before,#menu input:checked ~ label:before { /* TODO: The X doesn't work in IE11 */
  background-image:url(images/main/close.png);
  background-repeat:no-repeat;
  background-position:center;
  width:24px;
  height:24px;
    display:block;
    position: absolute;
    top:-0.75rem;
    right:0;
    margin:0;
    overflow:auto;
    font-size:2rem;
    line-height:1.5rem;
    text-indent:0;
	content: "";
  }
  #menu input:checked ~ ul {
    max-height:none;
    display:table;
    margin-top:1.5rem;
    padding:0 0.5rem 0 0.5rem;
    overflow:auto
  }

  #border,  #side, #sidem, #footer {
    margin:0.4rem;
    padding:0.7rem;
  }
  
  #borderm {
	  padding:0;
	  margin:0.4rem;
	  background-color:#666;
	  color:#fff;}
  
  #footer { margin-bottom: 2rem }

  #guild {padding:15px;}
  
  #guild a.home {
    text-decoration: none;
  }

  #side h4, #sidem h4 {
    padding:0.5rem 0 0.5rem 0;
  }

  #footer ul { display:none } /* Hide the footer images on mobile */
  
  .quotet {
    padding:1em;
  }

  h3,h2 {
    font-size: 16px; /* TODO: Figure out what to do with this, probably shouldn't be set on mobile but layout might depend on it */
    font-style: italic;
    margin:0 0 1em 0;
  }
  h2 {
    font-size: 20px; /* TODO: Figure out what to do with this, probably shouldn't be set on mobile but layout might depend on it */
  }

  #content table {
    width:100%;
    margin:0 0 20px 0;
    padding:0;
  }
  #content table.one {
    width:100%;
    margin:0;
    padding:0;
  }
  #content table td {
    margin:0;
    padding:10px 0 5px 0;
  }
  .hiddenlrg {
	display: inline;
    opacity: 1;
    visibility: visible;}
  
}
@media only screen and (min-width:600px){
	
	#wrap {
    width:550px;
    margin:auto
  }

  #header,#menu {
    width:549px
  }
  
  #menu {
    position: fixed;
    top:0;
    right:auto;
    margin:auto;
    background:tranparent;
  }
  #menu ul {
    float:right;
    border-top:0.5rem solid transparent;
  }

}

/* Desktop / large screens */
@media only screen and (min-width:850px){

  body {
    height:101vh;
  }

  #wrap {
    width:820px;
    margin:20px auto 40px auto;
    padding:0;
  }

  #header,#side, #sidem,#menu {width:230px}
  #side, #sidem {
    margin:0;
    border:0;

  }

  #header {
    position:absolute;
    top:18px;
    left:30px;
    z-index:2;
    height:144px;
    padding:0
  }

  #menu {
    position:absolute;
    top:144px;
    left:0;
    right:auto;
    /*height:630px;*/
  }
  #menu ul,#menu input:checked ~ ul {
    max-height: none;
    overflow: auto;
    background-color:inherit;
    margin:0;
    padding:0;
    display:initial;
    border:0;
    float:none;
  } 
  
  #menu label,#menu input { display:none }

  #header a,#menu ul li a,#menu ul li a:hover,#menu ul li a:focus,#menu ul li a:active {
    margin:0 0 10px 0;
    border:0;
    padding:0;
    display:block;
    text-align:left;
    text-decoration: none;
    height: 52px;
    font-size: 16px;
    font-style: italic;
    background-repeat: no-repeat;
    text-indent: -999px;
    outline: none;
  }
  
  
  #menu #vouchers {
    border:1px solid;
    border-radius: 7px;
    text-indent: 0;
  }
  #menu #vouchers span {
    display:block;
    text-align:center;
    margin:15px auto;
  } 
  
  #page {
    display:table;
    direction:rtl;
    position:relative;
  }

  #sidebar,#content {
    display:table-cell;
    vertical-align:top;
    direction:ltr;
  }

  #content {
    padding:0;
  }
  #border {
    width:490px;
    padding:10px 30px;
    margin:0 5px 0 0;
  }
  #borderm {
	 width:490px;
    padding:0;
    margin:0;
  }
  
  #sidebar {
    position:relative;
    padding:0 40px 0 0;
  }

  #side {
    padding-top:870px;
  }
  #sidem {
    padding-top:740px;
  }

  #side h4, #sidem h4 {
    padding:10px 0 10px 0;
  }
  
  #footer ul {
    display:table;
    width:780px;
    margin-top:20px;
  }
  #footer ul li {
    display:table-cell
  }
  .hiddenlrg {
	display: none;
	width: 0;
	height: 0;
	opacity: 0;
	visibility: collapse;}
	
	  #guild {padding:0;}
  
}
/*cate-------*/
.image {
    max-width: 100%;
    height: auto;
}
.txtgry {color:#888}

ul.list {
	list-style-type:disc;
	margin-left:30px;
	}
ul.list li {padding:5px;}