/* the 5000 padding on the bottom extends white space at end of page and stops the site hopping left and right as scroll bar pops in or out. i.e., this way, the scroll bar is usually showing, but it alleviates the bouncing back and forth as you navigate the site */
body {
margin:0px;
padding:0px;
color:#000;
background:#FFF;
padding-bottom: 5000px;
}

/* Make HTML5 layout elements block elements for older browsers */
header, nav, main, art{
 display:block;
}


/* wrap dictates the whole page, pretty much. The "auto" centers it */
#wrap {
      max-width:100%;
      width:550px;
      margin:0 auto;
      background:#FFF;
}

/* manages main header */
#header {
        float:left;
    }
    
/* manages rotating header image placement */
#headerimage {
        float:left;

    }
    
#nav {
width: 230px;
margin-left:auto;
margin-right:auto;
}


#nav2 {
width: 272px;
margin-left:auto;
margin-right:auto;
}


#art {
   clear:left;
   padding: 0; margin: 0px 0px 0px 0px;
   text-align: center; 
}

/* heading setup */
h1, h2, h3, h4, h5, h6 {
text-align:left;
font-family: 'Spartan', verdana, san serif;
color:#CA411F;
}



h3 {
font-size:19px;
padding: 0; margin: 20px 0px 18px 0px;
clear: left; 
}

.nav2_aboveH3 {
padding: 0; margin: 96px 0px 18px 0px; 
}

.higher_aboveH3 {
padding: 0; margin: 60px 0px 18px 0px; 
}

/* h4 used only on clients page */

h4 {
font-size:15px;
padding: 0; margin: 20px 0px 18px 0px;
clear: left; 
text-align:center;
}

.shorter_above {
padding: 0; margin: 6px 0px 18px 0px; 
}

.higher_above {
padding: 0; margin: 88px 0px 18px 0px; 
}


/* manages list on links page */

#linklist {
  width: 550px;
  padding: 40px 0px 0px 0px;
  margin: 0 auto;
  border: 0px;
  overflow: hidden;
  font-family: 'Lato', Verdana, sans serif;
     
}

table.center {
    margin-left:auto; 
    margin-right:auto;
  }

.list {
  float: left;
  width: 30%;
}

.list p {
  text-align: left;
}


/* styles specific to the resume page */

/* first one is for the address block */
.resumeaddress {

        font-family: 'Spartan', Verdana, sans serif;
        padding-top: 45px;
        padding-bottom: 40px;
        text-align: right;
        font-size:15px;
        font-weight:normal;
        line-height:125%;
        }

        
/* reshead1 is for the first orange heading on the resume only, to get spacing correct below address block */     
 
.reshead1{

         font-family: 'Spartan', Verdana, sans serif;
         color:#CA411F;
         padding-top: 0px;
         font-weight:bold;
         font-size:17px;

 }  
       
        
.reshead{

         font-family: 'Spartan', Verdana, sans serif;
         color:#CA411F;
         font-weight: bold;
         font-size:17px;
         padding-top: 20px;

 }    
 
.ressubhead{
            font-weight: bold;
           }
       
       
.respara{
     margin-top: -0.75em;
  margin-bottom: 2em;
}
       

 
/* This section is much of the font stuff.  NOTE, for main body text, using Google fonts, I also liked Lustria. */
p {
    letter-spacing: normal;
    line-height: 27px;
    font-family: 'Crimson Text', Georgia, Serif;
    padding-bottom: 5px;
	 }

p  {color:#000000}
p.italic {font-style:italic}
body {font-size:1em}
h1 {font-size:1.2em}
h2 {font-size:1em}
p {font-size:1.2em}
p {text-align: left}

.samples{
 padding-left:7%;
 padding-right:7%;
 max-width:800px;

 }

/* .h2 { 
padding:0px;
margin:0 0 3px 0;
}

.h1 { 
padding:0px;
margin:0 0 20px 0;
} */

.bio{
text-align:left;
}

/* this is used for styling paragraphs with images on the "work-publishing" and "work-mybooks" pages 
p.style8 {font-family: "Times New Roman", Times, serif;
font-size:1em;
text-align:left;
padding:0px;
margin: 30px 0 50px 0px;
overflow: auto;}*/

.style2 {font-family: "Times New Roman", Times, serif; font-size:1em;
text-align:center
}


/* ==== Links and link states in main section */
/* Unvisited links */
a:link{
   color:#CA411F;
   text-decoration:none;
}

/*Visited links*/
a:visited{
   color:#CA411F;
   text-decoration:none;
}

/* two classes for rule (line) styling (hr)*/
.top{ 
    clear: left;
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

.topshort{ 
    clear: left;
    display: block;
    width: 360px;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

.bottom{ 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}


/*nav functionality */
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 16px 0px 0px 0px;
    overflow: hidden;
    background-color: #FFF;
    text-align: left;
}

#nav li {
    display: inline-block;
}

#nav li a {
    display: block;
    color: #434343;
    text-align: left;
    font-size: 0.9em;
    padding: 0px 5px;
    text-decoration: none;
    font-family: 'Lato', Verdana, sans serif;

}

/* Change the nav link color to on hover */
#nav li a:hover {
    transition: background-color 0.65s ease;
    background-color: #C0C0C0;
}

/* Add an "active" class to the current link to let the user know which page he/she is on...for nav */

.active {
    background-color: #CFCFCF;
   }



/*nav2 functionality (second line of nav)*/
#nav2 ul {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 16px 0px 0px 0px;
    overflow: hidden;
    background-color: #FFF;
    text-align: left;
}

#nav2 li {
    display: inline-block;
}

#nav2 li a {
    display: block;
    color: #434343;
    text-align: left;
    font-size: 0.9em;
    padding: 0px 5px;
    text-decoration: none;
    font-family: 'Lato', Verdana, sans serif;
   /* border-bottom: 2px solid transparent;
    transition: border-bottom 0.65s ease; */
    
}

/* Change the nav2 link on hover */
#nav2 li a:hover {
    background-color: #EFEDED;
    
    }

/* Add an "active" class to the current link to let the user know which page he/she is on...for nav */

.active2 {
    background-color: #EFEDED;
   }   
   
   
/* my UL default style */

ul {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
    color:#404040;
    line-height: 125%;
}

.client_list

{
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
    color:#000000;
    line-height: 125%;
}


/* === Style classes */

/* Use class="centerall" in p or div to center
 all text and images inside the element */
.centerall {
 text-align: center; 
 
/* Clear any floating elements */
 clear: both;
}

/*--this stuff keep the book lists and descriptions straight--*/
.book_list{
  list-style:none;
  font-size: 0.95em;
  padding:0;
  margin:0;
  max-width:400px;
  margin:0 auto;
}
.book_list li{
margin-bottom:40px;/*this controls space between items*/
  height:150px;
  overflow:hidden;/*hides overflow text*/
}

.book_list_top_item{
margin-top:30px;
margin-bottom:40px;/*this controls space between items*/
  height:150px;
  overflow:hidden;/*hides overflow text*/
}

.book_list li:after {
  content: "";
  display: table;
  clear: both;
}
.book_list li img{
  height:150px;
  width:auto;
}
.img_left{
  float:left;
  margin-right:15px;
}
.img_right{
  float:right;
  margin-left:15px;
}
.book_list p{
 margin: 0px;
}

/* this div makes it possible to vertically align the texts next to the book covers.. see wrappers around the p elements in my book lists*/
.book_list div{
  display:table;
  height:100%;
}
.book_list div p{
 margin:0px;
  display:table-cell;
  vertical-align:middle;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto }
    
img {
    max-width:100%;
    height:auto;
 }
 
 
 
/* Below controls the side-by-side columns on the clients list page */ 
 
 * {
    box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 12px;
    height: 330px;
}

.column_shorter {
    float: left;
    width: 50%;
    padding: 12px;
    height: 275px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}