@import url('fontawesome/css/fontawesome.css');
@import url('fontawesome/css/solid.css');

* {padding:0; margin:0; box-sizing:border-box; font-family:arial; font-size:13px; }
html, body{ padding:0px; margin:0px; background-color:#CCC;}
body *{ margin:0; padding:0;}
html, body, normal, table, p {color:#333; text-align:left;}
p {margin-bottom: 10px;}

table { width:100%; margin:auto;}
table th { text-align:left; font-weight:bold; color:#FFF; background:#643495; }
table td { vertical-align:top; }

H1, H2, H3, H4, H5, H2 a, H2 a i{color:#000; font-weight:bold; text-align:left;}
H1{ font-size:17px; text-align:center; }
H2, H2 a, H2 a i{ font-size:17px; text-decoration:none; }
H3{ font-size:15px; }
H4, H5{ font-size:14px; }
H5{ text-align:center; }

/* PAGE LAYOUT */
.outer{ max-width:1200px; margin:auto; }

.content{ width:100%; padding:10px; background:#FFF; min-height: calc(100vh - 80px); margin:auto;}
.clear { clear:both }

/* NAVIGATION */
.links li a, .links li a:hover {color:#333; text-decoration:none; font-weight:600;}
.navigation {position:-webkit-sticky;  position:sticky; top:0; height:80px; background:#FFF; z-index:99999; }
.logo-wrapper { position:relative; float:left; height:0px; line-height: 80px; padding: 0 15px;}

.links {float:right; margin-right:10px; position:relative; margin-top:40px;}
.links li { float:left; list-style:none; position:relative; display:inline-block;}
.links li > a { position:relative; display:inline-block; padding:0 10px; line-height:30px; height:30px; font-size:14px; color:#636363;}
.links li > a:hover {color:#643495; border-bottom:2px solid #643495; border-radius:2px; }

.links li ul { position:absolute; left:0; margin:0; border-radius:2px; box-shadow:0 0 5px rgba(0, 0, 0, 0.15); display:none; min-width: 240px;}
.links li ul > li {clear:both; list-style:none; display:block; padding:0 10px; margin: 0; width:100%;}

.links li ul > li:hover > a {color:#643495; }
.links li:hover > .drop{ display:block; animation:fadeInRight 0.3s ease; -webkit-animation:fadeInRight 0.3s ease; background:#cfcfcf; border:solid 1px #643495; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.links li:hover > .drop a{color:#636363; }
.links li:hover > .drop a:hover{color:#643495; border-bottom:0px; border-radius:0px;}
.links li:hover > .drop li:hover{color:#643495;}

.user {width:100%; text-align:left; background:#643495; color:#FFF; font-weight:bold; padding:3px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}


#drop-right{margin-left:-132px;}
@keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(-200%, 0, 0); } 100% { opacity: 1; transform: none; }}

/* BUTTONS */
.btn {background-color:#a3a3a3; *background-color:#a3a3a3; font-size:11px; color:#333; vertical-align:middle; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; display:inline-block; padding:2px 10px; margin-bottom:0; *margin-left:.3em; font-size:11px; font-face: arial; line-height:14px; font-weight:600; text-decoration:none; text-align:center; vertical-align:middle; cursor:pointer; border:1px solid #bfbfbf; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); *zoom:1; -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); white-space:nowrap;} 
.btn:hover, .btn:focus, .btn:active, .btn.active {background-color:#ccb8e0;} 
.btn i{font-size:11px;}

/* CONTENT */
.pict{width:180px;}
.mainLeft	{vertical-align:middle; padding-left:10px; padding-top:50px; width: 600px; float: left; background: white; height:300px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 100px 200px;}

.mainH1, .contentH1 {font-weight:bold; color:#643495; font-size:30px; text-shadow: #999 3px 3px 3px; padding-bottom: 10px;}
.mainH2, .contentH2 {font-weight:bold; color:#333; font-size:16px; padding-bottom: 5px;}
.mainH3, .contentH3 {font-weight:bold; color:#333;}

.mainGH,.mainDM, .mainMW, .mainNM, .mainNC, .mainRL, .mainWM, .mainMD, .mainJE, .mainJC, .mainJG {width: 100%; border: solid 1px #ccc; overflow: hidden; height:250px; background-color: #ccc; background-repeat: no-repeat; background-position: right;}
.mainDM {background-image: url(../images/davidMarco.jpg); }
.mainGH {background-image: url(../images/northamptonshire_guild_hall.png); }
.mainMW {background-image: url(../images/mistyWood.jpg); }
.mainNM {background-image: url(../images/northamptonMap.jpg); }
.mainNC {background-image: url(../images/northamptonCentre.jpg); }
.mainRL {background-image: url(../images/rushdenLakes2.jpg); }
.mainWM {background-image: url(../images/waddesdonManor1.jpg); }
.mainMD {background-image: url(../images/marcoDavid.jpg); }
.mainJE {background-image: url(../images/JeyesFront.jpg); }
.mainJC {background-image: url(../images/jeyesConservatory.jpg); }
.mainJG {background-image: url(../images/jeyesGarden.jpg); }
.required {color:red;}

#privacy{ display:none; position: fixed; top: 50px; bottom:50px; left:50px; right:50px; width: (100vh - 100px); height: (100vh - 100px;); max-width:100%; max-height:100%; overflow-x: auto; background-color:#FFF; border: 3px solid #333; z-index: 9; padding:4px; }

.message, .error {width:85%; color:red; font-weight:bold; vertical-align:bottom;}
.error {text-align:center;}

.input {border: solid 1px #333;}
.inputErr {border: solid 1px red;}

input[type=text] {width:100%; background:#FFF; color:#333;}
input[type=password] {width:100%; background:#FFF; color:#333;}
input[type=text]:read-only {border: solid 1px #FFF; pointer-events:none;}

textarea {width:100%;  height:160px; background:#FFF; color:#333; border: solid 1px #333;}

select {width:100%; background:#FFF; color:#333; border: solid 1px #333;}
select[readonly] {border: solid 1px #FFF; pointer-events:none;}
select[readonly] option {display: none;}

input[type=checkbox] {width:15px; cursor:pointer;}

.tbl {width:100%;}
.tbl th {width:100%; background:#643495; color:#FFF; font-weight:bold; padding:2px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}

.tbl2 {width:80%; margin:auto;}
.tbl2 th {font-weight: bold; text-decoration: none; vertical-align: top; text-align: left; background:#643495; padding:2px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.tbl2 td{vertical-align:top; border-spacing: 2px;}
.tbl2 tr:nth-child(even) {background-color: #e8e8e8;}

#ALevel0{color:#FFFFFF; background-color: #690101; text-align:center; font-weight:bold; } /* Failed */
#ALevel1{color:#FFFFFF; background-color: #a8a8a8; text-align:center; font-weight:bold; } /* Disabled */
#ALevel2{color:#FFFFFF; background-color: #4e6e46; text-align:center; font-weight:bold; } /* Read */
#ALevel3{color:#FFFFFF; background-color: #166901; text-align:center; font-weight:bold; } /* Read Write */
#ALevel4{color:#FFFFFF; background-color: #021361; text-align:center; font-weight:bold; } /* Admin */

/* Forum Settings */
.tblforum{width:90%; margin:auto;}
.tblforum th {font-weight: bold; text-decoration: none; vertical-align: top; text-align: left; background:#643495; padding:6px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.tblforum tr:nth-child(even) {background-color: #e8e8e8;}
.tblforum td {vertical-align:top; border-spacing: 2px; padding:6px; border-bottom: solid 1px #333; height:60px; vertical-align:middle;}

.forumTitle {font-weight:bold; color:#293675; text-decoration:none; font-size: 16px; padding-bottom: 10px;}
.forumTitle i {padding-right: 5px; font-size: 16px; padding-bottom: 10px;}
.forumPost { text-align:center; font-style:italic; }
.forumMessage {font-weight:bold; color:#293675; font-size:12px; text-decoration:none;}
.forumMessage i {font-size:20px; padding-right: 10px; padding-bottom: 10px; }
.forumMessageBy {font-weight:normal; font-size:12px; font-style:italic; margin-top: 10px;}
