/*This is the core style sheet of the Ian Vine site.*/


body {
background-color: #ffffff;
color: #000000;
padding: 10px;
text-align: center;
font-family: helvetica neue, sans-serif, Arial, Geneva;
font-size: 100%;
font-weight: normal;
}

#header {
margin: auto;
width: 62.5em; /* 1000px  / 16px = 62.5 */
border-bottom: 2px #993300 solid;
}

#content {
top: 0px;
text-align: left;
margin: auto;
padding: 5px;
width: 62.5em; /* 1000px  / 16px = 62.5 */
}

#main-text {
float: left;
width: 43.75em; /* 700px  / 16px = 62.5 */
padding: 0px;
color: #000000;
}

#footer {
clear:both;
font-size: .6em;
color: #993300;
width: 100%; 
text-align: right;
margin: auto;
font-weight: normal;
border-top: 1px #993300 solid;
}



#navbar {
float: right;
width: 12.5em; /* 200px / 16px = */
top: 0px;
padding-top: 4.375em; /* 70px / 16 = 4.375*/
}

#news {
float: right;
width: 12.5em; /* 200px / 16px = */
top: 0px;
}

.topnav {
  overflow: hidden;
}


#myTopnav a {
  color: #993300;
}
.topnav a {
  
  display: block;
  font-weight: bold;
  text-align: center;
  list-style-type: none;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 1em;
  border: none;
  float: left;

}

.topnav a:hover {
  text-decoration: underline;
}

.topnav a:visted {
  text-decoration: none;
}

.topnav .icon {
  display: none;
}


p.navnews {
color: #993300;
border-top: 1px #993300 dotted;
font-size: .6em;
font-weight: normal;
text-align: right;
padding-right: 10px;
}
p.navnews a:link, p.navnews a:visited {
color: #FF6600;
text-decoration: none;
border: none;

}
p.navnews a:hover {
color: #993300;
text-decoration: underline;
border: none;
}

#news ul li {
list-style-type: none;
margin: 0;
}
#news  ul li a:link, #news ul li a:visited {
color: #FF6600;
border: none;
text-decoration: none;
font-weight: normal;
padding-top: 3px;
padding-right: 10px;
}
/*hide from ie-mac\*/
* html #news ul li {
    height: 1px;
    }
/* end hack */

#news ul li a:hover {
color: #FF6600;
text-decoration: underline;
}
#news ul {
margin: 0;
padding-right: 10px;

}


h1 {
font-size: 1.8em;
text-align: left;

}

h2 {
font-size: 1em;
text-align: left;
}

h3 {
font-size: 1em;
text-align: left;
font-style: italic;
color: #333333;
border-bottom: 1px #993300 dotted;
}
h4 {
font-size: 1em;
text-align: left;
font-style: italic;
color: #993300;
}
h5 {
font-size: 1em;
text-align: right;
font-style: italic;
color: #993300;
}

p {
font-size: 0.9em;
text-align: justify;
font-weight: normal;
}

dt {
font-size: .9em;
font-weight: bold;
}

dd {
font-size: .7em;
font-weight: normal;
}

.year {
font-size: .9em;
font-weight: normal;
}

.duration {
font-size: .8em;
font-weight: normal;
font-style: italic;
}

p.smalltext {
font-size: .7em;
font-weight: normal;
}

ol {
font-size: .7em;
font-weight: normal;
}

p.smallcenter {
font-size: .7em;
text-align: center;
font-weight: normal;
}
p.centeredimage {
text-align:center;
font-size: .6em;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}


a:link, a:visited {
color: #993300;
text-decoration: none;
}

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

a:link img, a:visited img {
border: none;
}

a:link img.border, a:link img.floatrightb, a:visited img {
border: 1px #000000 solid;
}

img.center {
margin: auto;
border: 1px solid;
clear: left;
}
img.border {
margin: 3px 3px 3px 3px;
border: 1px #000000 solid;
}
img.floatleft {
float: left;
margin: 3px 3px 3px 0;
border: 1px solid;
clear: left;
}
img.floatleftnb {
float: left;
margin: 0px 0px 0px 0;
clear: left;
}
img.floatright {
float: right;
margin: 3px 0 3px 3px;
clear: right;
}
img.floatrightb {
float: right;
margin: 3px 0 3px 3px;
border: 1px #000000 solid;
clear: right;
}
.clear {
clear:both;
height:1px;
overflow:hidden;
}

i.fa {
  display: inline-block;
  border-radius: 24px;
  box-shadow: 0px 0px 0.5px #999;
  padding: 0.1em 0.1em;

}

@media screen and (min-width:320px) and (max-width : 1280px) {
  #header,
  #content,
  #main-text,
  #footer,
  #navbar,
  #news {
    float: none;
    width: auto;
       }
       p,
    p.navnews,
    p.smallcenter,
    p.centeredimage,
    p.smalltext,
    ol,
    .duration,
    .year,
    dd,
    dt,
    #footer
     {
font-size: 1em;
}
}

@media screen and (max-width: 1280px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 1280px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    left: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
    text-decoration: none;
  }
  }