@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: #546078;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #cdcdcd;
}
*+ html body {
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-x;
	background-color: #546078;
	position:absolute;
	top:-4px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #cdcdcd;
}
/* 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: #cdcdcd;
	margin: 0px;
	padding: 0px;
	text-align: justify;
	margin-top: 5px;
}
/*classed used for majority of headings */
h3 {
	margin: 0px;
	color: #b8b8b8;
	font-family: 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: 20px;
	letter-spacing: -1px;
}
.section-name1 {
	margin: 0px;
	color:#B8B8B8;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 20px;
	text-decoration:underline;
	letter-spacing: -1px;
}
/* Style for anchors */
a {
	color: #8ab7de;
	text-decoration: none;
	font-weight:bold;
}
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: 171px;
	background-image:url(../images/bg-header.jpg);
}
#logo {
    width:1000px;
	float: left;
	height: 151px;
}
/* class for describing the position of logo img */
.imgHeader {
	height: 141px;
	margin-top: 0px;
	margin-left: 50px;
}
/* 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: 484px;
	height: 220px;
	margin-top: 20px;
	padding-left:10px;
}
.slogan {
	color: #212121;
	font-size: 26px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: -2px;
	padding: 0px;
}
.slogan-description {
	margin: 0px;
	margin-left: 170px;
	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: 420px;
	padding-left: 20px;
	margin-top: 20px;
	float: left;
}
.box-image img{
	border-top:#666 1px solid;
	border-left:#666 1px solid;
	border-bottom:#fff 1px solid;
	border-right:#fff 1px solid;
}
.box-divider {
	width: 460px;
	height: 2px;
	background-image:url(../images/divider-x.jpg);
	background-repeat: repeat-x;
	margin-top: 10px;
}
.slogan-description-2 {
	text-align:justify;
	color: #656565;
	font-size: 13px;
	letter-spacing: -0.5px;
	line-height: 20px;
	margin: 0;
	margin-top: 10px;
	width: 460px;
}
.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: Georgia, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #3CF;
	margin: 0px;
	margin-top: 2px;
	font-style: italic;
	font-weight: bold;
}
.short-description1 {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #3CF;
	margin: 0px;
	margin-top: 2px;
	font-weight: bold;
}
.arrow {
	width: 10px;
	margin-top: 4px;
	margin-left:365px;
	float: left;
}
.learn-more {
	float: right;
	font-size: 13px;
	margin:0px;
}
/* Accordion */
/* This class is used to style arrow next to Accordion headr */
.Accordion-icon-img {
	width: 10px;
	height:10px;
	float: left;
	margin-top:6px;
}
/*Stylng for Accordion title */
.AccordionItem-title {
	float: left;
	margin: 0px;
	margin-left: 10px;
	color: #cdcdcd;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
}
.AccordionItem-title:hover {
	color: white;
}
ul {
	list-style-image:url(../images/list.gif);
	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.7em;
	background-image:url(../images/menu_tab.png);
	height: 17px;
	padding-top: 3px;
	width: 100px;
	color: #141414;
	cursor: pointer;
	float: left;
}
.jFlowControl:hover {
	background-image:url(../images/menu-tab-order.png);
}
.jFlowControl:active {
	background-image: url(../images/menu-tab-order.png);
}
/* END OF NAVIGATION */

/* CONTACT SECTION */
input {
background-color:#475266;
border-top:1px solid #3F485A;
border-right:1px solid #3F485A;
border-left:1px solid #7F889A;
border-bottom:1px solid #7F889A;
padding:4px 10px 0 10px;
height:20px;
width:300px;
color: #cdcdcd;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
}

input:focus {
border:1px solid #325f80;
}

textarea {
background-color:#475266;
border-top:1px solid #3F485A;
border-right:1px solid #3F485A;
border-left:1px solid #7F889A;
border-bottom:1px solid #7F889A;
padding:4px 10px 0 10px;
height:40px;
width:400px;
color: #cdcdcd;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
}
textarea:focus {
border:1px solid #325f80;
}

#submit {
background:url(../images/submit.jpg) no-repeat;
border-top:1px solid #7F889A;
border-right:1px solid #7F889A;
border-left:1px solid #3F485A;
border-bottom:1px solid #3F485A;
width:70px;
height:20px;
text-indent:-9999px;
}
/* END OF CONTACT SECTION */

/* FOOTER */

/* Main styling for the main #footer div */
#footer {
	width:938px;
	height:100px;
	background-image:url(../images/footer.jpg);
	background-repeat:repeat-x;
	padding-top: 30px;
	margin-left:30px;
	
}
#footer p{
	text-align:center;
}

/* 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-y.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;
}
p.general-text img{
float:left;
padding:5px 15px 50px 0px;
	}