/* reset script as recommended online */
* {  
	vertical-align: baseline;  
	font-family: inherit;  
	font-style: inherit;  
	font-size: 100%;  
	border: none;  
	padding: 0;  
	margin: 0;  

	/* use border-box model for sizing rather than content-box so padding doesn't add to the size of elements */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}  

body
{
/* full screen background */
background-image: url("images/bg1.webp"); 
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
min-height: 100%;

padding:0;
margin:0px auto auto auto;

/* default font details for the site */
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#514c48; 
}
a{
text-decoration:underline;
color:#00bf6f; /* default link colour */
}
p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px; 
line-height:17px;
text-align:justify;
padding:5px 0 5px 0; /* top right bottom left */
margin:0px;
}
span{
color:#FF9900;
}
p.clear{
clear:both;
}
img.left_img{
float:left;
padding:5px 12px 0 0;
}
h1{ /* for top page header */
font-family:Trebuchet MS, Comic Sans, Verdana, sans-serif;
font-size:36px;
font-weight:bold;
padding:5px 0 5px 0; /* top right bottom left */
margin:0px;
/* note no colour definition because that's different for mobile and desktop - they take it from the screen area definition */
/* ?? difference between float and text align??? */
}
h2{ /* for heading below menu (or below top picture on mobile */
font-family:Trebuchet MS, Comic Sans, Verdana, sans-serif;
font-size:29px;
font-weight:bold;
color:#00bf6f; /* main title colour */
}
h3{ /* headings in description text */
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
font-weight:bold;
padding:20px 0 5px 0; /* top right bottom left */
margin:0px;
color:#514c48;
}
#main_container{ /* white page where all content goes */
width:900px;
height:auto;
margin:auto;
padding:0px;
position:relative;
}
#main_content{
width:auto;
clear:both;
height:auto;
background-color:white; /* picker at http://www.w3schools.com/colors/colors_picker.asp */
}

/*---------------- banner ----------------------*/
#banner{ /* background coded here, text and extra images in html */
width: 100%; 
height:100px; 
margin:auto;
padding:0px 0 0 0; /* top right bottom left */

font-family:Trebuchet MS, Comic Sans, Verdana, sans-serif;
font-weight:bold;
color:#00bf6f; /* top header colours */
float:left;
}
#logo { /* gold logo on desktop version */
width: 22%;
height:95%;
float:left;
margin:0px 0px 5px 0px; /* top right bottom left */

background: url("images/logo.jpg") no-repeat center;
background-size: 65%; 
}
#tagline { /* area to the right of logo at the top of the page */
width: 75%;
float:left;
padding:10px 0px 0 0px; /* top right bottom left */
text-align: left;
color:#00bf6f; /* top header colours */
}
#contact-details { /* details just below top heading */
width: 75%;
float:left;
height:70%;
margin:0px 0 0 0px; /* top right bottom left */
font-size:16px;
}
#page-title { /* title section below menu */
width: 100%; 
float:left;
height:50px; 
margin:0;
padding:15px 15px 0px 15px; /* top right bottom left */
text-align: center;
}
/* banner link colours, without format */
a.link-noformat:link, a.link-noformat:visited {
text-decoration:none;
color:inherit;
}
a.link-noformat:hover {
text-decoration:none;
color:inherit;
background-color: #A2F8CC;
}

/*---------------- menu section ----------------------*/
#menu-bar { 
width: 100%;
height: 48px;
margin:0;
padding:0px 0 0 15px; /* indent the menu to centre it */
background-color:#058f6b; /* fills in for nudging the bar across */
font-family:Arial, Helvetica, sans-serif;
float:left;
color:white; 
}
/* Add a background color to the top navigation */
.topnav {
  overflow: hidden;
  
  /* stop the bar expanding when an underline is placed below a link */
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  padding: 14px 9px; /* creates spacing between menu items */

  color: white;
/*  background-color: transparent;
*/
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;

  border-right: 1px dashed #bcc0cb; /* creates a divider */
}
.topnav a.navLast { /* sorts problem of last link wanting no divider(right border) */
  border-right-style:none;
}
.topnav a.navLastSelected { /* provide both no divider at end AND link being selected */
  border-right-style:none;
  background-color: #01d088;
}
.topnav a.navSelected:link, a.navSelected:visited, a.navSelected:hover { /* make current page highlighted */
  background-color: #01d088;
}
.topnav a:hover { /* thick underline when hover */
  border-bottom: 5px solid #01d088;
}
.topnav a:active { /* give colour the moment the link is clicked - good practice for mobile */
  background-color: #01d088;
}
/* Hide the menu icon that opens and closes the topnav on small screens */
.topnav .icon {
  display: none;
}


/*----------------main content area----------------*/
#left_content{ /* left hand column */
width:50%;
float:left;
height:auto;
padding:0px 15px 0 35px; /* top right bottom left */
}
#right_content{ /* right hand column */
width:50%;  
float:right;
height:auto;
padding:0px 35px 0 15px; /* top right bottom left */
}
.bulletindent { /* keeps the bullet text inside the column (instead of the bullet being in the margin */
text-align:justify;
line-height:17px;
padding:5px 0 5px 22px; /* top right bottom left */
font-size:15px;
}
.bulletindent2 {
text-align:justify;
padding:5px 0 5px 22px; /* top right bottom left */
font-size:15px;
}

/*----footer---------*/
#footer{
width:100%;
clear:both;
padding:15px 10px 15px 10px;
text-align:center;
color:#999999;
font-size:11px;
font-style: italic;
}


/*---------------------------------------------------------------------------------------------------------*/
/* RESPONSIVE stuff zzz */
/* When the screen is less than X 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: 890px) {

body {
background-image: none;
}
#main_container { /* page where text goes - full-window on mobile version */
width:100%;
}
#main_content {
width:auto;
clear:both;
height:auto;
background-color:#ffffff; /* picker at http://www.w3schools.com/colors/colors_picker.asp */
}

/*---------------- banner ----------------------*/
#banner { /* background coded here, text and extra images in html */
height:auto;
margin:auto;
color:#ffffff; /* top header colours */
}
#logo { /* use gif file here, with background showing through */
width:8%;
height:auto;
min-height:50px; 
margin:0px 10px 0 10px; 
max-width:35px; /* prevent it expanding so much that top/bottom lines aren't visible */

/* currently no logo created for mobile version? - home icon instead, maybe this is better? */
background: url("images/home-2-128.gif") no-repeat center; 
background-size: 90%; 
}
#tagline { /* top header on the page */
width: 70%; /* experimenting shrinking the window shows this avoids overlap with menu */
padding:3px 15px 0 40px; /* top right bottom left */
text-align: center;
					/* font size declaration here on Biodanza version - done first with logo */
color:#ffffff; /* title colour on mobile */
}
#contact-details { /* contact information that's just below main header on desktop version */
display: none;
}
#sunset-strip { /* show smaller version of desktop background at the top of mobile page */
width: 100%;
height:200px;
background: url("images/bgmob.webp") no-repeat center; 
background-size: 100%;
}
#menu-bar{ /* moved up onto top line, with only menu icon visible until clicked */
width: 30%;
max-width: 180px; /* stop it going unnecessarily wide on medium screens */
max-height: 40px;
float:right;
background-color:transparent; 
padding:0px 0 0 0px; /* top right bottom left */

position: absolute;
right: 0px;
top: 0px;
}
#page-title {
height:auto; 
padding:10px 10px 0px 10px; /* top right bottom left */
text-align: center;
}

/* redefine some font styles for mobile version */
h1{ /* for top page header ON MOBILE */
font-size:32px;
}
h2{ /* for heading below menu (or below top picture on mobile */
font-size:26px;
}
h3{ /* headings in description text */
font-size:18px;
}
p{
font-size:16px; 
}

/* navigation styles - transparent area with just menu icon, expanding to solid background menu */
.topnav {
  background-color: transparent; 
}
.topnav a {
	display: none;   
	font-size: 14px;
	font-weight: normal;
	padding: 10px 10px;
	border-right: none; /* remove divider */
} 
.topnav a.navSelected:link, a.navSelected:visited { /* NO current page highlighting, just use standard colour */
	background-color: #058f6b; /* overrides navSelected:hover if set to transparent */
}
.topnav a:hover, a.navSelected:hover { /* no underline in mobile mode */
	border-bottom: none;
	background-color: #01d088;
}
.topnav a.icon {
	float: right;
	display: block;
	padding: 20px;
	background-color:transparent; 
}
/* 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) */
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
	position: absolute;
	right: 0;
	top: 0;
}
.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
}

/* container for the menu bar or cross */
#icon-container {
width: 25px;
height: 25px;
float: right;
margin: 10px 15px;
background: url("images/menu-closed3px-white.gif") center/100% no-repeat; 
cursor: pointer;
}

#left_content, #right_content { /* main content area - single column on mobile */
width:100%;
float:left;
padding:0 2% 0 2%; /* top right bottom left */
}

} /* end responsive section */