/*---------------
COPYRIGHT NAUGHTYGECKO.COM V2.0 2011
MAIN STYLE SHEET
---------------*/

body {
	background-image: url(../images/BgPattern.png);
	background-repeat: repeat;
	font-family: "Arial";
	font-size: 80%;
	text-align: center;
	margin: 0px 0px;
	padding: 0px 0px;
	width: 100%;
	color: #403f3f;
	line-height: 22px;
	}

@font-face {
font-family: "Rondalo";
src: url("../RONDALO.TTF") format("opentype");}


img {border: 0px none;}

address { color: #cfcfcf; font-size:80%; font-style: normal; font-weight: bold; float: left;}

a:link {text-decoration: none; color: #403f3f;}
a:visited {text-decoration: none; color: #403f3f;}
a:hover {text-decoration: none; color: #b50000;}
a:active {text-decoration: none; color: #b50000;}

h1 {
	font-family: "Rondalo", Arial;
	font-size: 280%;
	font-weight: normal;
	color: #b50000;
	text-align: left;
	margin: 0;
	padding: 0px;
	line-height: 100%;
	}

h2 {
	font-family: "Rondalo", Arial;
	font-size: 200%;
	font-weight: normal;
	color: #b50000;
	text-align: left;
	margin: 0;
	padding: 0px;
	}

h3 {
	font-family: "Rondalo", Arial;
	font-size: 200%;
	font-weight: normal;
	color: #b50000;
	text-align: left;
	}
	
h4 {
	font-family: "Arial";
	font-size: 140%;
	font-weight: bold;
	color: #403f3f;
	text-align: left;
	margin: 25px 0px 5px 0px;
	padding: 0px;
	}

p {
	text-align: left
	}

p.large {font-size: 150%; color: #403f3f; margin: 0px; padding:0px; }
strong {font-weight: bold; color: #b50000;}
.grey {color: #403f3f;}


/*------------------------------
HEADER
------------------------------*/

#header  {width: 960px; height: 100px; margin: 15px auto 0 auto;}		
#logo	{width: 487px; height: 87px; float: left;}
#callus {width: 473px; height:65px; text-align: right; float: left; font-family: "Rondalo", Arial; font-size: 220%; color: #efefef; letter-spacing: 1px;}
#callus .number { font-size: 80%;}
#socialheader {width: 473px; height: 35px; float: left; text-align: right;}
.socialicon {margin-left: 5px;}



/*------------------------------
NAVIGATION
------------------------------*/

#navcontainer {width: 100%; height: 50px; background-color: #282828;}
#navigation {width: 960px; padding-top: 14px; margin: 0px auto; text-align: right;}
#navigation a.nav  {margin-left: 40px; font-family: "Rondalo", Arial; color: #efefef; font-size: 135%; letter-spacing: 1px;}
#navigation a:hover.nav  { border-bottom: #b50000 4px solid;}
#navigation a.navlive { border-bottom: #b50000 4px solid; margin-left: 40px; font-family: "Rondalo", Arial; color: #efefef; font-size: 135%; letter-spacing: 1px;}


/*------------------------------
BANNER CONTENT
------------------------------*/

#bannercontent {width: 100%; height: 320px; background-image: url(../images/BgPatternDark.png); background-repeat: repeat; border-top: #b50000 solid 9px; border-bottom: #b50000 solid 9px;}

#banner {width: 960px; height: 280px; margin: 0px auto 0px auto; padding: 20px 0;}

img.staticbanner {border: #b50000 1px solid;}


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

#maincontent {width: 920px; height: auto; margin: 0px auto; background-color: #efefef; padding: 20px; clear:both;}
#maincontent a {color: #b50000; text-decoration: underline;}
#maincontent img.about {float: right; margin: 5px 0px 5px 20px;}
#columntext {width: 100%; height: 185px; border-bottom: 2px dashed #cfcfcf; padding-bottom: 15px; margin-bottom: 20px; text-align: justify;}
#columntext p {text-align: justify;}
.ctext1 {width: 440px; margin-right: 20px; float:left;}
.ctext2 {width: 440px; margin-left: 20px; float: left;}
.fomright span {background-image: url(../images/findoutmore.png); width: 115px; height: 22px; float: right;}
.fomright a:hover span { background-position: 0 -22px;}
.fomleft span {background-image: url(../images/findoutmore.png); width: 115px; height: 22px; float: left;}
.fomleft a:hover span { background-position: 0 -22px;}
.homeimagecontainer {width: 100%; height: 210px; border-bottom: 2px dashed #cfcfcf; padding-bottom: 15px; margin-top: 20px; text-align: justify;}
.homeimage {width: 290px; float: left; padding: 20px 0px;}
.homeimagecentre {width: 290px; margin: 0px 25px; float: left; padding: 20px 0px;}
.hometitle {border-bottom: 2px dashed #cfcfcf; width: 100%; padding-bottom: 20px; margin-bottom: 5px;}
.gentitle {border-bottom: 2px dashed #cfcfcf; width: 100%; padding-bottom: 20px; margin-bottom: 20px;}
.abouttitle {border-bottom: 2px dashed #cfcfcf; border-top: 2px dashed #cfcfcf; width: 750px; padding-bottom: 20px; padding-top: 20px; margin-top: 20px; margin-bottom: 20px;}
.abouttitleLong {border-bottom: 2px dashed #cfcfcf; border-top: 2px dashed #cfcfcf; width: 100%; padding-bottom: 20px; padding-top: 20px; margin-top: 20px; margin-bottom: 20px;}
.dashedline {height: 10px; width: 100%; border-bottom: 2px dashed #cfcfcf; margin-top: 0px; margin-bottom: 20px;}
.foliotitle {border-bottom: 2px dashed #cfcfcf; width: 440px; padding-bottom: 20px; padding-top: 20px; margin-bottom: 20px;}


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

#footer {width: 100%; height: 190px; background-color: #282828; padding: 25px 0 0 0; border-bottom: #b50000 solid 7px; border-top: #b50000 solid 9px;}
#footercontent {width: 960px; margin: 0px auto; text-align: left;}
#footertop {width: 960px; height: 130px; float:left;}
#footerbottom {width: 960px; height: 35px; float: left; margin: 0px; padding: 0px;}
#footer .linkcontainer { border-left: #403f3f solid 2px; padding: 0 65px 0 8px; float: left;}
#footer .title {font-family: "Rondalo", Arial; font-size: 180%; margin-bottom: 5px; color: #efefef;}
#footercontent a { font-family: "Arial"; font-size: 115%; color: #cfcfcf;}
#footercontent a:hover {color: #efefef; text-decoration: underline;}
#footerBL {width: 480px; padding-top: 10px; float:left; margin-top: 25px;}
#footerBR {width: 480px; text-align: right; float: left; margin-top: 25px; }




/*------------------------------
PORTFOLIO
------------------------------*/

.gallerythumbs {width: 100%; height: auto; overflow: auto;}
img.folioImg {width: 200px; height: 100px; float: left; margin: 0px 36px 36px 0px; border: 1px solid #403f3f; }
img.folioImg2 {width: 200px; height: 100px; float: left; margin: 0px 0px 36px 0px; border: 1px solid #403f3f; }
#fcoltext {width: 100%; height: 185px; padding-bottom: 15px; margin-bottom: 20px; text-align: justify;}
#fcoltext p {text-align: justify;}
#ftext1 {width: 440px; margin-right: 17px; float:left;}
#ftext2 {width: 440px; margin-left: 17px; float: left;}
#fcenter {width: 5px; background-color: #cfcfcf; height: 800px;  display: block; float: left; margin-top: 120px;}



/*------------------------------
ABOUT PAGE
------------------------------*/




/*------------------------------
SERVICES
------------------------------*/

.servicesthumb {border: 5px solid #cfcfcf; float: left; margin: 0px 30px 0px 0px;}
.red {color: #b50000; font-size: 100%; text-align: justify; padding-top: 0px; line-height: 20px;}
p.sub {font-size: 150%; color: #403f3f; margin: 0px; padding:0px; }
#non-toggle {width: 100%; height: 158px; border-bottom: 2px dashed #cfcfcf;}

#toggle-view {
    list-style:none;   
    margin:0;
    padding:0;
}
 
#toggle-view li {
	margin: 15px 0px 20px 0px;
	padding-bottom: 23px;
	position: relative;
	cursor: pointer;
	border-bottom: 2px dashed #cfcfcf;}
	
#toggle-view p.expanded {
	padding: 10px 0px 20px 0px;
	margin-bottom: 0px;
	display: none;
} 

#toggle-view span.more {width: 70px; height: 22px; float: left;  margin-top: 3px;}
#toggle-view span.less {width: 70px; height: 22px; float: left;  padding-bottom: 15px;}

span.sep {font-size: 110%; color: #282828; font-weight:bold;}


span.servinc {font-size: 140%; font-weight: bold; color: #403f3f; text-align: left; margin: 35px 0px 5px 0px; padding: 0px;}

span.servincred {font-size: 140%; font-weight: bold; color: #b50000; text-align: left; margin: 35px 0px 5px 0px;}


/*------------------------------
CONTACT
------------------------------*/


#enquiriescontent {	width: 100%; height:auto;}
#cleardiv {clear:both;}

/* CONTACT DETAILS SIDE BAR */
#contactdetails {width: 226px; height: 280px; background-color: #cfcfcf; border: 1px solid #403f3f; padding: 30px; margin: 20px 0px; float: left;}
#contactdetails p {font-size:120%;}	
#contactdetails .point {color: #b50000; font-size: 130%; font-family: "Rondalo", Arial;}
.contacttitle {border-bottom: 2px dashed #efefef; width: 100%; padding-bottom: 20px; margin-bottom: 20px;}


/* CONTACT FORM */
#formColumn {width: 490px; border: solid 1px #403f3f;  text-align: center; margin: 20px 80px 0px 0px; padding: 30px; background-color: #cfcfcf; float: left; }

#formContent {
	width: 490px;
	margin: auto;
	text-align: left;
	overflow: hidden;
	float: left;
	}

#formContent label {
	margin: 10px 0 10px 0;
	display: block;
}

#formContent label span {
	font-size: 130%;
	width: 480px;
}

form#contactform input.submitbutton {
	width: 125px;
	height: 50px;
	margin-top: 30px;
	background: url(../images/submit.png);
	border: 1px solid #b50000;
	text-indent: -9999px;
	border: 0px;
	display: block;
	clear: both;
	float: left;
	cursor: pointer;
	}
	
form#contactform input.submitbutton:hover {background: url(../images/submit.png) 0 -50px;}

label.error { font-weight: bold; color: #b50000;}

form#contactform input.required {
	font-family: "Arial";
	height: 25px;
	width: 478px;
	border: 1px solid #403f3f;
	padding:5px;
	font-size:16px;
	color: #282828;
}

form#contactform textarea {
	font-family: "Arial";
	font-size: 125%;
	color: #282828;
	padding: 5px;
	border: 1px solid #403f3f;
	width: 478px;
}

#sentsuccess {border-bottom: 2px dashed #efefef; width: 100%; padding-bottom: 20px; margin-bottom: 20px; margin-top: 5px;}
#sentsuccess img {margin-right: 10px;}


/*-------------------------------*/