/* NEW CSS for navbar */

.topnav {
  background-color: #EEEEEE;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



/* To center the DIV, thus centering all the content, we have to create a style for it. If we auto margin it, and set the width in pixels, it plops it nicely in the center. relative positioning helps it be dynamic, too. Absolute positioning would look all sorts of fucked up. */
#header-div {

  width: 810px;
  margin-left: auto;
  margin-right: auto;
  background-color: #003366;
  font-family: helvetica, tahoma, sans-serif;

}

#center-div {
  width: 700px;
  margin-left: auto ;
  margin-right: auto ;

}

#div-quote{
font-family: helvetica, tahoma, sans-serif;
font-weight: bold;
font-size: 9pt;
color: #FFFFFF;
text-align: center;
}

#div-twitter{

    position: fixed;
    top: 0px;
    right: 0px;
}

/* For the DIV enclosing the FaceBook comments - sadly, FB doesn't allow too much control, but we can do BG color and positioning */
div.fbcomment {
background-color: #e9d2b0;
color: #ffFFFF;
width: 500px;

position: relative;
margin-left: auto;
margin-right: auto;
}

div.socmedia{
margin-left: 35px;
}

table.main {

/*background-color: #c0c4c7;

border-style: solid;
border-width: 0px;
border-color: #cce0e4;*/

color: #000000;
font-family: Tahoma;
font-weight: lighter;
font-size: 10pt;


}




/* the table used for editing in the mgt console */


table.edit{ 
background-color: #222222;
border-style: solid;
border-width: 2px;
border-color: #FFFFFF;
color: #ffffff;
font-family: courier, sans-serif;
font-weight: lighter;
font-size: 10pt;
} 

td.main{
font-family: helvetica, tahoma, sans-serif;
font-size: 16pt;
color: #333333;
margin-left: 20px;
}

td.contact{
font-family: helvetica, tahoma, sans-serif;
font-size: 16pt;
color: #333333;
margin-left: 80px;
}

/* here's where we define some style for text elements and that line thingy. Easy enough, right? */

hr {
border-style: dashed;
color: #CCCCCC;
}

p {
font-family: helvetica, tahoma, sans-serif;
color: #000000;
}

p.id {
font-family: helvetica, tahoma, sans-serif;
color: #000000;
font-weight: bold;
font-size: 14px;
margin-top: 10px;
margin-left: 25px;
margin-right: 25px;
}

p.contact {
font-family: helvetica, tahoma, sans-serif;
color: #000000;
font-weight: bold;
font-size: 14px;
margin-top: 10px;
margin-left: 75px;
margin-right: 25px;
}

/* used for the datestamp */

h1.date{
font-family: helvetica, tahoma, sans-serif;
font-size: 12pt;
color: #ffffff;
margin-left: 15px;
}

h1.id{
font-family: helvetica, tahoma, sans-serif;
font-size: 18pt;
color: #000000;
font-weight: bold;
margin-left: 15px;
margin-top: 2px;
}

h1.comments{
font-family: helvetica, tahoma, sans-serif;
font-size: 12pt;
color: #0099ff;
margin-left: 15px;
}

h1.tag{
font-family: helvetica, tahoma, sans-serif;
font-size: 12pt;
color: #c1ddf0;
}



/* used for the mgt console */

h1.manage{
font-family: sans-serif;
font-size: 14pt;
color: #ffffff;
}



/* used for the content area on teh page */


h1.main{
font-family: helvetica, tahoma, sans-serif;
font-size: 18pt;
font-weight: bold;
color: #6699cc;
}


/* Here, we set ABSOLUTE defaults. If you use any H1, for example, it uses the default properties below, unless specified otherwise. If we wanted to use a different style, we'd use, say, h1.main. Setting styles IN HTML will be discussed in a sec */

h1{
font-family: helvetica, tahoma, sans-serif;
font-size: 14pt;
color: #333333;
}



h2{
font-family: Consolas, monaco, courier, monospace;
font-size: 14pt;
color: #ffffff;
}



h3{
font-family: helvetica, Tahoma, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #555555;
}


h4{
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 16pt;
color: #ffffff;
}



h5{
font-family: helvetica, tahoma, sans-serif;
font-weight: bold;
font-size: 10pt;
color: #666666;
}



h5.smalltext{
font-family: "courier new", courier, sans-serif;
font-size: 8pt;
font-weight: lighter;
color: #99CCFF;
}



/* some image styles, for various purposes.*/
#img-listthumb{
border-width: 2px;
border-style: solid;
border-color: #e8bc7a;
margin-left: 35px;
margin-right: 10px;
margin-top: 0px;
float: left;
}

#img-listthumb-gallery{
border-width: 2px;
border-style: solid;
border-color: #0066cc;
margin-left: 35px;
margin-right: 10px;
margin-top: 0px;
float: left;
}

img.content{
border-width: 4px;
border-style: solid;
border-color: #e8bc7a;
max-width: 690px;
}

img.comments{
margin-left: 5px;
}

img.fx2{
border-width: 2px;
border-style: dotted;
border-color: #ffffff;
}

img.fx3{
border-width: 1px;
border-style: solid;
border-color: #ffffff;
}


/* setting default text modifiers. Bolds, underlines, lists, etc */

b{

font-weight: bold;

color: #FFFFCC;
}

ul {
color: #ffffff;
border-color: #ffffff;
}

ol {
color: #ffffff;
border-color: #ffffff;
}


/* set body properties */

#body-main {
   color: #ffffff;
   background-color: #45708f;
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   margin-right: 0px;

   background-image: url("./images/bg001.png");
   background-repeat: repeat-x;

}


/* setting link properties for active, visited and unvisisted.*/


a:active{
text-decoration: none;

font-family: helvetica, tahoma, sans-serif;
font-weight: bolder;
font-size: 12pt;
color: #6666FF;
}

a:visited{
text-decoration: none;

font-family: helvetica, tahoma, sans-serif;
font-weight: bolder;
font-size: 12pt;
color: #3399cc;

}

a:link{

text-decoration: none;
font-family: helvetica, tahoma, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #0066ff;

}



a.id:visited{
text-decoration: none;

font-family: helvetica, tahoma, sans-serif;

font-size: 12pt;
color: #999999;

}

a.id:link{

text-decoration: none;
font-family: helvetica, tahoma, sans-serif;

font-size: 12pt;
color: #3399cc;

}