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

/* Body Margins set to 0 are important, it takes care of issues with default borders in browsers */
body {
	background-image:url(../../images/bg.jpg);
	background-repeat:repeat-x;
	margin-top: 0px;
	margin: 0 auto;
	padding-top: 0px;
	background-color: #141414;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #cccccc;
}
/* This class is used for all the main text on your website */
.general-text {
	font-family:  “Trebuchet MS”, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #767676;
	margin: 0px;
	padding: 0px;
	text-align: right;
	direction:rtl;
	margin-top: 5px;
}
.general-text img#Stamp{
	position:relative;
	top:3px;
}
/*classed used for majority of headings */
h3 {
	margin: 0px;
	color: #b8b8b8;
	font-family: "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: lighter;
	letter-spacing: 1px;
}
/*This class is used to define headers of sections, like for example contact etc.. */
.section-name {
	margin: 0px;
	color:#B8B8B8;
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
	font-size: 24px;
}
/* Style for anchors */
a {
	color: #FC0;
	text-decoration: none;
}
a:hover {
	color: #F60;
	text-decoration: underline;
}
/* Wrapper with width of 960px, centered */
#wrapper {
	width: 1000px;
	height: 1px;
	margin: 0 auto;
	padding-top: 0px;
	margin-top: 0px;
	margin-top: auto;
}
/* HEADER */

#header {
	width: 1000px;
	height: 120px;
	background-image:url(../../images/bg-header.jpg);
}
#logo {
	width: 600px;
	float: left;
	height: 100px;
}
/* class for describing the position of logo img */
.imgHeader {
	height: 62px;
	margin-top: 30px;
	margin-left: 30px;
}
/* END OF HEADER */

/* This styles the call us now section in the upper right corner */
#call-us-now {
	padding-top: 25px;
	width: 370px;
	padding-right: 30px;
	float:right;
	height: 75px;
	text-align:right;
	direction:rtl;
}
#call-us-now p {
	font-size: 0.8em;
	color: #A7A7A7;
	float:right;
	font-weight: lighter;
	font-family: Arial, Helvetica, sans-serif;
}
#call-us-now img {
	margin-top: 3px;
	float: right;
	width: 40px;
	padding-top: 3px;
	margin-right: 15px;
}
#call-us-now a {
	font-size:12px;
	color:#CCC;
	text-decoration:none;
}
#call-us-now a:hover {
	font-size:12px;
	color:#fff;
	text-decoration:underline;
}
#call-us-now a.selected {
	color:#fff;
	font-weight:bold;
}
#call-us-now a.selected:hover {
	text-decoration:none;
}
.box-slogan {
	float: left;
	width: 464px;
	height: 220px;
	margin-top: 30px;
	direction:rtl;
	text-align:right;
}
.slogan {
	color: #212121;
	font-size: 30px;
	margin: 0px;
	font-family:Tahoma, Geneva, sans-serif;
	padding: 0px;
}
.slogan-description {
	margin: 0px;
	margin-left: 150px;
	color: #212121;
	font-size: 18px;
	font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 0px;
}
.box-image {
	height: 220px;
	width: 410px;
	padding-right: 30px;
	margin-top: 30px;
	float: left;
}
.box-divider {
	width: 440px;
	height: 2px;
	background-image:url(../../images/divider.jpg);
	background-repeat: repeat-x;
	margin-top: 30px;
}
.slogan-description-2 {
	text-align:justify;
	direction:rtl;
	color: #656565;
	font-size: 13px;
	line-height: 20px;
	margin: 0;
	margin-top: 30px;
	width: 440px;
}
.clear {
	clear: both;
}
#wrapper-content {
	width: 1000px;
	height: 649px;
}
#spacing-left {
	width: 30px;
	height: 280px;
	background-image:url(../../images/left-spacing.png);
	float: left;
}
#spacing-right {
	width: 24px;
	height: 280px;
	background-image:url(../../images/right-spacing.png);
	float: left;
}
#box {
	float: left;
	width: 938px;
	height: 279px;
	text-align:right;
	border-bottom: 1px solid #b8b8b8;
	border-right: 1px solid #b8b8b8;
	border-top: 0px;
	background-image:url(../../images/bg-box.jpg);
	background-repeat:repeat-x;
	border-left: 1px solid white;
}
.box-element {
	width: 938px;
	height: 278px;
	display:none; /* Hide at page load (stacking bug fix) */
	background-image:url(../../images/bg-box.jpg);
	background-repeat:repeat-x;
}
/* CSS used for styling main content of website, in other words, part of the website between moving slogans and footer. Keep in mind that this part has fixed height.*/
#mainContent {
	width: 1000px;
	height: 369px;
	background-image: url(../../images/bg-content.jpg);
	background-repeat:repeat-y;
	overflow:hidden;
}
/* Whole space Container */
.column {
	width: 940px;
	height: 310px;
	direction:rtl;
	text-align:right;
	margin-top: 30px;
	margin-right: 30px;
	margin-bottom: 0px;
	padding-left: 30px;
}
/* We devided whole space into two columns, each of 440px width */
.left-column {
	width: 440px;
	float: left;
	height: 310px;
	direction:rtl;
	text-align:right;
	margin-right: 30px;
	margin-top: 30px;
	margin-bottom: 0px;
	padding-left: 30px;
}
.right-column {
	width: 440px;
	float: right;
	direction:rtl;
	text-align:right;
	padding-right: 30px;
	margin-top: 30px;
	height: 310px;
}
/* This class is used if you want to to divided one of the columns once again. You can use following classes and divide it into two columns, each with width of 215px */
.column-subdivision-left {
	float: left;
	width: 215px;
	margin-right: 5px;
}
.column-subdivision-right {
	float:right;
	width: 215px;
	margin-left: 5px;
}
/* INDEX */
/* This class is used to style featured services on main page */
.service {
	float: left;
	width: 440px;
	margin-top: 0px;
	padding: 0px;
}
.service-name {
	margin: 0px;
	padding: 0px;
	margin-top: 0px;
	color: #b8b8b8;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: lighter;
	line-height: 20px;
}
.short-description {
	font-family:  “Trebuchet MS”, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #F90;
	margin: 0px;
	margin-top: 2px;
}
.arrow {
	width: 20px;
	margin-top: 10px;
	margin-left: 7px;
	float: left;
}
.learn-more {
	float: left;
	margin-top: 10px;
	margin-left: 5px;
	font-size: 14px;
}
/*NAVIGATION*/
/* This part takes care of navigation. #controller is the div with all the nav buttons, while .jFlowControl is class for every button. .jFlowControl:hover is used for hover effect, meanwhile .jFlowControl:active is used when the button is clicked. */
#jFlowSlide{
	overflow:hidden;
	width: 1%; /* For IE6 */
	direction:rtl;
}
#controller {
	float: right;
	padding-right: 30px;
	height: 20px;
}
#controller span{
	float: right;
}
.jFlowControl {
	font-family: Tahoma, Geneva, sans-serif;
	text-align: center;
	font-size: 0.8em;
	background-image:url(../../images/menu-tab.jpg);
	height: 17px;
	padding-top: 3px;
	width: 100px;
	color: #141414;
	cursor: pointer;
	float: left;
}
.jFlowControl:hover {
	background-image:url(../../images/menu-tab-order.jpg);
}
.jFlowControl:active {
	background-image: url(../../images/menu-tab-active.jpg);
}
.jFlowControl.jFlowSelected {
	font-weight:bold;
	background-image: url(../../images/menu-tab-active.jpg);
}
/* END OF NAVIGATION */

/* CONTACT SECTION */
/* Here are css properties for elements on "contact us" section. Fieldset encapsulates all the elements on the left half. */
.contact-fieldset {
	width: 460px;
	border: none;
	padding: 0px;
	margin-top: 0px;
}
/* This class style all labes that are used in the contact form */
.contact-label {
	color: #767676;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:right;
	width: 100px;
	float: right;
}
/* This class styles all the input fields in contact form */
.contact-input {
	width: 200px;
	margin-left: 5px;
	margin-bottom: 4px;
	padding: 5px;
	background-color: #141414;
	border: 1px solid #767676;
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	color:white;
	letter-spacing: 1px;
}
/* This class handles the main input message box */
.contact-body {
	width: 320px;
	background-color: #141414;
	color: white;
 	border: 1px solid #767676;
	padding: 5px;
	line-height: 15px;
	overflow:auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
}
/* This class is used to style the "SEND" button on the end of contact form */
.contact-button {
	text-align: center;
	padding: 6px;
	margin-top: 10px;
	margin-right: 100px;
	background-color: #141414;
	border: 0px solid #B8B8B8;
	color: white;
	font-size: 0.7em;
}
/* END OF CONTACT SECTION */

/* FOOTER */

/* Main styling for the main #footer div */
#footer {
	width: 970px;
	height:auto;
	/*background-image:url(../../images/bg-footer.jpg);*/
	background-repeat:repeat-x;
	padding-top: 30px;
	padding-right: 30px;
}
#footer a{
	color:#FFF;
}
/* END OF FOOTER */

/*DIVIDERS */
/*Horizontal divider - parallel with x-axis */
 .divider-y {
	width: 440px;
	height: 2px;
	background-image:url(../../images/divider-y.jpg);
	background-repeat: repeat-x;
	margin-top: 10px;
	margin-bottom: 10px;
}
/*Vertical divider - parallel with y-axis */
.divider-x {
	width:2px;
	height:300px;
	float: left;
	background-image:url(../../images/divider-x.jpg);
	background-repeat: repeat-y;
	margin-top: 30px;
} 

 
/* END OF DIVIDERS */
#contact_form{
	margin-top:15px;
}
.msg{
	position:relative;
	padding:3px;
	font-size: 12px;
	border:1px solid #767676;
	background-color:#141414;
	display:none;
}
.msg strong{
	font-weight:bold;
	font-size: 14px;
}
.msg img{
	position:relative;
	top:2px;
	display:inline;
}
strong{
	font-weight:bold;
}

.gallery-name {
	letter-spacing: -1px;
	margin-left: 30px;
	margin-top: 30px;
	margin-bottom: 0px;
	color:#B8B8B8;
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
	font-size: 24px;
	letter-spacing: -1px;
}
.clearboth{
	clear:both;
	width:0;
	height:0;
	line-height:0;
}