/* Table of Contents:
	Structure
	Typography
	Header Layout
	Middle Layout
	Footer Layout
	
/************************************************
*	STRUCTURE									*
************************************************/
html {
	border:0px;
	 margin:0px;
	 padding:0px;}
	 
body { 
	

	font: normal .855em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    line-height:1.4em;
	color:#4F5557;
	background: #fff url(website-designer/bg-body.jpg) repeat-x;
	
	}

#container {
	width:925px;
	margin:0px auto;
	overflow: hidden;
	padding:0px 
	}
	


/*#block {
	
	
	
	width:880px;
	padding:8px;
	margin-top:10px;
	margin-left:5px;
}

	/* ---------------------------------------------------- */
/* BANNER

/* ---------------------------------------------------- */
#banner {
	width: 900px;
	height:278px;
	border: 5px solid #fff;

	
}





	/************************************************
*	MAIN NAVIGATION								*
************************************************/
	#menu{
		margin:0;
		padding:0;
		width:925px;
		}
		#menu ul{
			list-style:none;
		}
			#menu li{
				list-style:none;
				display:block;
				float:left;
				height:66px;
				line-height:66px;
				margin:0 1px;
			}
				#menu li a{
					display:block;
					float:left;
					color:#9a9a9a;
					font-size:11px;
					font-weight:bold;
					line-height:66px;
					text-decoration:none;
					padding:0 25px;
					background:#e7eff1 url(images/menu_039_bg.gif) repeat-x;
				}
					#menu li a:hover{
						color:#fff;
						background:#da6800 url(images/menu_039_h.gif) repeat-x left;
					}
				#menu li a.current{
					display:block;
					float:left;
					color:#fff;
					background:#da6800 url(images/menu_039_h.gif) repeat-x left;
					font-size:11px;
					font-weight:bold;
					line-height:66px;
					text-decoration:none;
					padding:0 25px;	
				}
					#menu li a:hover.current{
						color:#fff;
					}

/************************************************
*	TYPOGRAPHY									*
************************************************/
p {
	padding-left:15px;
	color:#333;
	text-align:left;
	background:none;

}
	

h1 {
	
	font-weight: bold;
	font-size: 2.1em; 
	color:#00578A;
	padding-bottom:5px;
	line-height:1.1em;
	margin-left:15px;
	margin-bottom:10px;
	margin-top:30px;
	text-transform:uppercase;
	xheight:1em;
}




h2, h3, h4, h5, h6{
	
	color:#4f5557;
	font-size:15px;
	padding-left:20px;
}





.boldStyle {
	font-weight: bold;
	color:#00578A;
	padding-top:5px;
}


.boldStyleSmall {
	font:bold italic 14px "times new roman",times,serif;
	line-height: 1.1em;

	}
	
#skip-to {
		margin: 5px 5px 5px 0;
		font-size:8px;
		text-transform:uppercase;		
		}



/************************************************
*	LAYOUT 2 COLUMNS								*
************************************************/
#left {
	margin:0px;
	margin-top: 20px;
	padding:0px;
	float: left;
	width:150px;}

#right {

	float: left;
	width:750px;
	
}





/************************************************
*  PHOTO BOX (SAM)								*
************************************************/

.card {
	width:250px;
	background: #cfe2e9;
	margin:40px 10px 0px 10px;
	float:left;
	color:inherit;
	display:inline;
	
	}
	

.card-left {
	float:left;
	width:250px;
	background:#fff;
	position:relative;
	left:-4px;
	top:-4px;
	border:1px solid #ccc;
	font: bold 72% "Century Gothic", verdana, arial, sans-serif;
	color:#505d5e;
	padding: 3px;
	}




 /************************************************
*  BULLET LIST								*
************************************************/


.list{
	font-family: "century gothic", Georgia, Times, serif;
	color: #58676c;
	background: inherit}
	
.list p {

	color: #000;
	border-left: solid 1px #999;
	margin: 0;
	padding: 0 0 .5em 1em;
	background: inherit;}
	
	
.listaccess {
	font: italic 1.1em Georgia, Times, serif;
	color: #58676c;
	background: inherit;}
	
.listaccess p {
	font: normal .8em verdana, arial, times, serif;
	color: #000;
	margin: 0;
	padding: 0;
	background: inherit;}
	

/************************************************
*  SKILLS PAGE								*
************************************************/

.showcaselist {
	width:170px;
	margin:5px;
	float:left;}

.showcaselist ul {
	margin: 0px;
	padding: 0px;
	list-style: none;}

.showcaselist li  {
	margin: 0px;
	padding: 3px 0px;
	border-bottom:1px solid #ddd;
	text-align: left;
}
	


.showcaselist h2 {
	height: 36px;
	margin: 0;
	padding: 10px 0 0 10px;
	xbackground:#CAE4F1 url(website-designer/skill1.jpg) no-repeat; 


	}

		.showcaselist h3{
			height: 36px;
			margin: 0;
			padding: 10px 0 0 10px;
			xbackground:#CAE4F1 url(website-designer/skill2.jpg) no-repeat; 

		
			}

				.showcaselist h4 {
					height: 36px;
					margin: 0;
					padding: 10px 0 0 10px;
					xbackground:#CAE4F1 url(website-designer/skill3.jpg) no-repeat; 


	}
	
			.showcaselist h5 {
					height: 36px;
					margin: 0;
					padding: 10px 0 0 10px;
					xbackground:#CAE4F1 url(website-designer/skill4.jpg) no-repeat; 
				

	}
	
	
	
	.showcaselist .portfolio1{
	height: 35px;
	margin: 0;
	padding: 10px 0 0 10px;
	xbackground:#CAE4F1 url(website-designer/success1.jpg) no-repeat; 

	}

		.showcaselist .portfolio2{
			height: 35px;
			margin: 0;
			padding: 10px 0 0 10px;
			xbackground:#CAE4F1 url(website-designer/success2.jpg) no-repeat; 
			
		
			}

				.showcaselist .portfolio3 {
					height: 35px;
					margin: 0;
					padding: 10px 0 0 10px;
					background:#CAE4F1 url(website-designer/success3.jpg) no-repeat; 
				
					

	}
	
			.showcaselist .portfolio4 {
				height: 35px;
					margin: 0;
					padding: 10px 0 0 10px;
					xbackground:#CAE4F1 url(website-designer/success4.jpg) no-repeat; 
					

	}
	
.showcaselist a:link {
	text-decoration: underline;
	border-bottom:1px solid #ddd;
	}
.showcaselist li a:visited{
	padding-left: 0px;
	text-decoration: underline;
	color:#069;
	background: inherit;}

.showcaselist a:hover {
	text-decoration: underline;
	color:#000;
	background:#b7daef;}

/************************************************
*  SUB MENU ON THE RIGHT SIDE							*
************************************************/
#rightcolumn 	/* RIGHT COLUMN */ 
	{
	float:right;	
	background: url(website-designer/shadowAlpha.png) no-repeat bottom right;
	width:180px;
    margin:20px 10px;
	display:inline;

	}
#rightbox
 {
  background:#fff;
  padding: 0 7px 10px;
  border:1px solid #a9a9a9;
  position:relative;
  left:-4px;
 
 
		}

#rightbox h2 
	{

	margin:0!important;
	padding:0!important;
	}
	
	#rightbox h2 a
	{
	background:#2e7db6 url(website-designer/bg-nav.gif) repeat-x;
	color: #fff;
	font-weight: bold;
	font-size:14px;
	line-height:26px;
	border-bottom: 5px solid #e8e8e8;
	text-align: center;
	text-transform:uppercase;
	text-decoration:none;

	}
	#rightbox h2 a:hover 
	{
	background:#2e7db6 url(website-designer/bg-nav.gif) repeat-x;
	color: #2d3b2e;
	text-decoration:none;

	}

.link a
 {
	display:block;
	text-align: left;
	 line-height:1.5em;
	color:#00578A;
	margin-top:5px;
	border-bottom:1px dotted #ddd;
	font-size:11px;
	}
	

/************************************************
* ACCESSIBILITY BOX							*
************************************************/
.accessbox{
	float: left;
	width: 310px;
	margin: 10px;
	padding: 10px;
	/*display: inline;*/}

.accessbox h3 {
	width: 310px;
	height: 32px;
	padding: 12px 0 0 0px;
	background: #fff url(website-designer/accessbar.gif);
	font-weight: bold
	color: #00578A;}

.accessbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 310px;}

.accessbox li {
	text-align: left;
	margin:0px;
	padding:3px;
	border-bottom: 1px solid #ddd;
}

.accessbox li:hover {
	background: #EFEFEF;
	color: inherit;}


/************************************************
*  GRAPHIC BUTTON							*
************************************************/

a#button, a#button2, a#button3{
 	background: url(website-designer/buttonSHM3.jpg);
	width: 232px;
    height: 49px;
	display: block;
	text-decoration: none!important;
    float:left;
   
}
a#button span, a#button2 span, a#button3 span {
	padding:15px;
	top:10px;
	position: relative;
	font-size:15px;
	font-weight:bold;
	
	}
		
a#button:hover, a#button2:hover, a#button3:hover{
   color:#000;
	background:url(website-designer/buttonSHM3.jpg) 0px -49px;
	
}


	/* ---------------------------------------------------- */
/* LINK STYLE FOR ALL
/* ---------------------------------------------------- */

a:link {
	color:#58676c;
	text-decoration:underline;
	background: transparent;}

a:visited {
	color:#767778;
	text-decoration:underline;
	background: transparent;}


a:hover {
	color:#00578A;
	background:#d0e3ea;}

a:active {
	color:#58676c;
	background: transparent;}
	
a:active, a:focus { 
	outline-style: none } 
	
	/* ---------------------------------------------------- */
/* MIS
/* ---------------------------------------------------- */

em {
	display:none;}
	
img{
	border:none;}
hr {
	height:1px;
	border:1px dotted #ccc;
	width:50%;
	text-align:center;}
	
.clearout {
	clear:both;	}
	
.floatRight {
	float:right
	}	
.hr{
  background: #fff url(website-designer/bg-hr.gif) no-repeat center bottom;
	 border:0;
	height: 3px;

}

code {/*ADD URL*/
	background: #eff4f5;
	border: 1px solid #EEE;
	border-left: 6px solid #C1CAD3;
	color:#000;
	display: block;
    line-height:10px;
	margin: 12px;
	padding: 8px 10px;
	white-space: pre;
	width:700px;
	}
	
	/* ---------------------------------------------------- */
/* FORM LAYOUT
/* ---------------------------------------------------- */
form {
	margin-left:15px;
	}

form legend, form fieldset {
	font:bold 110% arial, times, serif;
	color:#275371;
	background: #fff;
	text-align:left;
	padding: 5px;
	xtext-transform:lowercase;
	border-top: 1px solid #ddd;
	border-left:none;
	border-right:none;
	border-bottom:none;
	margin:5px;
	}
form legend {
	border:none;
	}
label {
	margin:0px;
	background:#ecf1f3;
	color:#275371;
	padding:0px;
	xtext-transform:capitalize;
	}


	
.submit {
    background: #275371 url(website-designer/button_submit.gif) no-repeat;

    height: 37px;
    width: 181px;
	color: #4c5058;
	font-weight: bold;
	padding:3px;
	border: 2px double #ddd;
	
	}

.submit:hover {
        background: #333 url(website-designer/button_submit2.gif) no-repeat;
		cursor:pointer;
		color: #fff;
		padding:3px;
		border: 2px double #ddd;
	}
	
.boxBlur {
	border:1px solid #ccc;}

.boxFocus {
	background:#ddd;
	border:1px solid #509BC9;
	color:inherit;}

.form {
	width:500px;
	}

	/* ---------------------------------------------------- */
/* TABLE RESULT FOR SEO
/* ---------------------------------------------------- */


table {
	border-collapse: collapse;
	margin: 20px;	
	
	width:500px;
}
th strong {
	color: #fff;
	background: inherit;
}
th {
	background: #a9cfef;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;	
	text-align: left;
	border-left: 1px solid #f4f4f4;
	border-bottom: solid 2px #ddd;
	color: #333;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
	color: inherit;
}
tr.row-b {
	background: #cfdce7;	
	color: inherit;	
}

	/* ---------------------------------------------------- */
/* FOOTER LAYOUT
/* ---------------------------------------------------- */

#footer {

	border-top:5px solid #ddd;
	
	background:#202020 url(website-designer/bg-footer1.gif) repeat-x;
	width:915px;
	height:auto;
	
	}
.footertext{
	
	color:#0000;
	text-align:center;
	text-transform:capitalize;
	line-height:1.1em;
	padding-top:15px;


	}


	/* ---------------------------------------------------- */
/* TAB
/* ---------------------------------------------------- */

ul.tabs {
	margin: 0;
	padding: 0;
	left:15px;
	position: relative;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	width: 880px;
	font: bold 1.1em "palatino linotype",palatino,serif;

}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #ccc;
	border-left: none;
	margin-bottom: -1px;
	background: #b6d2ed url(website-designer/bg-tabHeader.gif) repeat-x;
	overflow: hidden;
	position: relative;
	
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.1em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #ccc;
	border-top: none;
	clear: both;
	width: 880px;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;

	margin: 0 0 20px 0;
	left:15px;
	position: relative;
}
.tab_content {
	margin: 0px 0px 10px 0px;
	padding:0;
}

.tab_content h2 {
	font-weight: bold italic;
	margin: 0px 10px 10px 20px;
	padding: 10px 0 0 0;
	
}
.tab_content p {
	float:left; 
	width:260px; 
	margin: 0px 0px 10px 20px;
	padding:0;
	

}
.tab_content h3 a{
	color: #254588;
}
.tab_content img {
	float: left;
	margin: 0 20px 20px 0;

}

	
	/* ---------------------------------------------------- */
/* PORTFOLIO
/* ---------------------------------------------------- */


.block {
	border:1px solid #a3a09e;
	background-color:#ffffff;
	margin-bottom:20px;
	position:relative;
	width:710px;
}

.block_inside { 
	display:block; 
	border:1px solid #ffffff;
	background: #ffffff url(website-designer/bg_block.jpg) repeat-x;	
	padding:8px;
	overflow:auto;
}
.image_block {
	border:1px solid #b5b5b5;
	background-color:#d2d2d2;
	padding:5px 5px 1px 5px;
	float:left;
}
.image_block img {
	border:1px solid #b5b5b5;
}
.text_block {
	float:left;
	width:230px;
	margin-left:5px;

	}
	.text_block ul{
		width:100%;
		margin:0 20px;
		padding:0;
		}
		.text_block ul li{
			border-bottom: 1px solid #ddd;
	
			}
		
	.text_block h2 {
		margin:0;
		padding:0;
		} 

	/* ---------------------------------------------------- */
/* CLOUD TAG
/* ---------------------------------------------------- */
#cloudTag {
	width:90%; 
	padding:50px 15px 10px 15px; 
	margin-left:15px;
	}
	#cloudTag span {
		float:left;
		
		}
	#cloudTag a.tag1 {
		font-size:11.67px;
		color:#95abab;
		}
		
			#cloudTag a.tag2 {
			font-size:15.67px; 
			color:#0d9fd8;
			}
			#cloudTag a.tag3 {
			font-size:11px; 
			color:#95abab;
			}
				
				
			#cloudTag a.tag4 {
			font-size:11px; 
			color:#95abab;
			}
				
			#cloudTag a.tag5 {
			font-size:15px;
			color:#95abab;
			}
			
				
				
			#cloudTag a.tag6 {
			font-size:15px;
			color:#95abab;
			}
			
			#cloudTag a.tag7 {
			font-size:11.67px;
			color:#95abab;
			}
		
				
			#cloudTag a.tag8 {
			font-size:16.33px;
			color:#95abab;
			}
			#cloudTag a.tag9 {
			font-size:11px; 
			color:#95abab;
			}
				
			#cloudTag a.tag10 {
			font-size:11px; 
			color:#95abab;
			}
			
			#cloudTag a.tag10:hover, #cloudTag a.tag9:hover, #cloudTag a.tag8:hover, #cloudTag a.tag7:hover,#cloudTag a.tag6:hover, #cloudTag a.tag5:hover, #cloudTag a.tag4:hover, #cloudTag a.tag3:hover, #cloudTag a.tag2:hover, #cloudTag a.tag1:hover {
				 background:none;
				 text-decoration:none;
				}
				
				
			#cloudTag a.tag11 {
			font-size:11.67px; 
			color:#95abab;
			}
			
			#cloudTag a.tag11:hover {
				 background:none;
				 text-decoration:none;
				}
				
.marginLeft270 {
	margin-left:270px;
	}