.mail-box{
	width:190px; 
	height:30px;
	float: right;
	background-color:#eeeeee;
	text-align: right;
	}


.mail{	font-size:14px;
	color:#636363;
	font-family: mysecondfont;
	line-height:24px;
/*background-color:cyan;*/
	text-decoration:underline dotted grey;
	margin: 0;
	padding: 5px 10px 5px 10px;
	}


.mail a{color:#636363;
	}


.mail a:hover{color:#222222;
	}


.mainlogo-box-waveart{
	position:relative;
	left:0px;
	top:0px;
	width:291px; 
	height:80px;
	padding: 5px 0px 0px 25px;
	margin-right:0px;
/*background-color:green;*/
	}


.mainlogo-image-waveart{
	margin:0px;
	padding:0px;
/*background-color:yellow;*/
	background: url('../misc/logo-referbish3crop.jpg') no-repeat center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	height: 69px;
	width: 288px;
	z-index:5;
	border-bottom:0px solid #000080;
	}


h1.main-heading {
	font-family: mysecondfont;
	font-size:32px;
	letter-spacing: 2px;
	word-spacing: 4px;
	padding: 0px 5px 10px 30px;
	}


h1.main-heading-2 {
	font-family: mysecondfont;
	font-size:32px;
	letter-spacing: 2px;
	word-spacing: 4px;
	padding: 0px 5px 10px 30px;
	}


h1.main-heading-2::after { 
	content: " Seascape Painter";
	font-family: mysecondfont;
	font-size:32px;
	letter-spacing: 2px;
	word-spacing: 4px;
	padding: 0px 0px 10px 8px;
	}


.toggle,
[id^=drop] {
	display: none;
	}


nav { 	margin:0;              /*Giving a background-color to the nav container*/
	border-top:1px solid #c0c0c0;
	position:relative;
	left:0px;top:0px;
	padding: 10px 8px 25px 15px;
	z-index:50;
/*background-color: Maroon;*/
	}


#logo {                           /*Optional logo - decided not to use it*/
	display: block;
	padding: 0px 30px;
	float: left;
	font-size:18px;
	line-height: 40px;
	width:120px;
/*background-color:yellow;*/
	z-index:5;
	}


nav:after {                /*Since we'll have the "ul li" "float:left" */
	content:"";        /*we need to add a clear after the container*/
	display:table;
	clear:both;
	}


nav ul {                      /* Removing padding, margin and "list-style" from the "ul"*/
	float: right;            /* and adding "position:reltive" */
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	

nav ul li {                    /* Positioning the navigation items inline - Menu colour*/
	margin: 0px;
	display:inline-block;
	float: left;
/*background-color: navy;*/
	border:1px solid white;
	background-color: #ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
	background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
	background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
	background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
	background-image: -o-linear-gradient(top, #ffffff, #ffffff);
	background-image: linear-gradient(to bottom,#ffffff, #ffffff);;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#ffffff);
	}


nav a {	display:block;          /* Styling the links - Menu font & font colour*/


	opacity: 0.5;
	transition: opacity .3s ease-in-out; /* vendorless fallback */
	-o-transition: opacity .3s ease-in-out; /* opera */
	-ms-transition: opacity .3s ease-in-out; /* IE 10 betas, not needed in final build. */
	-moz-transition: opacity  .3s ease-in-out; /* Firefox */
	-webkit-transition: opacity .3s ease-in-out; /*safari and chrome */




	padding:0px 20px;	
	color:#000000;
	font-family: mysecondfont;
	font-size:12px;
	letter-spacing: 1px;
	word-spacing: 2px;
	line-height:40px;
	text-decoration:none;
	z-index:5;
	}


nav a:hover {	display:block;          /*NEW FUNCTION*/
	padding:0px 20px;	
	color:#000000;
	font-family: mysecondfont;
	font-size:12px;
	letter-spacing: 1px;
	word-spacing: 2px;
	line-height:40px;
	text-decoration:none;
	z-index:5;

opacity: 1; 

	}


nav ul li ul li:hover {
/*background-color: red;*/
	}


nav ul li:hover {                    /* Menu color change on Hover */
/*background-color: brown;*/ 
	background-color: #ffffff; 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
	background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
	background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
	background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
	background-image: -o-linear-gradient(top, #ffffff, #ffffff);
	background-image: linear-gradient(to bottom, #ffffff, #ffffff);;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#ffffff);
	}


nav ul ul {             /* Hide Dropdowns by Default and giving it a position of absolute */
	display: none;
	position: absolute; 
	top: 40px;         /* has to be the same number as the "line-height" of "nav a" */
	}
	

nav ul li:hover > ul {            /* Display Dropdowns on Hover */
	display:inherit;
	}
	

nav ul ul li {		/* Fisrt Tier Dropdown */
	width:170px;
	float:none;
	display:list-item;
	position: relative;
	}


nav ul ul ul li {			/* Second, Third and more Tiers	*/
	position: relative;	/* We move the 2nd and 3rd etc tier dropdowns to the left*/
	top:-40px;			/* by the amount of the width of the first tier.*/
	left:170px; 		/* has to be the same number as the "width" of "nav ul ul li" */
	}


li > a:after { content:  ' +'; 
	}	/* Change ' +' in order to change the Dropdown symbol */


li > a:only-child:after { content: ''; 
	}


.menu {
	box-shadow: 2px 2px 7px 0px #ffffff;
	-moz-box-shadow:    2px 2px 7px 0px #ffffff;
	-webkit-box-shadow: 2px 2px 7px 0px #ffffff;
	}


.breadcrumbs-container{
	position:relative; 
	top:0px; 
	left:0px; 
	width: auto;
	height:35px; 
/*background-color:blue;*/
	margin: 0 auto;
	border-top:1px solid #c0c0c0;
	}


.breadcrumbs-container-inner{
	position:relative;
	top:0px; 
	left:0px; 
	padding:0px 0px 0px 7px;
	height:30px; 
	width:auto;
/*background-color:brown*/
	}


a.breadcrumb-text, .breadcrumb-text-last{
	color:#003366;
	font-weight: normal;
	font-size: 14px;
	text-align: left;
	font-style: none;
	text-decoration:none;
	padding:0px 3px 0px 3px;
	letter-spacing: 1px;
	word-spacing: 2px;
	line-height:20px;
/*background-color:green;*/
	font-family: mysecondfont;
	}


a.breadcrumb-text:hover{
	color: #828282;        			 /*hover colour of all text    light grey*/
	border: 0px none;
	}


.breadcrumb-text-last{
	text-decoration:none;
	}


span.breadcrumb-spacer{
	width:4px;
	height:10px;
	margin:0;
	padding:0;
	background-image:url('../misc/spacer2.png');
	background-position: center center;
	background-repeat:no-repeat;
	display:inline-block;
	background-color:transparent;
	}


span.house{
	position:relative; 
	top:2px; 
	width:16px;
	height:16px;
	margin:0;
	padding:0;
	background-image:url('../misc/house-16.gif');
	background-position: center center;
	background-repeat:no-repeat;
	display:inline-block;
	background-color:transparent;
	-webkit-transition: background-image 0.5s ease;
	-moz-transition: background-image 0.5s ease;
	-o-transition: background-image 0.5s ease;
	-ms-transition: background-image 0.5s ease;
	transition: background-image 0.5s ease;
	}


span.house:hover{
	background-image:url('../misc/house-16-hover.gif');
	}





/*--------------Media Queries---------------*/




@media all and (max-width : 768px) {

.mail-box{	
	margin: 0 auto;
	float: none;
	text-align: center;
	width:291px;
	}


.mainlogo-box-waveart {
/*background-color:blue;*/
	margin: 0 auto;
	padding: 0px 0px 0px 0px;
	}
	

h1.main-heading, h1.main-heading-2{
	text-align: center;
	font-size:28px;
	padding: 0px 10px 5px 10px;
	}


h1.main-heading-2::after { 
	font-size:28px;
	padding: 0px 0px 10px 0px;
	}


#logo { display: block;		/*Optional logo - decided not to use it*/
	padding: 0;
	width: 100%;
	text-align: center;
	float: none;
	}


nav {	margin: 0;
	padding: 15px 150px 25px 150px;
	}

nav a{	font-size:18px;
	padding:0px 0px;    /*No Indent for Menu drop down*/
	}


nav ul {              /* Stops the menu from having cumalative padding on the left */
	width:100%;
	}


.menu {	margin-top:25px;
	box-shadow: 2px 2px 7px 0px #ffffff;
	-moz-box-shadow:    2px 2px 7px 0px #ffffff;
	-webkit-box-shadow: 2px 2px 7px 0px #ffffff;
	}


.toggle + a, .menu {     /* Hide the navigation menu by default */
	display: none;
	}


.toggle-main {           /* Stylinf the toggle lable */
	position:relative;
	left:0px;
	margin:0 auto;
	display: block;
/*background-color:deeppink;*/
	padding:0px 0px 0px 0px;
	color:#ffffff;
	font-size:18px;
	text-decoration:none;
	background-image:url('../misc/menu-icon-4.jpg');
	background-repeat: no-repeat;
	width:35px;
	height:27px;
	border-width: 0px 0px 0px 0px;         /*remove borders inherited from horz menu */
	-moz-box-shadow:    2px 2px 3px 3px #ccc;
	-webkit-box-shadow: 2px 2px 3px 3px #ccc;
	box-shadow:         2px 2px 3px 3px #ccc;
	}


.toggle-main:hover {
/*background-color: olive;*/
	}


.toggle {display: block;	/* Stylinf the toggle-main lable - Font and Menu colour*/
	background-color: white;      /*Background colour - drop down tier2 toggle*/
					/* Stylinf the toggle lable - Font and Menu colour*/
	padding:0px 0px;     /*Indent for Menu drop down*/	
	color:#003366;            /*Font colour 1 of 2 - drop down tier 1*/
	font-family: mysecondfont;
	font-size:18px;
	letter-spacing: 1px;
	word-spacing: 2px;
	text-decoration:none;
	border-width: 0px 0px 0px 0px;         /*remove borders inherited from horz menu */
	line-height: 40px;
	}


.toggle:hover {background-color: white;       /*Background colour hover - drop down tier2 toggle*/
	color:grey;             /*Font colour hover*/
	}


[id^=drop]:checked + ul {	/* Display Dropdown when clicked on Parent Lable */
	display: block;
	}


nav ul li {display: block;	/* Change menu item's width to 100% */
	width: 100%;
	border-color: #c0c0c0;   /*border colour*/
	border-width: 1px 0px 0px 0px;   /*top borders - use 4value syntax to remove inherited borders*/
	margin-top:0px;
	}


nav ul ul .toggle, nav ul ul a {
	padding: 0 40px;
	}


nav ul ul ul a {
	padding: 0 80px;
	}


nav a:hover, nav ul ul ul a {
	background-color: white;
	}


nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a{
	padding:0px 20px;      /*Indent Menu drop down - tier1*/	
	color: red;        /*Font colour drop down - tier2*/	
	font-size:18px;
	}
  

nav ul li ul li .toggle, nav ul ul a {		/*Menu drop down colour Hover*/
	background-color: white;      /*Bacground colour - drop down tier1*/
 	color:#003366;  	 /*Font colour - drop down tier2 toggle*/
	}


nav ul ul{		/* Hide Dropdowns by Default */
	float: none;
	position:static;
	color: #ffffff;
	}
		

nav ul ul li:hover > ul, nav ul li:hover > ul {		/* Hide menus on hover */
	display: none;background-color: white;
	}
	
	
nav ul ul li {background-color: white;		/* Fisrt Tier Dropdown */
	display: block;
	width: 100%;
	border:none;   /*Place border on all dropdown options - If not wanted put border:none rather than 0 therwise inherited borders will show */
	}


nav ul ul ul li {
	position: static;
	}


nav ul li a{background-color: white;   /*Background colour - drop down tier1*/
	color:#003366;   /*Font colour - 2 of 2 - top level */
	font-size:18px;
	letter-spacing: 1px;
	word-spacing: 2px;
	line-height: 40px;
	}


nav ul li a:hover{
	background-color: white;   /*Background colour - drop down tier1*/
	color:grey;   /*Font colour hover*/
	}


a.breadcrumb-text, .breadcrumb-text-last{
	font-size: 10px;
	text-decoration:none;
	}
	

span.house{
	top:0px; 
	width:10px;
	height:10px;
	background-image:url('../misc/house-10.gif');
	}

	}




@media all and (max-width : 480px) {

nav {	

	padding: 15px 50px 25px 50px;
	}

	}


@media all and (max-width : 320px) {

nav {	

	padding: 15px 20px 25px 20px;
	}

	}




@media all and (max-width : 330px) {	/*This reduces the with of the menu - was set to 94% - keep at 100%*/

nav ul li {
	display:block;
	width: 100%;
	}

	}