/*Whole new stylesheet from 31/3/2017*/
html, body {margin: 0px; padding: px; height: 100%;}
body {font-family: Arial; color: black; background: #8fa2ba url(../common/sea.jpg) no-repeat; background-size: 100% 100%; background-attachment: fixed; color: black; margin-bottom: 50px;}
a {color: #0000cc;}
table, tr, td, p, select, input, textarea {font-size: 100%;}
table td {vertical-align: top;}
img {border: none;}
h1 {font-size: 180%; color: #333333; margin:0; padding:0;}
/*h2, h3, h4 {margin-bottom: -10px;} /*Added for scripts/superdatabase.php to make it less spacy*/
p, li {max-width: 800px;}

/*Cookie consent*/
#cookieconsent {width: 100%; background: black; color: white; position: absolute; top:0; left:0; z-index:1000;}
#cookieconsent p {padding: 0 5px;}
#cookieconsent a {padding: 5px; background-color: yellow; color: black; margin: 4px;}

/*Header*/
#header {font-size: 200%; float: left; text-decoration: none; padding: 10px 40px 10px 10px;} /*40px padding on right*/

/*Menu styles*/
#menu {list-style-type: none; margin: 0; padding: 20px 10px 10px 0;}
#menu ul {list-style-type: none; margin: 0; padding: 0;} /*any sub menu*/
#menu li {margin: 0; padding: 0;} /*any level list element*/
#menu a {text-decoration: none;}
#menu {position: relative;} /*main menu*/
#menu > li {float: left; padding: 0 5px 2px 5px;} /*top level menu items*/
#menu > li > a {display:block;}
#menu > li > ul {background: #5aeefd; border: 1px solid #5a678e; position: absolute; left: -9999px;} /*hide sub menus*/
#menu > li:hover > a {text-decoration: underline;}
#menu > li:hover > ul {left: auto; margin-left: -5px; padding: 5px;} /*show sub menus*/
body.section-home.page-index li#menu-home, body.page-contact li#menu-contact, body.page-freelance li#menu-freelance,
body.section-magictyper li#menu-magictyper, body.section-des li#menu-des, body.section-scripts li#menu-scripts,
body.section-science li#menu-science, body.section-writing li#menu-writing {font-weight: bold;}
#menu > li:hover > ul > li {padding-bottom: 5px;}
#menu > li:hover > ul > li > a {font-weight: normal;} /*so submenu of selected menu is not bold*/

/*Content div*/
#content {clear: both; padding: 0 10px 15px 10px;}
#goog {float: right;}
body.section-home #goog, body.section-home #goog ins, body.section-science #goog, body.section-science #goog ins, body.section-writing #goog, body.section-writing #goog ins {display: none;}
img.mobile {width: 160px; vertical-align: middle;}

/*Footer*/
#footer {position:fixed; height:20px; background-color:black; bottom:0; left:0; margin:0; width:100%; color: white;}

/*As soon as menu starts to wrap*/
@media only screen and (max-width: 720px) {
	#header {padding-right: 20px;}
	#menu {padding-top: 10px;}
}

@media only screen and (max-width: 520px) {
	body.page-contact table td {display: inline-block; width: 300px;}
	body.page-contact table td:nth-of-type(2) {padding-bottom: 10px;}
	body.page-contact table input, body.page-contact table textarea {max-width: 280px;}
}

/*On small screens*/
@media only screen and (max-width: 390px) {
	#header {padding-bottom: 25px;} /*so menu items don't wrap beneath it*/
}