/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



@font-face {
                font-family: Pixel Georgia;
                src: url("../fonts/Pixel Georgia.ttf");
            }
@font-face {
                font-family: Pixel Georgia;
                src: url("../fonts/Pixel Georgia Bold.ttf");
                font-weight: bold;
            }
@font-face {
                font-family: AriW9500;
                src: url("../fonts/ari-w9500.ttf");
            }

@font-face {
                font-family: AriW9500;
                src: url("../fonts/ari-w9500-bold.ttf");
                font-weight: bold;
            }
/*This 'html' section colours the scrollbar, I found the default grey hard to see with the background*/
html {
  scrollbar-color: #dcadc2 #b24d7a;
}

body {
  background-color: black;
  background-image: url('../images/xrootweave.png');
	background-position: top;
	background-repeat: repeat;
	background-attachment: fixed;
  font-size: 18px;
  font-family: AriW9500, sans-serif;
  margin: 0;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

a {
  color: #773351;
  font-weight: bold;
}
a:hover { 
  background-color: #dcadc2;
}

h1, h2, h3, h4, h5 {
  color: black;
}

hr {
  border-width: 2px 0 0 0;
  border-style: ridge;
  border-color: #dcdee5; 
}

/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #aeb2c3;
  color: black; 
  border-color: #b24d7a;
  border-style: ridge;
  border-width: 6px;
  outline-color: #dcadc2;
  outline-style: outset;
  outline-width: 2px;
  padding: 1px;
  
  
}

#content {
  padding: 10px 5% 20px 5%;
  border-color: #dcdee5;
  border-width: 1px;
  border-style: outset;
}
/* TEXTPAGE STYLE - this can be deleted if not wanted, and the page should revert to the base padding */
#textpage {
  background-color: white;
  outline-color: #b0b0b0;
  outline-style: inset;
  outline-width: 1px;
  padding: 5px 4% 20px 4%;
  margin: 3% -1% -3%;
  }


/*HEADER STYLE*/
#header {
  background-color: #4992a7;
  padding: 0 3%;
  border-color: #a1c7d1;
  border-width: 1px;
  border-style: outset;
  font-family: Pixel Georgia, serif;
  font-size: 16px;
  
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  display: inline-block;
  margin-right: 1.2em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 5px;
  background-color: inherit;
  
  font-weight: normal;
}
#header li a:hover {
  background-color: #a1c7d1;
}
#header hr {
  border-style: solid; 
  border-width: 3px;
}

/*TITLE BAR STYLE - tbh, this is a mess of trial and error, but it worked. 
 * If you change ANYTHING other than color, it is likely to break the whole style.
 * FOR REFERENCE, if you choose to recolor the images used (CDEBox 1-3):
 * the images must remain 30px by 30px, and the background must stay transparent
 * */
#titlebar {
  background-color: #b24d7a;
  width: 99.99%;
  height: 30px;
  outline-style: outset;
  outline-color: #dcadc2;
  outline-width: 1px;
}
#leftbox {
  float: left;
  height: 38px;
  width: 4.5%;
  border-right-color: #dcadc2;
  border-right-style: groove;
  border-right-width: 2px;
  margin-left: -1px;
  margin-top: -8px;
  background-image: url("../images/CDEbox1.png");
  background-position: 50% 90%;
}
#centralbox {
  float: left;
  height: 100%;
  width: 85%;
  margin-right: 1px;
  text-align: center;
  font-family: Pixel Georgia, serif;
  font-size: 14px;
  color: white;
  padding-top: 1%;
}
#rightbox2 {
  float: right;
  height: 100%;
  width: 4.5%;
  border-left-color: #dcadc2;
  border-left-style: groove;
  border-left-width: 2px;
  background-image: url("../images/CDEbox2.png");
  background-position: 30% 50%;
}
#rightbox1 {
  float: right;
  height: 38px;
  width: 4.5%;
  border-left-color: #dcadc2;
  border-left-style: groove;
  border-left-width: 2px;
  margin-top: -8px;
  background-image: url("../images/CDEbox3.png");
  background-position: 100% 100%;
  background-repeat: no-repeat;
}
#bottomborder {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #773351;
  width: 102%;
  margin-left: -1%;
  margin-top: 1px;
}
#bottomborder2 {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #dcadc2;
  width: 102%;
  margin-left: -1%;
}
 

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 3% 0 3%;
  border-color: #dcdee5;
  border-width: 1px;
  border-style: outset;
}
/*This bit below just hides the horizontal line in the Zonelets pre-filled footer text
 * this allows it to be used with other Zonelets styles on the same site without breaking them-
 * - or needing to edit the script file permanently. the hr isn't necessary with the border I added 
 * can delete this if not using Zonelets, it will inherit the hr style of the whole page*/
#footer hr {
  border-style: hidden;
}