/* CSS Document */

img { 
    border:0; 
}

body {
	padding:0; margin:0; background:#221100;}
	
p, div, ul, li, img, h1, h2, h3 ,a {
		padding:0; margin:0;
		font-family: sans-serif;
		}
.spacer {
		clear:both;
		line-height:1px;
		font-size:1px;
}
form, label, input {
		padding:0; margin:0;
		}
ul {
	list-style:none;
}

/*-----------------------*/
div#main{width:778px; margin:0 auto 0 auto;}
div#main img.logo{float:; margin:44px 0 0 19px;}


div#main ul.topnav { 
	width:778px; 
	float:left; 
	height:30px; 
	background: url(images/nav.png) repeat-x; 
	padding: 0 0 0 0;
}

div#main ul.topnav li { 
	float:right;
}


div#main ul.topnav li a {
	background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    height: 0;
    overflow: hidden;
    padding: 37px 0 0 0;
    width:78px;
    list-style: none;
}


div#main h2.gallary{ background:#000; width:299px; height:17px; padding:5px 0 0 16px; float:right; font:bold 11px/14px Verdana, Arial, Helvetica, sans-serif; color:#CCCCCC;}
div#main div#header{background: url(images/mop1.jpg) no-repeat; width:778px; height:295px; display:block; clear:both;}
/*--------body-------------*/
div#main div#body{ width:778px; height:380px; background:#ffffee; padding:0 0 13px 0;}
div#body div.left{padding:10px 0 0 19px; margin: 10px 0 0 0; float:left; width:365px; height: 360px;}

div#body div.right {
padding:10px 10px 0 15px; 
margin: 10px 0 0 0; 
float:right; 
width:360px; 
height: 360px; 
border-left: solid; 
border-color: gray;
border-left-width: thin;
}

div#body div.right p {font-size: small; color: gray;}

div#body div.left p{ color:#7A8282; font:11px/14px Tahoma, Arial, Helvetica, sans-serif; width:361px; margin:14px 0 0 0;}
div#body div.left p a{ text-decoration:underline; color:#7A8282;}

div#body form.search{ width:370px ; height:210px; background:url(images/form_bg.gif) repeat-x  0 0 #fff ; border:1px solid #BDBFBF; float:right; padding:0 0 9px 0; margin:0 0 14px 0; clear:right;}

div#body div.left p a:hover{text-decoration:none;}

div#body form.search img.head{ margin:10px 0 10px 16px; clear:both;}

div#body form.search label{
color:#535858; 
font:bold 11px/14px Tahoma, Arial, Helvetica, sans-serif; 
margin:15px 18px 0 31px; width:92px; float:left; }
div#body form.search select.one{ width:143px; height:20px; margin:15px 0 0 0; border:#80A2C2 1px solid; float:left; clear:right;}
div#body form.search select.two{ width:172px; height:20px; margin:15px 0 0 0; border:#80A2C2 1px solid; float:left; clear:right;}
div#body form.search select.three{ width:51px; height:20px; margin:15px 0 0 0; border:#80A2C2 1px solid; float:left;}
div#body form.search select.four{ width:39px; height:20px; margin:15px 0 0 0; border:#80A2C2 1px solid; float:left;}
div#body form.search select.five{ width:79px; height:20px; margin:15px 0 0 0; border:#80A2C2 1px solid; float:left; }
div#body form.search img.date{ margin:15px 0 0 0; float:left;clear:right;}
div#body form.search input.submit{ width:74px; height:16px; border:1px solid #697779; color:#535858; font:bold 11px/12px Tahoma, Arial, Helvetica, sans-serif; text-align:center; float:left; padding:0 0 4px 0; margin:12px 0 0 139px; background:#fff; cursor:pointer;}
div#body h3.tech{ width:741px; border-bottom:1px solid #ABB5B6; margin:0 0 0 19px; clear:both;}
div#body h3.tech img{ margin:0 0 15px 0;}
div#body div.ads{ width:741px; height:56px; background:#fff; margin:2px 0 0 19px; padding:13px 0 0 0 ; text-align:center;}
div#body div.ads img{ float:left;}
div#body p.brd{ margin:3px 0 0 19px; border-bottom:1px solid #ABB5B6; line-height:0; font-size:0; width:741px;}
/*-----------------------------*/
div#body p.footer{ font:11px/14px Tahoma, Arial, Helvetica, sans-serif; text-align:center; margin:0 0 0 0; color:#060602;}
div#body p.footer a{ color:#060602; text-decoration:none; margin:0 0 0 0;}
div#body p.footer a:hover{ text-decoration:underline;}
/*-----------------*/
div#main div.foot{ height:67px; width:778px; background:url(images/footer_bg.jpg) repeat-x; margin:0 auto 0 auto; text-align:center; color:#FFFFFF; font:11px/14px Tahoma, Arial, Helvetica, sans-serif; padding:12px 0 0 0;}
div#main div.foot a{ margin:5px 0 0 0; color:#FFFFFF; text-decoration:underline;}
div#main div.foot a:hover{ text-decoration:none;}

#logo {
	height: 110px;
	width:778px;
	background-color: #ffffee;
}

#nav li a#nav1{
    background-image: url(images/home_button.png);
}
#nav li a#nav2{
    background-image: url(images/about_button.png);
}
#nav li a#nav3{
    background-image: url(images/gallery_button.png);
}
#nav li a#nav4{
    background-image: url(images/prices_button.png);
}
#nav li a#nav5{
    background-image: url(images/contact_button.png);
}

h1 {
	font-size: large;
	color: #ff0099;
	font-style:normal;
}

.contactForm fieldset {
	width:300px;
	height:100px;

}

div.clearBoth {
	clear:both;
}

.QuestionForm {
	width:550px;
	border: none;
	}
.QuestionForm fieldset {
	padding:20px;
	}
.QuestionForm p{
	padding-bottom:15px;
	display:block;
	float:left;
	width:100%;
	}
.QuestionForm input {
	margin-right:10px;
	padding:2px;
	width:250px;
	float:left;
}
.QuestionForm textarea {
	width:100px;
}

.QuestionForm input.submit {
	padding:2px;
	border:none;
	width:130px;
	}
.QuestionForm label {
	padding:5px 0;
	float:left;
	text-transform:uppercase;
	}
.QuestionForm span.red {
	color:#FF0000;
	}
fieldset {
border: none;
font-family: sans-serif;
font-size: small;
color: gray;
font-style: italic;
}

fieldset span {
	color: #ff0099;
}
 
legend {
display: none;
}
 
fieldset ul {
list-style: none;
}
 
label {
display: block;
float: left;
width: 160px;
}
 
input[type="text"] {
	margin-bottom: 5px;
}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}

.clearfix {
	display:inline-block;
}

/*Gallery */

#pictures {
	width: 500px;
	height: 480px;
	padding: 10px;
	float: left;
}

#pictures a {
	color: #ff0099;
	text-decoration: none;
}

#pictures a:hover {
	text-decoration: underline;
}

#gallerybody {
	width:778px; 
	height:520px; 
	background:#ffffee; 
	padding:0 0 13px 0;
}

#galleryright {
	width:230px;
	height: 503px;
	background: url(images/mop.jpg) no-repeat;
	float: right;
}

#galleryright1 {
	width:230px;
	height: 533px;
	background-color: lime;
	float: right;
}

#pictures p {
	font-size: small;
	color: gray;
	padding: 10px 0 10px 0;
}

/*Prices */

#pricesleft {
	width: 450px;
	height: 480;
	padding: 10px;
	float: left;
}

#pricesleft p {
	font-size: small;
	color: gray;
	padding: 10px 0 10px 0;
	line-height: 5px;
}

#pricesleft span {
	font-style: italic;
	color: #ff0099;
}

#pricesleft li {
	list-style: disc;
	color: gray;
	font-size: small;
}

/*About */

#aboutleft {
	width: 450px;
	height: 480;
	padding: 10px;
	float: left;
}

#aboutleft p {
	font-size: small;
	color: gray;
	padding: 10px 0 5px 0;
}

#aboutleft a {
	font-size: small;
	color: #ff0099;
	text-decoration: none;
}

#aboutleft a:hover {
	font-size: small;
	color: #ff0099;
	text-decoration: underline;
}

#aboutleft span {
	font-style: italic;
	color: #ff0099;
}

#aboutleft li {
	list-style: disc;
	color: gray;
	font-size: small;
}

/* Contact */

#contactform {
	float: left;
	width: 400px;
	padding: 10px;
}

#contactform p { 
	color: gray;
	font-size: small;
	padding: 10px;
}

/*Privacy policy */

#privacypolicyleft {
	width:650px;
	height:480px;
	float: left;
	padding: 10px;
}

#privacypolicyleft p {
	padding: 5px;
	color: gray;
	font-size: small;
}

/* mac hide \*/

* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide */




/* lightbox */

/* jQuery lightBox plugin

 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)

 * and adapted to me for use like a plugin from jQuery.

 * @name jquery-lightbox-0.5.css

 * @author Leandro Vieira Pinho - http://leandrovieira.com

 * @version 0.5

 * @date April 11, 2008

 * @category jQuery plugin

 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)

 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US

 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin

 */



#jquery-overlay{

    position:absolute;

    top:0;

    left:0;

    z-index:90;

    width:100%;

    height:500px;}



#jquery-lightbox{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    text-align:center;

    line-height:0;}



#jquery-lightbox a img{border:none;}



#lightbox-container-image-box{

    position:relative;

    background-color:#fff;

    width:250px;

    height:250px;

    margin:0 auto;}



#lightbox-container-image{padding:10px;}



#lightbox-loading{

    position:absolute;

    top:40%;

    left:0%;

    height:25%;

    width:100%;

    text-align:center;

    line-height:0;}



#lightbox-nav{

    position:absolute;

    top:0;

    left:0;

    height:100%;

    width:100%;

    z-index:10;}



#lightbox-container-image-box > #lightbox-nav{left:0;}



#lightbox-nav a{outline:none;}



#lightbox-nav-btnPrev, #lightbox-nav-btnNext{

    width:49%;

    height:100%;

    zoom:1;

    display:block;}



#lightbox-nav-btnPrev{ 

    left:0; 

    float:left;}



#lightbox-nav-btnNext{ 

    right:0; 

    float:right;}



#lightbox-container-image-data-box{

    font:1.4em Verdana, Helvetica, sans-serif;

    background-color:#fff;

    margin:0 auto;

    line-height:1.4em;

    overflow:auto;

    width:100%;

    padding:0 10px 0;}



#lightbox-container-image-data{

    padding:0 10px; 

    color:#666; }

    

#lightbox-container-image-data #lightbox-image-details{ 

    width:70%; 

    float:left; 

    text-align:left;}    



#lightbox-image-details-caption{font-weight:bold;}



#lightbox-image-details-currentNumber{

    display:block; 

    clear:left; 

    padding-bottom:1.0em;}    



#lightbox-secNav-btnClose{

    width:66px; 

    float:right;

    padding-bottom:0.7em;}



/* jQpanels - http://www.andreacfm.com/index.cfm/jquery-plug-ins/jqpanels/index.cfm/jquery-plug-ins/jqpanels */



.panel{

    background:#DA8954 url(graphics/slidepanel-bg.png) no-repeat left top;

    cursor:pointer;

    margin-top:10px;

    padding:10px;

    }

.panel:hover{

    background:#DA8954 url(graphics/slidepanel-bg-hover.png) no-repeat left top;

    }

.panel h2{

    background:url(graphics/bullet-heading-wht.gif) no-repeat left 8px;

    color:#FFF;

    font-weight:bold;

    padding:0 0 0 15px;

    }

.panel p{

    padding:0 !important;

    }

.panel a{

    text-decoration:none;

    background:none;

}

.panel-up{

 }

.panel-down{

    background:#DA8954 url(http://www.meca-graphics.co.uk/graphics/slidepanel-bg-hover.png) no-repeat left top;

    }

.panel-down h2{

    background:url(http://www.meca-graphics.co.uk/graphics/bullet-heading-wht-down.gif) no-repeat left 9px;

    padding:0 0 0 15px;

}

.panel-target{

    padding:10px 2px 0;

}

.panel-closed{

    display:none;

}

/* end */
/* Thank you for viewing my code - Ed Vinicombe */

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}

.clearfix {display:inline-block;
}

/* mac hide \*/

* html .clearfix {height: 1%;
}
.clearfix {display: block;
}
/* End hide */