/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */




body {
  background-color: #e6fff7;
  background-image: url('cssElements/treesbg.gif');
  background-size: auto;
  color: white;
  font-family: Verdana;
  margin:0;
  padding:0;
}
#container {
  position:relative;
}

/*-------------------- Left Sidebar navigation --------------------*/
#sidebar {
  background-color:blue;
  position:absolute;
  top:0;
  left:0;
  width:220px;
  clear:both;
}

#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}

#sidebar li {
font-weight:bold;
font-variant:small-caps;
background:url('samplegradient.gif') repeat-x #DDDDFF;
padding:0 0.5em;
}

#sidebar li ul {
background:#e6fff7;
}

#sidebar li ul li {
font-weight:normal;
font-variant:normal;
background:transparent;
padding:0;
display:inline;
}

#sidebar li ul li a:link, #sidebar li ul li a:visited {
display:block;
color:#000088;
padding:0.1em 0.5em;
text-decoration:none;
border-bottom:1px solid #DDDDFF;
}

#sidebar li ul li a:active, #sidebar li ul li a:hover {
background:#b3ffe6;
color:#333388;
}

/* end of sidebar css */


/*-------------------- Right Sidebar navigation --------------------*/
#sidebar2 {
  background-color:blue;
  position:absolute;
  top:0;
  right:0;
  width:220px;
  clear:both;
}

#sidebar2 ul {
margin:0;
padding:0;
list-style-type:none;
}

#sidebar2 li {
font-weight:bold;
font-variant:small-caps;
background:url('samplegradient.gif') repeat-x #DDDDFF;
padding:0 0.5em;
}

#sidebar2 li ul {
background:#e6fff7;
}

#sidebar2 li ul li {
font-weight:normal;
font-variant:normal;
background:transparent;
padding:0;
display:inline;
}

#sidebar2 li ul li a:link, #sidebar li ul li a:visited {
display:block;
color:#000088;
padding:0.1em 0.5em;
text-decoration:none;
border-bottom:1px solid #DDDDFF;
}

#sidebar2 li ul li a:active, #sidebar li ul li a:hover {
background:#b3ffe6;
color:#333388;
}

/* end of sidebar css */



#menu2 {
  background-color:red;
  position:absolute;
  top:0;
  right:0;
  width:100px;
}

#content {
  padding-right:2em;
  padding-left:2em;
  padding-bottom:3em;
  margin-left:220px;
  margin-right:220px;
}

#footer {
padding-top:3em;
margin-left:220px;
margin-right:220px;
}

/*-------------------- Gallery css setup --------------------*/

#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  height: 180px;
}

#gallery-item:hover {
  border: 1px solid #777;
}

#gallery-item img {
  width: 100%;
  height: 100%;
}
/* Gallery css setup end */


/*-------------------- hyperlink css Setup --------------------*/
a {
   color:blue;
}
a:hover{
  color:red;
  }