@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: justify;
	margin-top: 5px;
}
/*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;
	letter-spacing: -1px;
}
/* Style for anchors */
a {
	color: #3399cc;
	text-decoration: underline;
}
a:hover {
	color: #09F;
}
/* 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: 47px;
	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;
}
#call-us-now p {
	font-size: 0.8em;
	color: #A7A7A7;
	float:right;
	font-weight: lighter;
	font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
}
#call-us-now img {
	margin-top: 3px;
	float: right;
	width: 40px;
	padding-top: 3px;
	margin-right: 15px;
}
.box-slogan {
	float: left;
	width: 464px;
	height: 220px;
	margin-top: 30px;
}
.slogan {
	color: #212121;
	font-size: 36px;
	margin: 0px;
	font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: -2px;
	padding: 0px;
}
.slogan-description {
	margin: 0px;
	margin-left: 150px;
	color: #212121;
	font-size: 18px;
	font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	margin-top: 0px;
}
.box-image {
	height: 220px;
	width: 410px;
	padding-left: 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;
	color: #656565;
	font-size: 13px;
	letter-spacing: -0.5px;
	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.jpg);
	float: left;
}
#spacing-right {
	width: 24px;
	height: 280px;
	background-image:url(../images/right-spacing.jpg);
	float: left;
}
#box {
	float: left;
	width: 938px;
	height: 279px;
	border-bottom: 1px solid #b8b8b8;
	border-left: 1px solid #b8b8b8;
	border-top: 0px;
	background-image:url(../images/bg-box.jpg);
	background-repeat:repeat-x;
	border-right: 1px solid white;
}
.box-element {
	width: 938px;
	height: 278px;
	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;
}
/* We devided whole space into two columns, each of 440px width */
.left-column {
	width: 440px;
	float: left;
	height: 310px;
	margin-right: 30px;
	margin-top: 30px;
	margin-bottom: 0px;
	padding-left: 30px;
}
.right-column {
	width: 440px;
	float: 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: #3399cc;
	margin: 0px;
	margin-top: 2px;
}
.arrow {
	width: 20px;
	margin-top: 7px;
	float: left;
}
.learn-more {
	float: left;
	margin-top: 10px;
	margin-left: 5px;
	font-size: 14px;
}
/* Accordion */
/* This class is used to style arrow next to Accordion headr */
.Accordion-icon-img {
	width: 20px;
	float: left;
}
/*Stylng for Accordion title */
.AccordionItem-title {
	float: left;
	margin: 0px;
	margin-left: 10px;
	color: #b8b8b8;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
}
.AccordionItem-title:hover {
	color: white;
}
ul {
	list-style-image:url(../images/list.png);
	margin:0px;
	padding-left: 23px;
}
ul li {
	font-size: 14px;
	margin-bottom: 5px;
	color: #B8B8B8;
}
#a1 {
	width: 210px;
}
/*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. */

#controller {
	float: right;
	padding-right: 30px;
	height: 20px;
}
.jFlowControl {
	font-family: Tahoma, Geneva, sans-serif;
	text-align: center;
	font-size: 0.8em;
	text-transform:uppercase;
	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);
}
/* 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:left;
	width: 100px;
	float: left;
}
/* This class styles all the input fields in contact form */
.contact-input {
	width: 200px;
	margin-right: 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;
	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: right;
	padding: 6px;
	margin-left: 100px;
	background-color: #141414;
	border: 1px solid #B8B8B8;
	color: white;
	font-size: 0.7em;
}
/* END OF CONTACT SECTION */

/* FOOTER */

/* Main styling for the main #footer div */
#footer {
	width: 1000px;
	height:129px;
	background-image:url(../images/bg-footer.jpg);
	background-repeat:repeat-x;
	padding-top: 30px;
	padding-left: 30px;
}
/* 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;
} 

/*Accordion */

.Accordion {
	overflow: hidden;
	width: 440px;
	height: 310px;
	z-index: 100000;
}

.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

.AccordionPanelTab {
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	float: right;
}

.AccordionPanelContent {
	float: left;
	overflow: auto;
	margin: 0px;
	padding: 0px;
	height: 300px;
}

.AccordionPanelOpen .AccordionPanelTab {
	background-color: #EEEEEE;
}

.AccordionPanelTabHover {
	color: #553455;
	cursor: pointer;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #0CC;
}

.AccordionFocused .AccordionPanelTab {
	background-color: #3399FF;
}

.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #33CCFF;
}
 
/* END OF DIVIDERS */

.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;
}