@charset "utf-8";

.logo_small{
	display:none;
}

.print_only{
	display:none;
}
.logo_med{
	display:none;
}

.page_border{
	border: 1px solid grey;
}

.page_header{
	width:100%;
	background:aliceblue;
	border: 1px solid black;
    margin-left: 0px;
	margin-bottom: -1px;
    padding-left: 1px;
    padding-right: 1px;

}

.video_block{
	height: 300px;
}

body{
	min-width:303px;
	background-image: url("../images/squares2s.gif");
	margin:0px;
	padding:0px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;

}

p{
	font-size:medium;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

p.break{
  clear:both;
}

h1, h2, h3, h4, h5, h6{
	margin-top: inherit;
}

.h1, h1{
	font-size: xx-large !important;
	margin-top: 0.5em !important;
	clear:both;
}

.h2, h2{
	font-size: x-large !important;
	margin-top: 1.5em !important;
	clear:both;
}


.h3, h3{
	font-size: large !important;
	margin-top: 1.5em !important;
	clear:both;
}

.h4, h4{
	font-size: medium !important;
	font-weight:800;
	margin-top: 1em !important;
	clear:both;
}

.h5, h5{
	font-size: medium !important;
	font-weight:800;
	color:blue;
	margin-top: 1em !important;
	clear:both;
}

.blog_title{
	font-size: x-large !important;
	margin-top: 0.5em !important;
	clear:both;
}

td .photo{
	text-align: center;
	padding:10px;
}
svg{
	border: 1px solid grey;
}

label.smart_form   {
	vertical-align: top;
    width: 160px;
}

label{
	padding-right:5px;
}

button{
	 -webkit-user-select: none;
	 user-select: none;
}

#form_section{
	min-width: 400px;
}

.hydrangea_form{
	min-width: 500px !important;
}

span.field_group{
	display: inline-block !important;
}

.page{
	max-width:1290px;
}

.topbar{
	background-color:rgb(244,244,244);
	max-width:1280px;
	left:auto;
	right:auto;
  width: 100%;
}

#navbar-collapse-1{
	clear: left;
	padding-left:20px;
	margin-bottom:10px;
}

li:hover{
	background-color:white;
	border:1px solid black;
}

#page_block{
	position:relative;
	top:186px;
	width:100%;
	padding-top:20px !important;
	padding-left:20px;
	padding-right: 20px;
	overflow-x:hidden;
	background-color: white;

}

#page_block_demo{
	position:relative;
	top:inherit;
	width:100%;
	padding-left:0px;
	overflow-x:hidden;
	background-color: white;
}

#minimal_page_block{
	width:100%;
	padding-left:20px;
	padding-top:10px;
	overflow-x:hidden;
	overflow-y:hidden;
	background-color: white;
}

#print_block{
	position:relative;
	top:0px;
	width:100%;
	height:100%;
	padding-left:20px;
	overflow-x:hidden;
	background-color: white;
}

#top_banner{
	position: relative;
	top: -301px;
	background: rgba(0, 0, 50, 0.8);
	color: #f1f1f1;
	width: 100%;
	min-height: 300px;
  padding: 20px 10px 0px 20px;
	max-width: 1280px;
}

img.button_image{
	margin-top: -1px;
}
.content_block{
	padding-left:20px;
	position: relative;
	top: -290px;
}

a.dropdown-item{
	margin-left:1px;
}

.no_banner{
	top:0px;
	margin-top:10px !important;
}

.main{
	background-image: url("..images/squares2s.gif");
	margin:0px;
	padding:0px;
}

.screen_only{
	display:inherit;
}

hr.break{
    border-top: 4px solid #eee;
}


.haiku_block p{
	font-size:large;
}

hr.haiku_break{
  height: 2px;
  background: blue;
  text-align: left;
  margin-top: 30px;
	margin-bottom: 40px;
	border:none;
  margin-left: 0px;
	width:400px;
}

.haiku_block{
	width: 400px;
  border: 1px solid blue;
  padding: 10px;
  background-color: aliceblue;
}

.container {
	padding-right: 0px;
  padding-left: 0px;
}

.navbar-header{
	padding-right: 10px;
  padding-left: 10px;

}

.dropdown-item {
	color: black !important;
}


.photo_list{
	margin-left:auto;
	margin-right:auto;
}

.album{
	width:200px;
	height:200px;
	border:3px;
	border-style:solid;
	border-color:aqua;
	padding:5px;
	margin-bottom: 5px;
}

.photo{
	width:600px;
	margin-left:50px;
}

.photo_left{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

.photo_desc{
	width:600px;
	margin-left:auto;
	margin-right:auto;
}

.photo_table{
	text-align: left;
	border: 2px solid aqua;
	padding:2px;
}
.photo_row{
	padding:1px;
}

.photo_column_centred{
	 text-align: center;
	 padding:10px;
}
.photo_column{
	border: 1px solid aqua;
	vertical-align:top;
	padding:5px;
}

.photo_left_column{
	min-width:210px;
	margin-top:10px;
}

.photo_left_responsive{
	float: left;
	margin-bottom: 20px;
	margin-right: 20px;
}

p.picture_para{
	overflow:hidden;
}

.last_picture_para{
	clear:none;
	padding-bottom:10px;
	overflow:hidden;
}

.clear_photo_text{
	clear:both;
}

li {
  margin-top: 10px;
  margin-bottom:0px;
}

.footer{
	text-align: right;
	margin-right: 20px;
	margin-top:20px;
}

#SVG_contents{
 display:none;
}

#SVG_form{
 display:none;
}

#reset_button{
 display:none;
}

#SVG_section,#SVG_code{
	display:none;
}

#SVG_save{
 display:none;
 position: relative;

}

#mySVG{
	margin-left:0px;
	border: none;
}

#fill_mode_selector{
	display:none;
}

.code_example{
	width:800px;
}

#hover_panel{
	position: absolute;
	top:-1000px;
	left:-1000px;
}



.hover_panel_text_settings{
	position: relative;
	margin:0px;
	border: 1px aqua solid;	
	padding:5px;
	text-align: center;	
}

#hover_panel_text{
	 background-color: white;
	 width:200px;
}
   

#hover_panel_picture{
	position: relative;
	top:0px;
	left:0px;	

}

#hover_panel_image{

	width:200px;
	height:200px;
	
}

.hover_link{
	color: blue;
}

@media screen and (min-width:768px) {

	 .container{
		width:100%;
	 }

	 .navbar{
		width:100%;
	 }

}

@media screen and (max-width:1080px) {
	.last_picture_para{
		clear:left;
		padding-top:10px;
		padding-bottom:0px;
	}
}
@media screen and (max-width:970px) {
	.page{
		margin-left:0px;
		min-height:500px;
		min-width:550px;
		width:100%;
		height:100% !important;
	}
	.main{
		background-image: none;
		margin:0px;
		padding:0px;
	}

}


@media screen and (max-width:900px) {

	.video_block {
		height: 500px !important;
	}

	#top_banner {
		top: -500px;
		height: 300px;
		line-height: 20px;
	}

	.content_block {
		top: -490px;
	}

	.no_banner{
		top:0px !important;
	}

}

@media screen and (max-width:768px) {
	.navbar-default{
		width:100%;
	}

}

@media screen and (max-width:670px) {
	#back_video{
		display:none;
	}


	#top_banner{
		height: 100%;
	}

	.content_block{
		position:relative;
		padding-top:10px;
	}

	.logo_med{
		display:block;
	}

	.logo_small{
		display:none;
	}

	.logo_large{
		display:none;
	}

	#page_block{
		position:relative;
		top:160px;

	}

}

@media screen and (max-width: 500px) {


	.photo_list{
	margin-left: inherit;
	width:300px;
	}

	.album{
	width:130px;
	height:130px;
	}

}


@media screen and (max-width: 360px) {

	.logo_small{
	 display:block;
	}

	.logo_large{
	 display:none;
	}

	.logo_med{
	 display:none;
	}

	.navbar{
	padding-bottom: 22px;
	}
}