/* ALL SITE ATTRIBUTES */

/* Body Background Colour */
#pbrown,
#marine,
#maritime,
#marketing,
#photography,
#tourism,
#web management
{background-color:#ffffff;}

/* Container */
#container {position: relative;height: 1000px;width: 1000px;border:0;margin: auto;background-color:#000000;}

/* Top Banner */
#pbrownbanner {position:absolute;top:1px;left:1px;}

/*  Menu Buttons */
.pbrownbutton{position:absolute;top:150px;left:2px;border:0;font-family:arial; height:30px;width:141px;background-color: #000000;color:#ffffff;text-align:center;line-height:30px;text-decoration:none;z-index:1;}
.pbrownbutton:hover{background-color: #bbbaba;}
.marinebutton{position:absolute;top:150px;left:144px;border:0;font-family:arial; height:30px;width:141px;background-color: #000000;color:#ffffff;text-align:center;line-height:30px;text-decoration:none;z-index:1;}
.marinebutton:hover{background-color: #bbbaba;}
.maritimebutton{position:absolute;top:150px;left:286px;border:0;font-family:arial; height:30px;width:141px;background-color: #000000;color:#ffffff;text-align:center;line-height:30px;text-decoration:none;z-index:1;}
.maritimebutton:hover{background-color: #bdbdbd;}
.marketingbutton{position:absolute;top:150px;left:428px;border:0;font-family:arial; height:30px;width:142px;background-color: #000000;color:#ffffff;text-align:center;line-height:30px;text-decoration:none;z-index:1;}
.marketingbutton:hover{background-color: #bdbdbd;}
.photographybutton{position:absolute;top:150px;left:571px;border:0;font-family:arial; height:30px;width:142px;background-color: #000000;color:#ffffff;text-align:center;line-height:30px;text-decoration:none;z-index:1;}
.photographybutton:hover{background-color: #bdbdbd;}
.tourismbutton{position:absolute;top:150px;left:714px;border:0;font-family:arial; height:30px;width:141px;background-color: #000000;color:#ffffff;text-align:center;line-height:30px;text-decoration:none;z-index:1;}
.tourismbutton:hover{background-color: #bdbdbd;}
.webmanagementbutton{position:absolute;top:150px;left:856px;border:0;font-family:arial; height:30px;width:142px;background-color: #000000;color:#ffffff;text-align:center;line-height:30px;text-decoration:none;z-index:1;}
.webmanagementbutton:hover{background-color: #bdbdbd;}

#buttonbackground {position:absolute;top:149px;left:1px;}

/* Change Menu To Highlight For Each Page On Click */
body#pbrown a#pbrownnav,
body#marine a#marinenav,
body#maritime a#maritimenav,
body#marketing a#marketingnav,
body#photography a#photographynav,
body#tourism a#tourismnav,
body#webmanagement a#webmanagementnav
{background-color: #bdbdbd;}

/* Top Banner */
#pbrownmainimage {position:absolute;top:181px;left:1px;}
#maritimemainimage {position:absolute;top:181px;right:1px;}
#webmanagementmainimage {position:absolute;top:181px;right:1px;}

/* Footer */ 
#footer{position:absolute;top:985px;left:380px;height:20px;font-size:0.6em;font-family: Arial;color:#ffffff;}

/* Unvisited Link */
a.menunav:link {color: #2173ce;text-decoration:none;}
 /* Visited Link */
a.menunav:visited {color: #2173ce;text-decoration:none;} 
/* Mouse Over Link */
a.menunav:hover {color: #000000;text-decoration:none;} 
/* Selected Link */
a.menunav:active {color: #2173ce;text-decoration:none;} 

/* Mousover Images Orange Border */
.imageborder2 img{border:0;} 
.imageborder2:hover img{border: solid 1px #2173ce;}

#pagetitle{position:absolute;top:190px;left:10px;font-size:1.2em;font-family: Arial;color:#ffffff;font-weight:bold;}

#webmanagementtext1{position:absolute;top:220px;left:10px;width:550px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext2{position:absolute;top:295px;left:10px;width:550px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext3{position:absolute;top:385px;left:10px;width:550px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}

#webmanagementtitle4{position:absolute;top:450px;left:30px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}
#webmanagementtitle5{position:absolute;top:570px;left:30px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}
#webmanagementtitle6{position:absolute;top:690px;left:30px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}
#webmanagementtitle7{position:absolute;top:810px;left:30px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}
#webmanagementtitle8{position:absolute;top:450px;left:320px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}
#webmanagementtitle9{position:absolute;top:570px;left:320px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}
#webmanagementtitle10{position:absolute;top:690px;left:320px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}
#webmanagementtitle11{position:absolute;top:810px;left:320px;font-size:0.9em;font-family: Arial;color:#ffffff;font-weight:bold;}

#webmanagementtext4{position:absolute;top:470px;left:30px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext5{position:absolute;top:590px;left:30px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext6{position:absolute;top:710px;left:30px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext7{position:absolute;top:830px;left:30px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext8{position:absolute;top:470px;left:320px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext9{position:absolute;top:590px;left:320px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext10{position:absolute;top:710px;left:320px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}
#webmanagementtext11{position:absolute;top:830px;left:320px;width:200px;font-size:0.8em;font-family: Arial;color:#ffffff;text-align:justify;}

#bullet1 {position:absolute;top:452px;left:10px;}
#bullet2 {position:absolute;top:572px;left:10px;}
#bullet3 {position:absolute;top:692px;left:10px;}
#bullet4 {position:absolute;top:812px;left:10px;}
#bullet5 {position:absolute;top:452px;left:300px;}
#bullet6 {position:absolute;top:572px;left:300px;}
#bullet7 {position:absolute;top:692px;left:300px;}
#bullet8 {position:absolute;top:812px;left:300px;}

/* Form*/
#formbox {position:absolute;top:223px;right:10px;width:415px;height:687px;background-color:#bdbdbd;opacity: 0.8;filter: alpha(opacity=40);border-radius: 15px;}
#enquirytext {position:absolute;top:240px;left:610px;font-size:1.0em;font-family: Arial;font-weight:bold;color:#FFFFFF;}
#enquirytext2 {position:absolute;top:280px;left:610px;width:350px;font-size:1.0em;font-family: Arial;color:#FFFFFF;}
.form{position:absolute;top:255px;right:40px;width: 350px;}
.form label{width: 350px;font-size:0.9em;font-family: Arial;font-weight:bold;color:#FFFFFF;display: block;padding: 10px 0px 0px 0px;line-height: 2;}
.form input.input-field{width: 100%;}
.form input.input-field, .form .tel-number-field, .form .textarea-field, 
.form .select-field{width: 350px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;border: 1px solid #C2C2C2;box-shadow: 1px 1px 4px #EBEBEB;-moz-box-shadow: 1px 1px 4px #EBEBEB;-webkit-box-shadow: 1px 1px 4px #EBEBEB;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;padding: 7px;outline: none;}
.form .input-field:focus, .form .tel-number-field:focus, .form .textarea-field:focus, .form .select-field:focus{border: 1px solid #F15A24;}
.form .textarea-field{height:200px;width: 100%;font-family:Arial;font-size:0.9em;}
.form input[type=submit],
.form input[type=button]{width: 150px;border: none;padding: 8px 15px 8px 15px;background: #EA7B00;color: #fff;box-shadow: 1px 1px 4px #DADADA;-moz-box-shadow: 1px 1px 4px #DADADA;-webkit-box-shadow: 1px 1px 4px #DADADA;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;cursor:pointer;}
.form input[type=submit]:hover,.form input[type=button]:hover{background: #FFA500;color: #fff;}
 
/* GALLERY */
#gallerythumbnailbackground {position:absolute;left:620px;top:355px;}

/* The Containing Box For The Gallery. */
#photogallery {position:absolute;top: 372px;left:65px;width:672px;height:525px;margin:auto;font-family: Arial, Helvetica, sans-serif, Verdana;font-size: 0.8em}

/* Removing The List Bullets And Indentation */
#photogallery ul {padding:0;margin:0;list-style-type:none;}

/* Remove The Images And Text From Sight */
#photogallery a.gallery span {position:absolute;width:1px;height:1px;top:25px;left:505px;overflow:hidden;background:#000000;}

/* Adding The Thumbnail Images */
#photogallery a.gallery, #photogallery a.gallery:visited {display:block;color:#000;text-decoration:none;border:1px solid #000;margin:1px 2px 1px 2px;text-align:left;cursor:default;}

/* Size Of The Unordered List To House The Thumbnails */
#photogallery ul {width:100px;height:386px;}
#photogallery li {float:left;}

/* Move The Thumbnails Into The Correct Position */
#photogallery ul {margin:0;float:right;}

/* Thumbnail Border Color */
#photogallery a.gallery:hover {border:1px solid #000000;}

/* Styling The :Hover Span */
#photogallery a.gallery:hover span {position:absolute;width:460px;height:500px;top:81px;left:18px;color:#000;background:#fff;}
#photogallery a.gallery:hover img {border:1px solid #fff;float:left;margin-right:5px;}