#website_properties
{
   height:100%;
   position:relative;
   background-color:lightgrey;
   display:none;
}
#website_properties table
{
   position:relative;  
   left:50%;
   top:15%;
   transform:translate(-50%, 0%);
  font-family:"Comic Sans MS", cursive, sans-serif;
  text-align:center;
}
#website_properties input
{
  background-color:transparent;
  border:1px solid black;
  width:165%;
  height:40px;
  padding-right:10%;
  border-radius:5px;
  font-size: 110%;
  text-indent:10px;
  color:black;
  font-family:"Comic Sans MS", cursive, sans-serif;
  outline:none;
}
#website_properties_title
{
  position:relative;
  font-size: 150%;
  color:dodgerblue;
  font-family:"Comic Sans MS", cursive, sans-serif;
  text-align:center;
}
#website_properties p{
  font-family:"Comic Sans MS", cursive, sans-serif;
  text-align:center;
}
#website_properties button
{
  background-color:DodgerBlue;
  border:2px solid white;
  width:230px;
  height:65px;
  border-radius:8px;
  font-size: 100%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  outline:none;
}
#website_properties button[id='start_editing']{
  background-color:red;
  border:0px solid white;
  width:240px;
  height:65px;
  border-radius:10px;
  font-size: 100%;
  color:white;
  font-family:"Comic Sans MS", cursive, sans-serif;
  outline:none;
  cursor:pointer;
}
#website_name_help
{
  position:relative;
  width:16px;
  height:16px;
  left:85%;
  border:1px solid white;
  border-radius:20px;
  background-color:black;
  background-image:url('logos/help.png'); 
  background-size: 80% 80%;
  background-repeat:no-repeat;
  background-position: center;
}
#website_name_help_comment
{
  position:relative;
  width:260px;
  height:145px;
  padding:10px;
  border-radius:2px;
  background-color:white;
  font-size: 78%;
  box-shadow:0px 0px 5px 0px black;
  color:black;
  font-family:"Comic Sans MS", cursive, sans-serif;
}
#website_name_help_comment_arrow {
  position:relative;
  width: 0; 
  height: 0;
  left:-290px; 
  top:-62px;  
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid white;
}
#website_name_help_comment_table
{
  position:absolute;
  display:none;
}

#templates_div
{
  position:absolute;
  width:80%;
  height:82%;
  left:10%;
  top:5%;
  display:none;
  overflow:hidden;
  background-color:lightgrey;
  border-top-right-radius:10px;
  border-top-left-radius:10px;
  box-shadow:0px 0px 15px black;
}
#templates_div > div:nth-child(1){
   height:100%;
   width:100%;
   position:relative;
   background-color:lightgrey;
   overflow:hidden;
}
#templates_div > div:nth-child(1) > div{
   position:relative;
   background-color:white;
   width:390px;
   height:220px;
   border-radius:5px;
   cursor:pointer;
   float:left;
   margin-left:20px;
   margin-bottom:20px;
   margin-top:20px;
   overflow:hidden;
}
#templates_div > div:nth-child(1) > div > div{
   position:absolute;
   background-color:white;
   width:100%;
   height:100%;
   border-radius:5px;
   overflow:hidden;
}
#templates_div > div:nth-child(1) > div > p{
   position:absolute;
   background-color:darkgray;
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
   height:25px;
   width:100%;
   padding-left:20px;
   padding-top:6px;
   margin-top:190px;
   font-size:92%;
   cursor:pointer;
   font-family:"Comic Sans MS", cursive, sans-serif;
}
#templates_done_cancel
{
  position:fixed;
  width:80%;
  height:7%;
  top:87%;
  background-color:gray;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  box-shadow:0px 3px 10px black;
}
#templates_done_cancel div
{
  position:relative;
  float:left;
  width:10%;
  height:70%;
  background-color:dodgerblue;
  margin:0.6%;
  font-family:"Comic Sans MS", cursive, sans-serif;
  cursor:pointer;
  text-align:center;
  border-radius:5px;
}
#templates_done_cancel div:nth-child(1)
{
  background-color:limegreen;
}
#templates_done_cancel div p
{
  position:relative;
  	top:50%;
	transform:translate(0%, -50%);
  margin:0px;
  cursor:pointer;
}

#scrollBar_templates_div
{  
	width:8px;
    height:37px;	
	border-radius:5px;
	transition: opacity 0.3s linear;
	background-color: black;
	position: absolute; 
    top:18px;
    right:2px;
	opacity: 0.9;
	cursor:pointer;
}
#scroller_templates_div
{  
	width:8px;
	border:2px solid grey;
	border-radius:5px;
	transition: opacity 0.3s linear;
	background-color: grey;
	position: absolute; 
	top:50%;
	transform:translate(0, -50%);
	right: 0px;
	height: 80%; 
	opacity: 0.5;
}