@charset "utf-8";
/* CSS Document */

/* zero all margins/padding and add back to specific elements where necessary(stops browser discrepencies) */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
/* Always force a scrollbar in non-IE */
/* html { overflow-y: scroll; } removed for this site */



/*color: #43505F;  80% Monart Grey */
/*color: #545F6E;  70% Monart Grey */
/*color: #79828F;  50% Monart Grey */
/*color: #A6ABB5;  30% Monart Grey */
/*color: #BEC2C9;  20% Monart Grey */


/* BASIC */
body {
	color: #243444; /* 100% Monart Grey */
	text-align: center; /*to force Microsoft Internet Explorer 5 to comply with the centering */
	font-family: 'Open Sans', sans-serif; /* font-family: Helvetica Neue, Helvetica, Arial, sans-serif; */
	font-size: 100%;
	line-height: 1.5;
	background-image: url(images/brick-image-blurred-background-compressed-jpeg-lighter.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	-webkit-background-size: cover; /* the 'cover' element makes image scale to any window size */
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow: auto; /* overflow auto and hidden get rid of bottom scroll bar */
	overflow-x: hidden;
}
h1,h2,h3,p,table,ul,ol {margin:0 0 0 0; font-weight:400;} /* 400 is normal weight of open sans */
h1 {font-size:18px;}
h2 {font-size:18px;}
h3 {font-size:15px; margin-bottom: 4px;}
h4 {font-size:12px; font-weight: bold; margin: 0 0 6px 0;} /* removed h4 from margin 12px bottom */
h6 {font-size:10px; font-weight: bold; margin: 2px 0 14px 0;} /* picture captions */
p {
	font-size:14px;
	font-weight:400; /* normal weight of open sans */
	color: #79828F;
	margin-bottom: 10px; /* this will give space between paragraphs! */
}

h1 {
	
} 
h2 {color: #c2cb20;} /* 100% Monart Light Green */
h3 {color: #243444;} /* 100% Monart Grey */ 
b {font-weight:600;} /* 600 is semi-bold weight of open sans */
strong {font-weight:600;} /* 600 is semi-bold weight of open sans */
em {font-style:italic;}
a img {border: none;} /* removes the border from an image link */
th {font-weight: bold;} /* makes all table headings bold */


/*div {
	display:block}*/

/* ------------------------- LAYOUT ------------------------------------------------------------------------- */
#wrapper {
	width: 1098px;
	margin:0 auto; /* to centre page */
	background-image: url(images/wbground.png);
	background-repeat: repeat-y;
	position: relative;
	top: 0px;
}
#header {
	width: 774px;
	margin-top: 0px;
	margin-right: 162px;
	margin-bottom: 0px;
	margin-left: 162px;
	background:#fff; /* add background colour to prevent body background showing while b-ground image loads */
	height: 145px;
}
#arm_left {
	margin-top: 120px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 162px;
	height: 792px;
	position: fixed;
	top: 0px;
	float: left;
	background-image: url(images/leftarm.png);
}	
#main_content {
	float: left;
	width: 774px;
	background-color: #FFF;
	text-align: left;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 162px;
}
#arm_right {
	background-image: url(images/rightarm.png);
	background-repeat: no-repeat;
	float: right;
	height: 792px;
	width: 162px;
	margin-top: 120px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-position: top;
	position: fixed;
	top: 0px;
	margin-left: 936px;
}
#footer {
	width: 774px;
	height: 138px;
	background-image: url(images/wbground2.png);
	padding-top: 0px;
	padding-right: 162px;
	padding-bottom: 0px;
	padding-left: 162px;
	background-repeat: repeat-y;
	position: absolute;
	z-index: 20; /* set the z-index for an absolute or relative element so it appears on the top of stacking order, in this case on top of the 'arm_right' and 'arm_left' which are fixed */
}



/* ------------------------- HEADER STYLING ------------------------------------------------------------------------- */
#logo {
	float: left;
	top: auto;
	padding-bottom: 15px;
	padding-top: 25px;
}

#header_icon_contact {
	float: right;
	margin-right: 39px;
	width: 127px;
	height: 22px;
}
#phoneno {
	margin-right: 36px;
	width: 400px;
	margin-top: 27px;
	text-align: right;
	float: right;
	margin-bottom: 5px;
}
/* --------------------------- TOP ICON CONTACT STYLING ------------------------------------------ */

#iconlist{
	position:relative;
	height: 22px;
	width: 127px;
} /* position is set to relative to allow absolute positioning inside it */
#iconlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} /* margin and padding is set to 0, list-style is removed, and all list items are absolute positioned */
#iconlist li, #iconlist a{height:22px;display:block;} /* the height of all the images are 22px */

#facebook{left:0px;width:22px;} /* 1a THE FACEBOOK ON SCREEN BOX POSITION - Positioned all the way to the left, and the width of the image is 22px */
#facebook{background:url(images/monart_icons1.png) 0 0;} /* 2a THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS - Defines the background image and its position (left 0px, top 0px) */
#facebook a:hover{background: url(images/monart_icons1.png) 0 -22px;} /* 3a AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */

#linkedin{left:35px;width:22px;} /* 1b THE LINKEDIN ON SCREEN BOX POSITION - Positioned 32px to the right (#facebook width 22px + some extra space between items 13px), and the width is 22px */
#linkedin{background:url(images/monart_icons1.png) -22px 0;} /* 2b THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS -Defines the background image (the actual png image) 22px to the right (#facebook width 22px)*/
#linkedin a:hover{background: url(images/monart_icons1.png) -22px -22px;} /* 3b AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */

#pinterest{left:70px;width:22px;} /* 1c THE PINTEREST ON SCREEN BOX POSITION - Positioned 64px to the right (start of #linkedin is 35px + #pinterest width 35px, includes extra space), and the width is 22px.*/
#pinterest{background:url(images/monart_icons1.png) -44px 0;} /* 2c THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS -Defines the background image 44px to the right (#facebook width 22px + #linkedin width 22px) */
#pinterest a:hover{background: url(images/monart_icons1.png) -44px -22px;} /* 3c AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */

#mailto{left:105px;width:22px;} /* 1d THE MAILTO ON SCREEN BOX POSITION - */
#mailto{background:url(images/monart_icons1.png) -66px 0;} /* 2d THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS -*/
#mailto a:hover{background: url(images/monart_icons1.png) -66px -22px;} /* 3d AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */




/* ------------------- TEXT NAVIGATION STYLING ------------------------------ */

#text_nav {
	float:right;
	margin-right: 39px;
	width: 420px;
	padding-top: 15px;
}
#text_nav ul{
	list-style-type:none;
	margin:0;
	padding-top:6px;
	padding-bottom:6px;
	float: right;
}
#text_nav li {
display:inline;
margin-right: 0px;}
#text_nav a {
	color:#65707E; /* 60% grey */
	width: auto;
	text-decoration:none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding-top: 6px;
	padding-right: 14px;
	padding-bottom: 6px;
	padding-left: 14px;
}
#text_nav a:hover {
	background: #C2CB20; /* 100% monart light green */
	color: #fff;
}
a#contact-button {
background: #C2CB20; /* 100% monart light green */
color: #fff;} 
a#contact-button:hover {
background: #65707E; /* 60% grey */
color: #fff;
}
	



/* ------------------------- MAIN CONTENT STYLING------------------------------------------------------------------------- */




#intro_heading {
	background-color: #c2cb20;
	text-align: left;
	padding-left: 39px;
	padding-top: 15px;
	border-top-style: solid;
	border-top-color: #eceeca;
	border-top-width: 1px;
	padding-bottom: 14px;
	padding-right: 39px;
}

#gallery_heading {
	background-color: #c2cb20; /* needs a background colour */
}
#gallery_heading, #about_heading, #services_heading, #contact_heading {
	background-image: url(images/tab.png);
	background-repeat: no-repeat;
	text-align: left;
	padding-left: 39px;
	height: 28px;
	padding-top: 2px;
}
#what_we_do {
	margin-left: 39px;
	padding-top: 10px;
}

/* gallery css is now in seperate file, see default.css for customisation /*



/* ---------------------------------- IMAGE SPRITE - SERVICES SECTION -------------------------------------- */
/* box */
#image_sprite_1_2 {
	margin-left: 39px;
	float: left;
	width: 358px;
}
/* First Image */
#column1 {
	text-align: left;
	float: left;
}
#image_1 {
	display:block;
	width:179px; 
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: 0 0; /*base image */
	background-repeat: no-repeat;
}

#image_1:hover{
	display:block;
	width:179px;
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: 0 -194px; /* moves to image 194px below (height of individual image)*/
	background-repeat: no-repeat;
}
#text_1 {
	padding-top: 15px;
}


/* Second Image */
#column2 {
	text-align: left;
	float: right;
}
#image_2 {
	display:block;
	width:179px;
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: -179px 0; /* moves to image 179px across */
	background-repeat: no-repeat;
}
#image_2:hover{
	display:block;
	width:179px;
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: -179px -194px; /* moves to image 179px across then 194px below (height of individual image)*/
	background-repeat: no-repeat;
}
#text_2 {
	padding-top: 15px;
}



/* box */
#image_sprite_3_4 {
	width: 358px;
	margin-right: 19px;/*20px less margin to allow for right image (39-20=19)*/
	float: right;
}

/* Third Image */
#column3 {
	text-align: left;
	float: left;
}
#image_3 {
	display:block;
	width:179px;
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: -358px 0; /* moves to image 358px across (2x179) */
	background-repeat: no-repeat;
}
#image_3:hover{
	display:block;
	width:179px;
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: -358px -194px; /* moves to image 358px across then 194px below (height of individual image)*/
	background-repeat: no-repeat;
}
#text_3 {
	padding-top: 15px;
	padding-bottom: 23px;
}
/* Fourth Image */
#column4 {
	text-align: left;
	float: left;
}
#image_4 {
	display:block;
	width:179px;
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: -537px 0; /* moves to image 537px across (3x179) */
	background-repeat: no-repeat;
}
#image_4:hover{
	display:block;
	width:179px;
	height:194px;
	background-image: url(images/image_sprite.png);
	background-position: -537px -194px; /* moves to image 537px across then 194px below (height of individual image)*/
	background-repeat: no-repeat;
}
#text_4 {
	padding-top: 15px;
}

/* list styling - style dot */
#text_1 ul, #text_2 ul, #text_3 ul, #text_4 ul {
	list-style-type: disc;
	list-style-position: outside; /* lets the second line align with the first line */
	margin-left: 16px;
	padding-bottom: 6px; /* adds space between bulleted items */
	color: #79828F;
}



/* ---------------------------- BOTTOM CONTACT SECTION --------------------------------------------------- */

#bottom_contact_details {
	text-align: left;
	padding-top: 12px;
	width: 358px;
	float: left;
	margin-left: 39px;
}
#about_content {
	padding-top: 10px;
	padding-bottom: 32px;
	margin-left: 39px;
	margin-right: 39px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #BEC2C9;
}

#bottom_contact_intro {
	margin-left: 39px;
	margin-right: 39px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #BEC2C9;
	padding-top: 10px;
}


/* ------------------------------------ BOTTOM ICON CONTACT STYLING ------------------------------------------- */

#footer_icon_contact {
	float: left;
	width: 127px;
	height: 22px;
	margin-top: 10px;
	margin-bottom: 20px;
}

#biconlist{
	position:relative;
	height: 22px;
	width: 127px;
} /* position is set to relative to allow absolute positioning inside it */
#biconlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} /* margin and padding is set to 0, list-style is removed, and all list items are absolute positioned */
#biconlist li, #biconlist a{height:22px;display:block;} /* the height of all the images are 22px */

#bfacebook{left:0px;width:22px;} /* 1a THE FACEBOOK ON SCREEN BOX POSITION - Positioned all the way to the left, and the width of the image is 22px */
#bfacebook{background:url(images/monart_icons1.png) 0 0;} /* 2a THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS - Defines the background image and its position (left 0px, top 0px) */
#bfacebook a:hover{background: url(images/monart_icons1.png) 0 -22px;} /* 3a AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */

#blinkedin{left:35px;width:22px;} /* 1b THE LINKEDIN ON SCREEN BOX POSITION - Positioned 32px to the right (#facebook width 22px + some extra space between items 13px), and the width is 22px */
#blinkedin{background:url(images/monart_icons1.png) -22px 0;} /* 2b THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS -Defines the background image (the actual png image) 22px to the right (#facebook width 22px)*/
#blinkedin a:hover{background: url(images/monart_icons1.png) -22px -22px;} /* 3b AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */

#bpinterest{left:70px;width:22px;} /* 1c THE PINTEREST ON SCREEN BOX POSITION - Positioned 64px to the right (start of #linkedin is 35px + #pinterest width 35px, includes extra space), and the width is 22px.*/
#bpinterest{background:url(images/monart_icons1.png) -44px 0;} /* 2c THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS -Defines the background image 44px to the right (#facebook width 22px + #linkedin width 22px) */
#bpinterest a:hover{background: url(images/monart_icons1.png) -44px -22px;} /* 3c AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */

#bmailto{left:105px;width:22px;} /* 1d THE MAILTO ON SCREEN BOX POSITION - */
#bmailto{background:url(images/monart_icons1.png) -66px 0;} /* 2d THE ACTUAL IMAGE TO BE SHOWN MEASUREMENTS -*/
#bmailto a:hover{background: url(images/monart_icons1.png) -66px -22px;} /* 3d AGAIN measure from the actual png image - For all 4 hover images we specify the same background position, only 22px further down */


#map_wrap {
	text-align: left;
	float: right;
	padding-top: 12px;
	width: 338px;
	margin-right: 39px;
	margin-left: 0px;
	padding-bottom: 32px;
}


/* ------------------------- FOOTER STYLING ------------------------------------------------------------------------- */

#footer img {
	float: left;
	padding-top: 20px;
	padding-bottom: 30px;
}
#footer_info {
	text-align: right;
	float: right;
	height: 76px;
	width: 500px;
	padding-top: 62px;
	margin-top: 0px;
	margin-right: 38px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#toplink a {
	background: url(images/back_arrow.png);
	position: absolute;
	display: block;
	bottom: 20px;
	right: -80px;
	height:96px;
	width:96px;
}
#toplink a:hover {
	background-image: url(images/back_arrowh.png);

}





p a {
	color:#79828F;
	text-decoration:none;
	border-bottom: 1px dotted;
}  /* unvisited link */
p a:visited {
	color:#79828F;
	text-decoration:none;
	border-bottom: 1px dotted;
}  /* visited link */   
p a:hover {
	text-decoration:none;
	border-bottom: 1px solid;
	color: #c2cb20;
}  /* mouse over link */
p a:active {text-decoration:none; border-bottom: 1px solid;}  /* selected link */







/* --------------------------- CLASS STYLING ------------------------------------ */


.clearfloat {
	clear:both;
}
.big_normal {
	font-size: 20px;
	font-weight: 400;
}

.bold {
	font-weight: 600;
}
.dotted_rule {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #BEC2C9;
	margin-right: 39px;
	margin-left: 39px;
}
.lightgreen_bold {
	color: #C2CB20;
	font-weight: bold;
}
.caption {
	font-size: 12px;
}
.caption_bold {
	font-size: 12px;
	font-weight: 600;
}
.footer_text {
	font-size: 11px;
	text-align: right;
	display: block;
	color: #A6ABB5;  /* 30% Monart Grey */
	padding-right: 0px;
}

.border {
	border: 5px solid #BEC2C9;
}
.script {
	font-family: 'Over the Rainbow', cursive;
	font-size: 30px;
	color: #C2CB20;
}
.script_green {
	font-family: 'Over the Rainbow', cursive;
	font-size: 26px;
	color: #C2CB20;
	display: inline;
	margin-right: 4px;
}