@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/wed_bg2.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	padding-top: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #cccccc;
	background-color: #000;
	background-position: center top;
}
/* 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 */
h1 {
	margin: 0px;
	color: #b8b8b8;
	font-family: "Trajan Pro", "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
}
/*This class is used to define headers of sections, like for example contact etc.. */
.section-name {
	margin: 0px;
	color:#B8B8B8;
	font-family: "Trajan Pro", "Times New Roman", Times, serif;
	font-size: 18px;
	text-transform: uppercase;
}
/* Style for anchors */
a {
	color: #666;
	text-decoration: none;
}
a:hover {
	color: #CCC;
}
/* Wrapper with width of 960px, centered */
#wrapper {
	width: 980px;
	height: 1px;
	margin: 0 auto;
	padding-top: 0px;
	margin-top: 0px;
	margin-top: auto;
}
/* HEADER */

#header {
	width: 1000px;
	height: 100px;
}
#logo {
	width: 100%;
	float: left;
	height: 50px;
}
/* class for describing the position of logo img */
.imgHeader {
	height: 47px;
	margin-top: 30px;
	margin-left: 30px;
}
/* END OF HEADER */

/* slogan */
.box-slogan {
	float: left;
	width: 400px;
	height: 120px;
	margin-top: 10px;
}
.box-slogan-folio {
	float: left;
	width: auto;
	height: auto;
	margin-top: 10px;
}
.slogan {
	color: #333;
	font-size: 30px;
	margin: 0px;
	font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	padding: 0px;
}
.slogan-description {
	margin: 0px;
	margin-left: 150px;
	color: #333;
	font-size: 18px;
	font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	margin-top: 0px;
}
.box-image {
	height: 120px;
	width: 500px;
	padding-left: 30px;
	margin-top: 10px;
	float: left;
}	
.box-image-folio {
	height: 120px;
	width: 200px;
	padding-left: 30px;
	margin-top: 10px;
	float: left;	
}
.box-divider {
	width: 440px;
	height: 2px;
	background-image:url(../images/wed_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: 600px;
	height: 900px;
}
#box {
	float: left;
	width: 938px;
	height: 139px;
	border-top: 0px;
	background-repeat:repeat-x;
}
.box-element {
	width: 938px;
	height: 138px;
	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: 980px;
	height: 469px;
	background-repeat:repeat-y;
	overflow:visible;
}
/* We devided whole space into two columns, each of 440px width */
.left-column {
	width: 440px;
	float: left;
	height: 510px;
	margin-right: 30px;
	margin-top: 30px;
	margin-bottom: 0px;
	padding-left: 30px;
}
.right-column-folio {
	width: 85px;
	float: right;
	padding-right: 0px;
	margin-top: 0px;
	height: 510px;
}
/* left and right colums */
.column-subdivision-left {
	float: left;
	width: 200px;
	margin-right: 5px;
}
.column-subdivision-right {
	float:right;
	width: 200px;
	margin-left: 5px;
}

/* content */

.home-page {padding:20px 0 30px!important;}
.inner-page {padding:10px 0 100px !important;}

#content .main-list {
	margin:0;
	padding:0;
	list-style:none;	
}
#content .main-list li {
	float:left;
	padding:0 18px 18px 0;
}
#content .main-list img {
	float:left;
	border:none;
}
#content .portfolio {
	float:left;
	width:605px;
}
#content .portfolio p {
	float:right;
	width:318px;
	margin-top: 12px;
	margin-right: 0;
	margin-bottom: 8px;
	margin-left: 0;
}
#content .portfolio p a img {
	float:left;
	border:none;
	display:inline;
	margin:0 1px 0 0;
}
#content .portfolio ul {
	padding:0;
	float:left;
	width:609px;
	margin:16px -4px 0 0;
	display:inline;
	list-style:none;
}
#content .portfolio ul li {
	float:left;
	padding:0 7px 0 0;
}
#content .portfolio ul img, #content .portfolio div img {
	display:block;
	border:none;
}
#content .portfolio div img {margin:0 auto;}

#content .inf {
	float:right;
	width:187px;
	font-size:10px;
	padding:36px 21px 0 0;
}
#content .inf p {margin:0 0 4px;}
#content .inf p.pad {margin:0 0 15px;}

#content .copy {
	float:left;
	width:405px;
	font-size:10px;
	padding:36px 21px 0 0;
}
#content .copy p {
	margin:12px 0 8px;
	float:right;
	width:350px;
}
#content .copy p a img {
	float:left;
	border:none;
	display:inline;
	margin:0 1px 0 0;
}
#content .copy ul {
	padding:0;
	float:left;
	width:409px;
	margin:16px -4px 0 0;
	display:inline;
	list-style:none;
}
#content .copy ul li {
	float:left;
	padding:0 5px 0 0;
}
#content .copy ul img, #content .portfolio div img {
	display:block;
	border:none;
}
#content .copy div img {margin:0 auto;}

/* 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;
}
h2 {
	font-family:  “Trebuchet MS”, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #CCC;
	margin: 0px;
	margin-top: 2px;
}
/* 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: "Trajan Pro", "Times New Roman", Times, serif;
	font-size: 18px;
	text-transform: uppercase;
}
.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: 0px;
	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;
	width: 440px;
}
.jFlowControl {
	font-family: "Trajan Pro", "Times New Roman", Times, serif;
	text-align: left;
	font-size: 0.8em;
	text-transform:uppercase;
	height: 17px;
	padding-top: 3px;
	color: #666;
	cursor: pointer;
	float: left;
	padding-right: 20px;
}
.jFlowControl:hover {
	color: #CCC;
}
.jFlowControl:active {
	color: #FFF;
}
/* 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: 12px;
}
/* END OF CONTACT SECTION */

/* FOOTER */

/* Main styling for the main #footer div */
#footer {
	width: 980px;
	height:129px;
	padding-top: 30px;
	padding-left: 30px;
	color: #333;
	font-size: 10px;
}
/* END OF FOOTER */

/*DIVIDERS */
/*Horizontal divider - parallel with x-axis */
 .divider-y {
	width: 440px;
	height: 2px;
	background-image:url(../images/wed_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-repeat: repeat-y;
	margin-top: 30px;
} 

/*Accordion */

.Accordion {
	overflow: hidden;
	width: 440px;
	height: 350px;
	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: 400px;
}

.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 */
.general-link a {
	font-size: 12px;
}