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

html{height:101%;}

body { /* the main background of the computer screen*/
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: -90;
	text-align: center;
	background-color:#77d9ff;
}

.mainOuter {/*the main background of the container eg.layout background*/
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color:#000000;
	width:1200px;
	height:auto;
	text-align: left;
}

a:link{ font-weight:bold; color:#000000; font-weight:bold;}
a:visited{ color: #000000;	text-decoration: none; font-weight:bold;}
a:active{ color: #000000;	text-decoration: none; font-weight:bold;}
a:hover{	text-decoration: underline;	color: #000000; font-weight:bold;}


/*==========main container==========*/
.mainContainer{width:1200px; height:auto; float:left; background-image:url(images/container-bg.jpg); background-repeat:repeat-y;}

/*==========header==========*/
.headerContainer{width:1200px; height:167px; float:left; font-size:1px;}
.headerLeft{width:560px; height:167px; float:left; font-size:1px;}
.headerRight{width:640px; height:167px; float:left; font-size:1px;}

/*==========menu==========*/
.menuContainer{width:547px; height:156px; float:left; font-size:1px;}
.menuLeft{width:149px; height:156px; float:left; background-image:url(images/menu-left.jpg); background-repeat:no-repeat; font-size:1px;}
.menuHome{width:77px; height:156px; float:left; font-size:1px;}
.menuPortfolio{width:105px; height:156px; float:left; font-size:1px;}
.menuLinks{width:67px; height:156px; float:left; font-size:1px;}
.menuContact{width:83px; height:156px; float:left; font-size:1px;}
.menuCv{width:66px; height:156px; float:left; font-size:1px;}


/*==========content==========*/
.leftContainer{width:547px; height:auto; float:left; font-size:1px;}
.leftSpace{width:547px; height:207px; float:left; font-size:1px; background-image:url(images/middle-left.jpg); background-repeat:no-repeat;}

.rightContainer{width:653px; height:auto; float:left;}
.rightTextArea{width:653px; height:363px; float:left; background-image:url(images/text-area.jpg); background-repeat:no-repeat;}
.rightText{
	width:400px;
	height:300px;
	float:left;
	margin-left:45px;
	margin-top:40px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}
.rightText a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ed145b; font-weight:bold; text-decoration:none;}
.rightText a:active{ color:#ed145b; font-weight:bold; text-decoration:none;}
.rightText a:visited{ color:#ed145b; font-weight:bold; text-decoration:none;}
.rightText a:hover{ color:#ed145b; font-weight:bold; text-decoration:underline;}
.text{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}

.topContainer{width:1200px; height:156px; float:left; font-size:1px;}
.topSpace{width:653px; height:156px; float:left; background-image:url(images/portfolio-top.jpg); font-size:1px;}
.portfolioContainer{width:1200px; height:494px; float:left; background-image:url(images/portfolio-main.jpg); font-size:1px;}
.portfolio{width:800px; height:494px; float:left; margin-left:200px;}
.textPg{
	width:800px; 
	height:494px; 
	float:left; 
	margin-left:200px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}


/*==========flashbanner==========*/
.bannerContainer{width:1200px; height:235px; float:left; font-size:1px;}
.bannerLeft{width:155px; height:235px; float:left; background-image:url(images/lower-left.jpg); font-size:1px;}
.banner{width:842px; height:235px; float:left; font-size:1px; background-image:url(images/index1_13.jpg);}
.bannerRight{width:203px; height:235px; float:left; background-image:url(images/lower-right.jpg); font-size:1px;}
.bannerScroll{width:750px; height:120px; float:left; margin-left:80px; margin-top:35px;}

/*==========portfolio==========*/
.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid #ed145b;
overflow: scroll; /*leave this value alone*/
width: 700px; /*Width of Carousel Viewer itself*/
height: 490px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 680px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.portfolio-img{width:680px; height:300px; float:left; background-color:#00CCCC;}
.portfolio-text{
	width:660px; 
	height:150px; 
	float:left; 
	background-color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	margin:10px;
	text-align:left;
}

.portfolio-text a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ed145b; font-weight:bold; text-decoration:none;}
.portfolio-text a:active{ color:#ed145b; font-weight:bold; text-decoration:none;}
.portfolio-text a:visited{ color:#ed145b; font-weight:bold; text-decoration:none;}
.portfolio-text a:hover{ color:#ed145b; font-weight:bold; text-decoration:underline;}


/*==========footer==========*/
.footerContainer{width:1200px; height:120px; float:left; background-image:url(images/footer-bg.jpg); background-repeat:no-repeat;}
.footerLinks{
	width:850px;
	height:50px;
	float:left;
	margin-left:175px;
	margin-top:60px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#000000;
	text-align:center;
}
.footerLinks a{font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; text-decoration:none; font-weight:bold;}
.footerLinks a:active{color:#000000; text-decoration:none; font-weight:bold;}
.footerLinks a:visited{color:#000000; text-decoration:none; font-weight:bold;}
.footerLinks a:hover{color:#000000; text-decoration:underline; font-weight:bold;}