/* 
* master file - use "myth base.css output.css" to compile
* and link to output.css in html
*/

/* reset browser styles */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1.2;
}

ol {
  padding-left: 1.4em;
  list-style: decimal;
}

ul {
  padding-left: 1.4em;
  list-style: square;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* end reset browser styles */

/* generic settings */

* {
  box-sizing: border-box;
}

/* this should contain variables in format of proposed CSS addition for 
*  processing by myth
*/

:root {
  /* brand colours */
  /* remember image dir is relative to css file, not html */
}

html {
  padding-top: 0;
  /*background-image: url(var(--image_dir)/bg_page.png); */
  background-color: rgb(200,200,200);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h4 {
  color: red;
}

body {
  width: auto;
  padding-top: 10px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(150,175,100,0.5);
  background-color: rgba(150,175,100,0.9);
}

.subarticle {
  width: 100%;
  clear: both;
}

h1,
h2,
h3 {
  color: yellow;
  padding-top: 10px;
}

p {
  color: white;
}

header,
footer,
nav {
  display: block;
}

header {
  background-color: rgba(73,58,23,0.7);
  border-radius: 10px;
}

/* messy fix for nav element dropping */

header:after,
nav:after {
  content: " ";
  display: table;
  clear: both;
}

header h1 {
  font-size: 2em;
  color: rgba(220,220,220,0.9);
  text-shadow: 1px 1px 2px rgba(220,220,220,0.9);
  font-weight: bold;
  padding-left: 20px;
  padding-top: 30px;
}

.loginRegister {
  float: right;
  border: 1px solid white;
  border-radius: 5px;
  box-shadow: 0 0 3px white;
  background-color: white;
  margin-right: 50px;
}

.loginRegisterButton {
  font-size: 1.1em;
  display: inline-block;
  background: url(../images/lock-sprite.gif) no-repeat;
  background-position: left top;
  /* background-position: left -26px; */
  /* unlocked */
  padding-left: 30px;
  padding-right: 5px;
  color: red;
  text-decoration: none;
  transition: all 0.3s;
}

.loginRegisterButton:hover {
  box-shadow: none;
  color: black;
  background-color: rgba(175,200,225,1.0);
  font-style: bold;
}

.mainNavbar,
.sideNavbar ul {
  overflow: hidden;
}

.sideNavbar ul {
  margin-top: 10px;
  margin-right: 5px;
  padding-right: 5px;
}

.mainNavbar li,
.sideNavbar li {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
}

.mainNavbar li {
  border-bottom: 1px solid white;
}

.sideNavbar li {
  border: 1px dotted white;
  padding: 5px;
  width: 100%;
}

.mainNavbar a,
.sideNavbar a {
  display: block;
  font-size: 1em;
  color: white;
  font-weight: normal;
  text-decoration: none;
  transition: all .3s;
  width: 100%;
  /* faffing with overrun */
  overflow: auto;
  clear: both;
}

.mainNavbar a {
  float: left;
  padding: 10px;
  border-right: 1px dotted white;
}

.mainNavbar li:last-of-type a {
  border-right: none;
}

.mainNavbar a:hover,
.sideNavbar a:hover {
  background-color: rgba(175,200,225,1.0);
  font-style: bold;
}

.mainNavBar .inactive {
  color: gray;
}

.home .homeLink,
.aboutUs .aboutUsLink,
.yourAccount .yourAccountLink,
.ourDesigners .ourDesignersLink,
.fabrics .fabricsLink,
.news .newsLink,
 {
  background-color: rgba(150,175,100,0.7);
  color: black;
}

.mainFirst {
  float: left;
  width: 80%;
}

.main {
  float: right;
  background-color: rgba(150,175,100,0.9);
  width: 80%;
  padding: 0 5px 0 5px;
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
  clear: left;
}

.main h2 {
  font-size: 1.15em;
  margin-top: 10px;
}

.main h3 {
  font-size: 1em;
  margin-top: 5px;
}

.main p {
  margin-bottom: 5px;
}

aside ul {
  list-style: none;
}

aside h2 {
  font-size: 1em;
  margin-top: 10px;
}

aside h3 {
  font-size: 1em;
  margin-top: 10px;
}

aside p,
aside li {
  font-size: .75em;
  margin-top: 10px;
}

aside li {
  list-style: none;
}

.sidebar1 {
  float: left;
  width: 20%;
  padding: 0 5px 0 5px;
}

.sidebar2 {
  float: right;
  width: 20%;
  padding: 0 5px 0 5px;
}

footer {
  margin-top: 10px;
  font-size: .8em;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;
  background-color: rgba(100,125,100,0.5);
  color: rgb(200,200,200);
  clear: both;
}

nav ul,
header,
footer p,
.contentWrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* media queries to follow */