/* layoutstyles.css */

body{
  /*background-color: #184B94; */ /* nice blue */
  
  /* you could use a background image here instead */
  /* background-image:url(relativePath); */
  font-family: Arial, Helvetica, sans-serif;
}

/* Universal style rule */
*{
  /* Block all browser default margins and padding */
  margin:0;
  padding:0;
  /* Temporary borders */
  /*border:dashed 1px #f00;*/
  border:0;
}

#wrapper{
  width: 40em; 
  background-color:#fff; /*white*/ 
/* Center the wrapper */ 
  margin: 10px auto; 
}

/* green blue line style rules */
#greenblueline1{
  background-color:#F30; /* our red */
  background-color:#3cc; /* green blue */
  clear:both;
  height:.2em;
  width:40em
}
#greenblueline2{
  background-color:#3cc; /* green blue */
  clear:both;
  height:.2em;
  width:40em
}
#greenblueline3{
  background-color:#3cc; /* green blue */
  clear:both;
  height:.2em;
  width:40em
}
#greenblueline4{
  background-color:#3cc; /* green blue */
  clear:both;
  height:.2em;
  width:40em
}

/* yellow line style rules */
#yellowline1{
  background-color:#FF3; /* our yellow */
  background-color:#ffc; /* lt yellow */
  clear:both;
  height:.1em;
  width:40em
}
#yellowline2{
  background-color:#ffc; /* lt yellow */
  clear:both;
  height:.1em;
  width:40em;
}
#yellowline3{
  background-color:#ffc; /* lt yellow */
  clear:both;
  height:.1em;
  width:40em;
}
#yellowline4{
  background-color:#ffc; /* lt yellow */
  clear:both;
  height:.1em;
  width:40em;
}

/* wedgewood blue line style rules */
#wedgewoodblueline1{
  background-color:#0C3; /* our green */
  background-color:#09c; /* wedgewood blue */
  clear:both;
  height:.4em;
  width:40em;
}
#wedgewoodblueline2{
  background-color:#09c; /* wedgewood blue */
  clear:both;
  height:.4em;
  width:40em;
}
#wedgewoodblueline3{
  background-color:#09c; /* wedgewood blue */
  clear:both;
  height:.4em;
  width:40em;
}
#wedgewoodblueline4{
  background-color:#09c; /* wedgewood blue */
  clear:both;
  height:.4em;
  width:40em;
}

/* TOOTH LOGO IMAGE STYLE RULES */
#logo{
  background-color:#fff; /*white*/ 
  float:left;
  /* remember that centerbranding margin-left must */
  /* equal this width */
  width:5em;
  padding-left:.25em;
  height:5.25em;
  /*margin-left:1em;*/
}

/* WORDS: YOUR ORTHODONTIC SUPPLY COMPANY STYLE RULES*/
#orthosupplycomp{
  background-color:#fff; /*white*/ 
  float:left;
  width:6em;
  padding-left:.25em;
  height:5.25em;
  color:#036; /*dark blue*/
  font-size:14px;
  /*padding: 1em;*/
}

#orthosupplycomp li{
  text-align:left;
}

#orthosupplycomp ul{
  list-style-type:none;
  padding:5px;
}

/* WORDS: BEHAVIORAL MOTIVATORS, STYLE RULES */
#behmot{
  background-color:#fff; /* white */
  float:left;
  width:20em;
  padding-left:.25em;
  height:5.25em;
  color:#036; /*dark blue*/
}

#behmot h1, #behmot h2, #behmot h3{
  font-family: Charcoal, Impact, sans-serif;
  font-weight:normal;
  font-size:24px;
  /*font-style:italic;*/
  font-variant:small-caps;
  letter-spacing:0.08em;
}

#behmot p{
  font-size:14px;
}

/* NAVIGATION BAR STYLE RULES */
#navbar{
  background-color:#fff; /*white*/
  height:5em;
  width:11em;
}

#navbar li{
  padding-top:1em;
  height:1.6em;
  float:left;
  color:#036;  /* font color dark blue*/
}

#navbar ul{
  list-style-type:none;
  color:#036;  /* font color dark blue*/
}

/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
  text-decoration:none;
  font-family:Verdana, Geneva, Arial, Sans-Serif;
  font-size:80%;
  background-color:#ffc; /* lt yellow */
  display:block; /* gets rid of extra space around inline element */
  height:1.5em;  /* navbar height 2em*.8=1.6em */
  width:6em;
  border: solid 1px #3cc;
  text-align:center;
  line-height:1.5em;
  outline-style:none; /* remove dotted border (some browsers) */
  color:#036;  /* font color dark blue*/
}

/* Navbar hover and active links */
#navbar a:hover,
#navbar a:active{
  background-color:ffc; /* yellow */
  font-weight:bolder;
  color:#036;  /* font color dark blue*/
}

/* PHONE NUMBER STYLE RULES */
#phone{
  background-color:#0f0; /*bright green*/ 
  background-color:#fff; /*white*/ 
  margin-left:33em;  /* must equal centerbranding margin-right */
  padding-left:.25em;
  height:2.5em;
}

#phone li{
  font-size:90%;
  text-align:left;
  float:left;
  color:#036; /*dark blue*/
}

#phone ul{
  list-style-type:none;
}

/* LEFT COLUMN STYLE RULES */
#leftcolumn{
  background-color:#ffc; /* very light yellow */
  float:left;
  /* remember that content and navbar left-margin must */
  /* equal this width */
  width:9em;
  height:32em;
  padding:0.5em;
}

#leftcolumn ul{
  list-style:none;
}

#leftcolumn li{
  width:10em; /* same as "a" width */
  position:relative; /* Required for drop-down menus */
  color:#036;  /* font color dark blue*/
}

/* applies to drop-down menus in leftcolumn */
#leftcolumn li ul{
  dispaly:none;
  position:absolute; /* line up under it's relatively positioned parent */
  z-index:100; /* make sure nothing will cover up the drop-down list */
  visibility:hidden; /* make drop-downs invisible when not activated */
  margin:-1.4em 0 0 8em;
  padding:0.1em;
  color:#036;  /* font color dark blue*/
}

/* make dorp-down visible on leftcolumn when user hovers */
#leftcolumn li:hover ul {
  display:block;
  width:9em;
  position:absolute;
  visibility:visible;
  color:#036;  /* font color dark blue*/
}

/* applies to links on the drop-down menu */
#leftcolumn li:hover ul li a{
  background:#ffc; /* removes background image replaces with light yellow*/
  text-align:left; /* drop-downs don't have centered text */

  /* make the drop-down options longer */
  display:block;   /* alow a width to be set */
  width:15em;      /* set the width, padding, height */
  padding:.2em 1em;
  height:auto;
  color:#036;  /* font color dark blue*/
}

/* set the hover colors on dorp-down menu links */
#leftcolumn li:hover ul li a:hover{
  background:#ff3; /* our yellow */
  color:#036;  /* font color dark blue*/
}

/* Applies to leftcolumn links, unvisited and visited */
#leftcolumn a,
#leftcolumn a:link,
#leftcolumn a:visited{
  text-decoration:none;
  font-family:Verdana, Geneva, Arial, Sans-Serif;
  font-size:80%;
  background-color:#ffc; /* very light yellow */
  display:block; /* gets rid of extra space around inline element */
  height:1.5em;
  width:11em;
  text-align:center;
  border-bottom: solid 2px #3cc; /* lines between links */
  color:#036;  /* font color dark blue*/
}

/* leftcolumn hover and active links */
#leftcolumn a:hover,
#leftcolumn a:active{
  background-color:#ff3; /* our yellow */
  color:#036;  /* font color dark blue*/
}

/* RIGHT COLUMN STYLE RULES */
#rightcolumn{
  background-color:#ffc; /* very light yellow */
  float:right;
  width:6em;
  height:30em;
  padding:1.5em;
}

#rightcolumn h1, #rightcolumn h2, #rightcolumn h3{
  font-family: Charcoal, Impact, sans-serif;
  color:#806659; /* taupy brown */
  color:#036; /*dark blue*/
  font-weight:normal;
  font-size:160%;
  /*font-style:italic;*/
  font-variant:small-caps;
  letter-spacing:0.04em;
}

#rightcolumn ul, #rightcolumn ol{
  padding-left:1.5em;
  padding:2px 5px 5px 35px;
}

#rightcolumn p, #rightcolumn ul{
  line-height:1.5em;

}

#rightcolumn img{
  padding:1px 5px 1px 5px;
}

#rightcolumn a{
  color:#09c; /*light blue lettering*/
  font-weight:bold;
  text-decoration:none;
}

#rightcolumn a:hover{
  color:#000; /*black lettering*/
}


/* CONTENT - BETWEEN LEFT AND RIGHT COLUMN - STYLE RULES */
#content{
  background-color:#fff;      /*white*/
  color:#000;                 /* black lettering */
  color:#09c;                 /* light blue lettering*/
  height:32.8em;
  overflow:auto;
  /*width:25em;*/
  margin-left:9em; /* left margin must match left column width */
  padding:.1em .5em .1em .5em;
}

#content h1, #content h2, #content h3{
  font-family: Charcoal, Impact, sans-serif;
  color:#806659; /* taupy brown */
  color:#036; /*dark blue*/
  font-weight:normal;
  font-size:160%;
  /*font-style:italic;*/
  font-variant:small-caps;
  letter-spacing:0.04em;
}

#content ul, #content ol{
  padding-left:1.5em;
  padding:2px 5px 5px 35px;
}

#content p, #content ul{
  line-height:1.5em;

}

#content img{
  padding:1px 5px 1px 5px;
}

#content a{
  color:#09c; /*light blue lettering*/
  font-weight:bold;
  text-decoration:none;
}

#content a:hover{
  color:#000; /*black lettering*/
}

/* FOOTER STYLE RULES */
#footer{
  /*background-color:#ccc; /*silver*/ 
  background-color:#fff;      /*white*/
  clear:both;            /* clears all of the previous float:right and float:left commands */
  height:1em;
  padding:.5em;
}

#footer li{
  float:left;
  list-style-type:none;
  color:#036;  /* font color dark blue*/
}

#footer a,
#footer a:link,
#footer a:visited{
  text-decoration:none;
  font-family:Verdana, Geneva, Arial, Sans-Serif;
  font-size:80%;
  background-color:#fff;      /*white*/

  /*background-color:#aaa;*/
  display:block; /* gets rid of extra space around inline element */
  height:1.2em;
  width:6em;
  color:#036;  /* font color dark blue*/
}

/* footer hover and active links */
#footer a:hover,
#footer a:active{
  /*background-color:#000;*/
  background-color:#fff;      /*white*/
  font-weight:bold;
  color:#036;  /* font color dark blue*/
}