/* Original template sourced from ... http://writeside.net */
/* Stu's css file for my personal website. */


/* Custom Font Stuff */
/* http://code.adonline.id.au/safely-add-any-font-to-your-website */

@font-face {
 font-family: customfont1;
 src: url("fonts/aescrawl.eot")
}
@font-face {
 font-family: customfont1;
 src: url("fonts/aescrawl.ttf")
}


/* Other Stuff */


*{
 padding:0;
 margin:0;
 outline:0;
}

body{
 background:#000 url(img/sunset.jpg) top left no-repeat;
 font:0.8em 'Trebuchet MS', Arial, sans-serif;
 line-height:1.5em;
 color:#898989;
}

a{
 color:#B07A34;
 text-decoration:none;
}

a:hover, a:active{
 color:#898989;
 text-decoration:underline;
}

#header{
 float:left;
 width:240px;
 margin:15px;
}

#header .main{
 font-size:1.5em;
 border-bottom:1px solid #B07A34;
 padding:10px 10px 10px 2px;
}

#header .subtitle{
 font-size:1em;
 font-variant:small-caps;
 padding:2px;
}

#wrapper{
 margin:15px auto 0 300px;
 width:50%;  /* old value was ... width:460px; */
 background-color : #FFFED5;
}

#toplinks{
 color:#B07A34;
 margin:5px auto 0 300px;
}

#toplinks ul li{
 list-style:none;
 display:inline;
 padding:2px 12px 2px 2px;
}

#toplinks ul li a:hover, a:active{
 /* background:url(img/links-hover.gif) left no-repeat; */
}

#toplinks form{
 display:inline;
}

input{
 border:1px solid #B07A34;
 padding:2px;
 color:#B07A34;
}

input:hover{
 border: 1px solid #898989;
}

#text{
 min-height:400px;
 padding:10px;
}

#text p{
 padding:5px;
}

#headline {
 margin:auto;
 width:75%;
 margin-bottom: 1em;
}

.headlinetext {
 font-family: customfont1, "Trebuchet MS", sans-serif, Arial, "Times New Roman", Times, serif;
 font-size:1.6em;
 text-align:left;
 color:#000000;
 margin: 0px 2px;
}

.subheading {
 font-family: "Trebuchet MS", sans-serif, Arial, "Times New Roman", Times, serif;
 /* text-align:center; */
 color:#000000;
 margin-top:-10px;
 margin-bottom:-5px;
}

.subheading1 {
 /* used on achievements page */
 color:#000000;
 font-size: 1em;
 margin-top: 1em;
 margin-bottom:-5px;
}

h1, h2, h3{
 padding:5px;
 color:#B07A34;
}

h1{
 font-size:1.2em;
 font-variant:small-caps;
 border-bottom:1px solid #B07A34;
 text-align:center;
}

h2{
 font-size:1.05em;
}

h3{
 font-size:1em;
}

#text ul, ol{
 padding-left:12px;
 margin-left:12px;
}

blockquote {
 margin:2px 5px;
 padding-left:5px;
}

.meta{
 text-align:right;
 color:#B07A34;
 font-size:0.79em;
}

.meta a{
 text-decoration:underline;
}

#footer{
 font-size:0.79em;
 text-align:center;
 margin:10px;
 margin-top: 2em;
 height:25px;
 line-height:25px;
 border-top:1px solid #B07A34;
}

#footer a { color: #898989; text-decoration: none; }

blockquote.pad {
 border-left: 0px;
 margin-top: -0.5em;
 margin-bottom: 1em;
}

blockquote.padspecial {
 border-left: 0px;
 margin: 0em 0.5em 1em 0.5em;
 padding: 0px 25px;
}

li.topline {
 margin-top: 10px;
 padding-top: 10px;
 /*width:25%;*/
 /*border-top:1px solid #547990;*/
}
div.c1 {text-align: center}

#soulmate {
 margin-top: 1.25em;
 margin-bottom: 1.5em;
 text-align: center;
 color: #264066;
 font-weight: bold;
}


/* other pages */

.intro {
 font-family: "Trebuchet MS", sans-serif, Arial, "Times New Roman", Times, serif;
 color:#000000;
 margin-top:-10px;
 margin-bottom:10px;
}
.ending {
 font-family: "Trebuchet MS", sans-serif, Arial, "Times New Roman", Times, serif;
 color:#000000;
 margin-top:1.5em;
 margin-bottom:10px;
}

#lessons {
 margin:auto;
 margin-top: 1em;
}

#lessons ul {
 margin-top: 10px;
}

#lessons ul li {
 /* padding-bottom: 8px; */
 margin-bottom: 1.5em;
}


/* spacing for paragraphs */

.smallbreak {
 margin-top: -0.25em;
}

.singlebreak {
 margin-top: 1.25em;
}

.largebreak {
 margin-top: 2em;
}

/* class to make images fit to size of the div */
.resize_fit_center {
 max-width:100%;
 max-height:100%;
 vertical-align: middle;
}
div.imgcontainer {
 margin: auto;
 width: 90%;
 padding: 5px 0px;
 align: center;
}

/* hosting provider - stuff that goes in the footer */
#hostingprovider {
 margin: auto;
padding: 1em 0em;
}

/* RESPONSIVE MENU */
/* 1920px == 24" screen, 1366px == 15" screen, 1280px == my standard desktop, 1024px == a desktop or ipad - landscape */
/* 980px == a tablet, 800 == my tablet in portrait view  */
/* 768px == ipad - portrait, 600px == samsung galaxy tab, or a phone  */

@media (max-width: 1279px) {
 #header { width:25%; }
 #toplinks{ margin:5px auto 0px 0px; }
 #wrapper{
  clear: both;
  margin:15px auto 0px 0px;
  width:90%;
  }
}