@charset "utf-8";

/* Style sheet for HTML5 course                 */

header, section, footer, aside, nav, main, article, figure {
	/* HTML5 defines eight new semantic elements. All these are block-level elements. */
	/* To secure correct behavior in older browsers, you can set the CSS display      */
	/* property for these HTML elements to block:                                     */
	  display: block; 
	}

section {
	  width:800px;
/*	  height:415px; */
	  margin-top:10px;             
	}

header {
	  width:800px;
	  height:100px;
/*	  background: white; */
	}

nav	{
	  width:800px;
	  height:80px;
	  margin-top:10px;
/*	  background: gray; */
	}

article {
	  width:800px;
/*	  height:1500px; */
	  border-style:solid;
	  border-width:thin;
	  float:left;
	  background: orange;
	  overflow:auto;
	}

figure	{
	  width:120px;
	  height:80px;
	  border-style:solid;
	  border-width:thin;
	  margin:10px;                                      
	  background: yellow;
	}

aside	{
	  width:390px;
	  height:500px;
	  border-style:solid;
	  border-width:thin;
	  float:right;                                           
	  background: green;
	  overflow:scroll;
	}

dialog	{
	  width:850px;
	  height:100px;
	  border-style:solid;
	  border-width:thin;
	  float:right;
	  margin:10px;
	  background: blue;
	}

footer	{
	  width:800px;
	  height:25px;
	  border-style:solid;
	  border-width:thin;
	  background: cyan;
	}

body	{
	  background: #ffffcc;
	  color: black;
	  margin-left: 10%;
	  margin-right: 10%;
	}
       
ul, ol, dl {
	  padding: 0;
	  margin : 0 5pt 5pt 20pt;
	}

/* Define the style for heading 1 */
h1	{
	  background: yellow;
	  color: purple;
	  font-weight: bold;
	  font-size: 30pt;
	  text-align: center;
	  font-family: arial, helvetica, sans-serif;
	  content: counter(chapter) ;
	  counter-increment: chapter ;
	  counter-reset: subchapter ;
	}
      
/* Define the style for paragraphs */
p	{
	  background: #ffffcc;
	  color: blue;
	  font-size: 12pt;
	  font-family: arial, helvetica, sans-serif;
	}

p:hover	{
	  background: #ffcccc;
	  color: black;
	}             

p.nodisplay {
	  display: none;
	  text-align: center;
	}             

hr	{
	  background: yellow;
	  color: black;
	  margin-left: -10%;
	  margin-right: -10%;
	}

/* Purely arbitary name, used in HWG/HTML 5 assignment 1 (do not depreciate in course lab folder CSS file) */
p.fred {
	  background: green;
	  border-style: solid;
	  color: blue;
	  line-height: 8pt;
	  font-family: arial, helvetica, sans-serif;
	}

p.htmlcode {
	  background: #cccccc;
	  border-style: solid;
	  color: black;
	  line-height: 8pt;
	  font-family: courier;
	}


small	{
	  background: #ffffcc;
	  color: black;
	  line-height: 8pt;
	  font-family: arial, helvetica, sans-serif;
	}

p.pull	{
	  background: yellow;
	  color: #ff0000; 
	  float: left; 
	  width: 25%;
	  font-size: large; 
	  font-weight: bold; 
	}

.container {
	  width: 960px;
	  background: #ffffff;
	  margin: 0 auto;
	  overflow: hidden;
	}

.content {
	  padding: 10px 0;
	  width: 780px;
	  float: left;
	}

.content ul, .content ol {
	  padding: 0px 15px 15px 40px;
	}


ul li, li {
          background-color:#E3A20B;
	}

.roundedb {
	  width:400px;
	  height:300px;
	  -webkit-border-radius: 40px 90px 40px 90px;
	  -moz-border-radius:    40px 90px 40px 90px;
	  -khtml-border-radius:  40px 90px 40px 90px; /* for old Konqueror browsers */
          border-radius:         40px 90px 40px 90px;
          background-color:#E3A20B;
	}

.roundedbl {
	  -moz-border-radius-topleft: 10px;
	  -moz-border-radius-topright: 20px;
	  -moz-border-radius-bottomright: 30px;
	  -moz-border-radius-bottomleft: 0;

	  -webkit-border-top-left-radius: 10px;
	  -webkit-border-top-right-radius: 20px;
	  -webkit-border-bottom-right-radius: 30px;
	  -webkit-border-bottom-left-radius: 0;
	}

.emboss {
	  font-family: Garamond, serif;
	  line-height: 1em;
	  color: #250af5;
	  font-weight:bold;
	  font-size: 60px;
	  text-shadow:0px 0px 0 rgb(231,231,231),1px 1px 0 rgb(216,216,216),2px 2px 0 rgb(202,202,202),3px 3px 0 rgb(187,187,187),4px 4px 0 rgb(173,173,173),5px 5px 0 rgb(158,158,158), 6px 6px 0 rgb(144,144,144),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
	}

.emboss_std {
	  font-family: Garamond, serif;
	  line-height: 1em;
	  color: #250af5;
	  font-weight:bold;
	  font-size: 20px;
	  text-shadow:0px 0px 0 rgb(231,231,231),1px 1px 0 rgb(216,216,216),2px 2px 0 rgb(202,202,202),3px 3px 0 rgb(187,187,187),4px 4px 0 rgb(173,173,173),5px 5px 0 rgb(158,158,158), 6px 6px 0 rgb(144,144,144),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
	}

.sidebar1 {
	  float: left;
	  width: 180px;
	  background: #eadcae;
	  padding-bottom: 10px;
	}
       
/* A class for the page footer */
.footer	{
	  text-align: center;
	  font-size: 8pt;
	  font-family: sans-serif, arial, helvetica;
	}

img, iframe {
	  float: left;
	  border-top-style: solid;
	  border-top-width: 8px;
	  border-top-color: #999999;
	  border-right-style: solid;
	  border-right-width: 8px;
	  border-right-color: #CCCCCC;
	  border-bottom-style: solid;
	  border-bottom-width: 8px;
	  border-bottom-color: #999999;
	  border-left-style: solid;
	  border-left-width: 8px;
	  border-left-color: #CCCCCC;
	  margin-right: 1em;
	  margin-bottom: 1em;
	}

/* Anchor tag rules - pseudo classes */
a img	{
	border: none;
	}

a:link	{
	  color: #0000ff;
	  font-weight: bold; 
	}
      
a:active {
	  color: #ff0000;
	  font-weight: bold;
	}

a:visited {
	  color: #000000;
	  font-weight: bold;
	}

a:hover, a:focus	{
	  background: #3e8e41;
	  color: #000000;
	  font-weight: bold;
	}

.box {
	  width: 300px;
 	  height: 150px;
	  background: #ffcccc;
	  border: 2px solid #f08080;
	  border-radius: 20px;
	} 

.box1 {
	  width: 300px;
 	  height: 150px;
	  background: #ffcccc;
	  border: 2px solid #f08080;
	  border-radius: 20px;
	} 

.buttont {
	  padding: 5px 20px 5px 10px;
	  -webkit-border-radius: 10px 90px 0px 0px;
	  -moz-border-radius:    10px 90px 0px 0px;
	  -khtml-border-radius:  10px 90px 0px 0px; /* for old Konqueror browsers */
          border-radius:         10px 90px 0px 0px;
          background-color:#E3A20B;
  border: none;
  color: #FFFFFF;
  transition: all 0.5s;
  cursor: pointer;
}

.buttonm {
	  padding: 5px 20px 5px 10px;
	  -webkit-border-radius: 0;
	  -moz-border-radius:    0;
	  -khtml-border-radius:  0; /* for old Konqueror browsers */
          border-radius:         0;
          background-color:#E3A20B;
  border: none;
  color: #FFFFFF;
  transition: all 0.5s;
  cursor: pointer;
}

.buttonb {
	  padding: 5px 20px 5px 10px;
	  -webkit-border-radius: 0px 0px 10px 190px;
	  -moz-border-radius:    0px 0px 10px 190px;
	  -khtml-border-radius:  0px 0px 10px 190px; /* for old Konqueror browsers */
          border-radius:         0px 0px 10px 190px;
          background-color:#E3A20B;
  border: none;
  color: #FFFFFF;
  transition: all 0.5s;
  cursor: pointer;
}

.buttonl {
	  margin:0;             
	  padding: 5px 20px 5px 20px;
	  -webkit-border-radius: 60px 0px 0px 60px;
	  -moz-border-radius:    60px 0px 0px 60px;
	  -khtml-border-radius:  60px 0px 0px 60px; /* for old Konqueror browsers */
          border-radius:         60px 0px 0px 60px;
          background-color:#E3A20B;
  border: none;
  color: #FFFFFF;
  transition: all 0.5s;
  cursor: pointer;
}

.buttonc {
	  margin:0;             
	  padding: 5px 20px 5px 20px;
	  -webkit-border-radius: 0px 0px 0px 0px;
	  -moz-border-radius:    0px 0px 0px 0px;
	  -khtml-border-radius:  0px 0px 0px 0px; /* for old Konqueror browsers */
          border-radius:         0px 0px 0px 0px;
          background-color:#E3A20B;
  border: none;
  color: #FFFFFF;
  transition: all 0.5s;
  cursor: pointer;
}

.buttonr {
	  margin:0;             
	  padding: 5px 20px 5px 20px;
	  -webkit-border-radius: 0px 0px  0px  0px;
	  -moz-border-radius:    0px 60px 60px 0px;
	  -khtml-border-radius:  0px 60px 60px 0px; /* for old Konqueror browsers */
          border-radius:         0px 60px 60px 0px;
          background-color:#E3A20B;
  border: none;
  color: #FFFFFF;
  transition: all 0.5s;
  cursor: pointer;
}

.buttont span, .buttonm span, .buttonb span, .buttonl span, .buttonc span, .buttonr span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttont span:after, .buttonm span:after, .buttonb span:after, .buttonl span:after, .buttonc span:after, .buttonr span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttont:hover span, .buttonm:hover span, .buttonb:hover span, .buttonl:hover span, .buttonc:hover span, .buttonr:hover span {
  padding-right: 25px;
  background-color: #3e8e41
}

.buttont:hover span:after, .buttonm:hover span:after, .buttonb:hover span:after, .buttonl:hover span:after, .buttonc:hover span:after, .buttonr:hover span:after {
  opacity: 1;
  right: 0;
}