/* Betty Ann Tyson personal website Version 1 Draft 1 7/2/2013
   colors.css  - colors and styles (aka themes) */
@import "custom.css";	/* custom colors */

#samples span {
  padding: 10px;
  font-size: 3em;
  margin: 10px;
  border: thin solid white;
}
#samples p {
  margin: 20px;
}

#styles span {
  padding: .2em;
  font-size: 2em;
  }
  
#palettes span {
  padding: .2em;
  font-size: 2em;
  }

/*-------------------------------------*/
/*      Samples                        */
/*-------------------------------------*/

.brown1 {
  background-color: #5C2E00;
  color: #FFAD33; /* gold 1 */
}
.brown3 {
  background-color: #3D2914;
  color: #FFAD33; /* gold 1 */
}
.light-brown {
  background-color: #996600;
  color:#FFB84D ;	/* gold 3 */
}
.purple1 {
  background-color: #FF6CB5;
}
.purple3 {
  background-color: #AD85FF;
}
.beige1 {
  background-color: #FFEBC2;
}
.beige2 {
  background-color: #F5F0E6;
}
.beige3 {
  background-color: #FFEBC2;
}
.beige4 {
  background-color: #ACA8A1;
}

.green1 {
  color: #FFAD33; /* gold 1 */
}
.green3 {
  background-color: #002E00;
  color: #FFAD33; /* gold 1 */
}
.white {
}
.gold1 {
  color: #FFAD33;
  background-color: #000000;
}
.gold2 {
  color: #FFCE85;
  background-color: #000000;
}
.gold3 {
  color: #FFB84D;
  background-color: #000000;
}
.gold4 {
  color: #FFCC66;	/* gold 4 */
  background-color: #000000;
}

.grey2 {
  background-color: #A3A3A3;
}
.grey3 {
  background-color: #313131;
}
.desk1 {
  background-image: url(../images/background/127573885139210730desk_texture-th.png);
  background-repeat: repeat;
  }
.desk2 {
  background-image: url(../images/background/wood_pattern.png);
  background-repeat: repeat;
}
.paper3 {
  background: url(../images/background/12852606471697651750beige056-th.png);
  background-repeat: repeat;
  }
/*.paper5 {
  background: url(../images/background/creampaper.png);
  background-repeat: repeat;
  }*/
.paper6 {
  background: url(../images/background/rice_paper.png);
  background-repeat: repeat;
  }
.paper7 {
  background: url(../images/background/naturalpaper.png);
  background-repeat: repeat;
  }
.paper8 {
  background: url(../images/background/paper.png);
  background-repeat: repeat;
  }
.paper9 {
  background: url(../images/background/paper3.png);
  background-repeat: repeat;
  }
.parch2 {
  background: url(../images/background/darkparch.jpg);
  background-repeat: repeat;
  }
.bat-brown {
  background-color: #634300;
  color: #FFEBC2;	/* beige 1 */
}
.bat-green {
  background-color: #5CA12B;
}
.bat-purple {
  background-color: #B204B2;
}

/*-------------------------------------*/
/*     Palette 1                       */
/*-------------------------------------*/
.palette1 .color1 {
  background-color: #5C8192;	/* grey-blue */
  }
.palette1 .color1:after {
  content: '#5C8192';
  }
.palette1 .color2 {
  background-color: #94B84D;	/* light green */
  }
.palette1 .color2:after {
  content: '#94B84D';
  }
.palette1 .color3 {
  background-color: #AEC0C8;	/* lighter grey-blue */
  } 
.palette1 .color3:after {
  content: '#AEC0C8';
  }
.palette1 .color4 {
  background-color: #B2D1E0;	/* light blue */
  }
.palette1 .color4:after {
  content: '#B2D1E0';
  }
.palette1 .color5 {
  background-color: #EBC2D6;	/* light purple */
  }
.palette1 .color5:after {
  content: '#EBC2D6';
  }
.palette1 .color6 {
  background-color: #CC6699; /* base purple */
  }
.palette1 .color6:after {
  content: '#CC6699';
  }
.palette1 .color7 {
  background-color: #33A133;	/* darker green */
  }
.palette1 .color7:after {
  content: '#33A133';
  }
  
/*-------------------------------------*/
/*       Style 0                       */
/*-------------------------------------*/

/* background */

body.style0, 
  .style0 .style_background,
 /* .paper4  {
  background: url(../images/background/1285260647361444706beige009-th.png); /* looks pink on Windows !! */
  .parch1 {
  background: url(../images/background/parchment.jpg);  
  background-repeat: repeat;
  }
  
.paper4  {
  background: url(../images/background/1285260647361444706beige009-th.png); /* looks pink on Windows !! */
}
.style0 #wrapper {
    box-shadow: 0px 5px 30px 5px #888888;
}

/* banner */  

.style0 #banner, 
  .style0 .style_banner,
  .green4 {
/*  .green2 {
  background-color: #003300; */
  /* background-color: #5CA12B;	/* bat-green */
  /* background-color: #37611A;	/* bat-green 4 shades darker */
  background-color: #2E5016;	/* bat-green 5 shades darker */  
  color: #FFAD33; /* gold 1 */
}

.green2 {
  background-color: #003300;
  color: #FFAD33; /* gold 1 */
  }

.style0 #banner {
  border-bottom: thin solid black;
}

/* site navigation */

.style0 #site_nav {
 background-color: #808080;	/* gray */
 }
 
.style0 #site_nav li a, 
  .style0 .style_menu, 
  .brown2 {
  background-color: #4C3300;
  color: #FFAD33; /* gold 1 */
}

.style0 #site_nav li a:hover, 
  .style0 .style_menu_hover {
  background-color: #634300;	/* bat-brown */
  color: #FFCC66;	/* gold 4 */
  }
.style0 #site_nav li a:active, 
  .style0 .style_menu_active {
  background-color: #634300;	/* bat-brown */
  color: #FFEBC2;	/* beige 1 */
  }
.style0 #site_nav li a#iamhere, 
  .style0 .style_menu_iamhere,
  .paper1 {
  background: url(../images/background/12852606482052154442beige110-th.png);
 /* background: url(../images/background/darkparch.jpg); /* too dark */
  background-repeat: repeat;
  color: #000;
  }

.style0 #site_nav li a {
  border-left: thin solid black;
  }

.style0 #site_nav li:last-child a {
  border-right: thin solid black;
}

.style0 #page_header {
  border-bottom: thin solid black;
  }

/* footer */

.style0 #footer, 
  .style0 .style_footer,
  .purple2 {
  background-color: #E68AB8;
  box-shadow: inset -2px -2px 20px 2px #8A536E; /* darker purple2 */
}

/*-------------------------------------*/
/*       Style 1                       */
/*-------------------------------------*/

/* background */

body.style1, 
  .style1 .style_background,
  .green1 {
  background-color: #164016;
}
  
/* banner */

.style1 #banner, 
  .style1 .style_banner,
  .paper2 {
  background: url(../images/background/12852606491320050457beige112-th.png);
  background-repeat: repeat;
  box-shadow: inset -2px -2px 20px 2px grey;
  }

/* site navigation */

.style1 #site_nav li a, 
  .style1 .style_menu, 
  .style1 .style_menu_active,
  .style1 .style_menu_hover {
  background-color: #E68AB8;
  box-shadow: inset -2px -2px 20px 2px #8A536E; /* darker purple2 */
  color: black;
}
.style1 #site_nav li a, 
  .style1 .style_menu,
  .style1 .style_menu_hover, 
  .style1 .style_menu_active,
  .style1 .style_menu_iamhere {
    border: thin solid black;
}
.style1 #site_nav li a:hover, 
  .style1 .style_menu_hover {
  color: blue;	
  }
.style1 #site_nav li a:active, 
  .style1 .style_menu_active {
  color: red;	
  }
.style1 #site_nav li a#iamhere, 
  .style1 .style_menu_iamhere,
  .grey1 {
    background-color: #CCCCCC;
    box-shadow: inset -2px -2px 20px 2px grey;
    color: #000;
  }
  
/* footer */

.style1 #footer, 
  .style1 .style_footer {
  background-color: #FFAD33;	/* gold1 */
  box-shadow: inset -2px -2px 20px 2px grey;
  }

/*-------------------------------------*/
/*       Style 2                       */
/*-------------------------------------*/
.style2 .style_background {
  background-color: white;
  }
.style2 .style_banner,
  .style2 #banner {
  background-color: #AEC0C8;	/* lighter grey-blue */
  color: #5C8192;	/* grey-blue */;
  }
.style2 .style_menu,
  .style2 #site_nav li a {
  background-color: #B2D1E0;	/* light blue */
  color: white;
  } 

.style2 .style_menu_hover,
  .style2 #site_nav li a:hover{
  background-color: #B2D1E0;	/* light blue */
  color: #5C8192;	/* grey-blue */;
  }
.style2 .style_menu_active,
  .style2 #site_nav li a:active {
  background-color: #B2D1E0;	/* light blue */
  color: #CC6699; 	/* base purple */
  }
.style2 .style_menu_iamhere,
  .style2 #site_nav li a#iamhere{
  background-color: #EBC2D6;	/* light purple */
  color: #CC6699; /* base purple */
  }
.style2 .style_footer,
  .style2 #footer  {
  background-color: #94B84D;	/* light green */
  color: #33A133;	/* darker green */
  }
/*-------------------------------------*/
/*       Style 3                       */
/*-------------------------------------*/
.style3 .style_background {
  }
.style3 .style_banner {
  }
.style3 .style_menu {
  } 
.style3 .style_menu_hover {
  }
.style3 .style_menu_active {
  }
.style3 .style_menu_iamhere {
  }
.style3 .style_footer {
  }