@charset "UTF-8";
body  {
	font: 80% Verdana, Arial, Helvetica, sans-serif;
	background: #999999;
	text-align: left;
	color: #CCCCCC;
}
a img {border: none; }
.index #content {
	margin: 0 0 0 156px;
	width: 885px;
	height: 648px;
}
.index #nav {
	margin-left: 156px;
	height: 40px;
}


.index #container {
	width: 1050px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height: 700px;
} 
.index  #bkd {
	height: 700px;
	width: 1050px;
	background-image: url(../index_images/background.jpg);
	margin: 0px;
	padding: 0px;
}
.index  #navl {
	height: 35px;
	width: 319px;
	float: left;
} 
.index #nav_home {
	width: 50px;
	height: 30px;
}
.index #navr {
	margin: 0 0 0 474px;
	height: 35px;
	width: 324px;
	background-image: url(file:///L|/zcranko%20architects/Cranko%20Websites/website/Cranko_website_08/index_images/images/nav_sub.jpg);
}
.index  #topcontent {
	margin: 0 0 0 155px;
	width: 643px;
	height: 568px;
	background-image: url(file:///L|/zcranko%20architects/Cranko%20Websites/website/Cranko_website_08/index_images/images/bkd_body.jpg);
} 

.index  #logo {
	float: left; /* since this element is floated, a width must be given */
	width: 155px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #EBEBEB;
	height: 603px;
	background-image: url(file:///L|/zcranko%20architects/Cranko%20Websites/website/Cranko_website_08/index_images/images/logo.jpg);
}

/* People page_____________________________________________________ */

.index #pplcontainer {
	margin: 0 0 0 0;
	height: 568px;
	width: 745px;
}
.index #pplpic {
	float: left;
	height: 130px;
	width: 100px;
	position: absolute;
	left: 80px;
	top: 57px;
	background-color: #8C8C8C;
}
.index #ppltext {
	height: 180px;
	width: 400px;
	position: absolute;
	left: -6px;
	top: 45px;
	margin: 0 0 0 210px;
}
.index #ppltextdeb {
	height: 160px;
	width: 500px;
	position: absolute;
	left: 80px;
	top: 320px;

}

.index #pplstaff_text1 {
	height: 180px;
	width: 155px;
	position: absolute;
	left: -6px;
	top: 75px;
	margin: 0 0 0 50px;
}
.index #pplcontainer #pplstaff_text1 h2 {
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 0px;
}
.index #pplstaff_text2 {
	height: 180px;
	width: 155px;
	position: absolute;
	left: -6px;
	top: 75px;
	margin: 0 0 0 210px;
}
.index #pplcontainer #pplstaff_text2 h2 {
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 0px;
}
.index #pplstaff_text3 {
	height: 180px;
	width: 155px;
	position: absolute;
	left: -6px;
	top: 75px;
	margin: 0 0 0 375px;
}

.index #pplcontainer #pplstaff_text3 h2 {
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 0px;
}
.index #pplstaff_text4 {
	height: 180px;
	width: 155px;
	position: absolute;
	left: -6px;
	top: 75px;
	margin: 0 0 0 535px;
}

.index #pplcontainer #pplstaff_text4 h2 {
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 0px;
}




/* contact page_____________________________________________________ */

.index  #con_container {
	margin: 0 0 0 0;
	height: 568px;
	width: 643px;
}
.index  #con_pic {
	height: 270px;
	width: 600px;
	position: absolute;
	background-color: #0000CC;
	left: 17px;
	top: 4px;
}
.index  #con_text {
	height: 215px;
	width: 629px;
	position: absolute;
	left: 15px;
	top: 306px;
}
.portfolio /* portfolio page_____________________________________________________ */
/*_______________________________________________________contents*/

 #con_container {
	height: 568px;
	width: 885px;
	left: 0px;
	margin: 0 0 0 0;
}
.portfolio   #con_com {
	height: 70px;
	width: 470px;
	position: absolute;
	left: 80px;
	top: 20px;
}
.portfolio  #con_res {
	height: 70px;
	width: 470px;
	position: absolute;
	left: 80px;
	top: 100px;
}
.portfolio  #con_edu {
	height: 70px;
	width: 470px;
	position: absolute;
	left: 80px;
	top: 180px;
}
.portfolio  #own_contents_imagea {
	height: 67px;
	width: 293px;
	position: absolute;
	left: 50px;
	top: 0px;
	background-color: #ffffff;
}
.portfolio  #own_contents_imageb {
	height: 67px;
	width: 293px;
	position: absolute;
	left: 400px;
	top: 0px;
	background-color: #ffffff;
}
.portfolio  #own_contents_imagec {
	height: 67px;
	width: 293px;
	position: absolute;
	left: 50px;
	top: 75px;
	background-color: #ffffff;
}
.portfolio  #own_contents_imaged {
	height: 67px;
	width: 293px;
	position: absolute;
	left: 400px;
	top: 75px;
	background-color: #ffffff;
}
.portfolio  #own_contents_imagee {
	height: 67px;
	width: 293px;
	position: absolute;
	left: 50px;
	top: 150px;
	background-color: #ffffff;
}
.portfolio  #own_contents_imagef {
	height: 67px;
	width: 293px;
	position: absolute;
	left: 400px;
	top: 150px;
	background-color: #ffffff;
}

.portfolio #image_container {
	position: absolute;
	width: 884px;
	height: 510px;
	left: -11px;
	top: -1px;
}

.portfolio  #th_a {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 32px;
	top: 60px;
}
.portfolio #th_b {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 132px;
	top: 60px;
}
.portfolio #th_c {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 232px;
	top: 60px;
}
.portfolio #th_d {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 32px;
	top: 130px;
}
.portfolio #th_e {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 132px;
	top: 130px;
}
.portfolio #th_f {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 232px;
	top: 130px;
}
.portfolio #th_g {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 32px;
	top: 200px;
}
.portfolio  #th_h {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 132px;
	top: 200px;
}
.portfolio #th_i {
	height: 60px;
	width: 90px;
	position: absolute;
	left: 232px;
	top: 200px;
}
.portfolio #image {
	height: 335px;
	width: 500px;
	position: absolute;
	left: 375px;
	top: 60px;
}

/*_________________________________________________________portfolio*/
.portfolio #text_container {
	height: 350px;
	width: 745px;
	font-weight: lighter;
	overflow: auto;
	margin-top: 310px;
	margin-left: 67px;
	position: absolute;
	left: -2px;
	top: -19px;
}
.portfolio #text_containerb {
	height: 240px;
	width: 865px;
	font-weight: lighter;
	overflow: auto;
	margin-top: 410px;
	margin-left: 16px;
	position: absolute;
	left: 1px;
	top: 8px;
}
.portfolio #text_containerc {
	height: 375px;
	width: 865px;
	font-weight: lighter;
	overflow: auto;
	margin-top: 290px;
	margin-left: 16px;
	position: absolute;
	left: 4px;
	top: 0px;
}


.portfolio #text {
	text-align: justify;
	width: 715px;

	}
.portfolio #textb {
	text-align: justify;
	width: 840px;
}

.portfolio #header {
	position: absolute;
	left: 17px;
	top: 3px;
	font-size: 23px;
	font-weight: lighter;
	width: 600px;
}
.portfolio #headera {
	position: absolute;
	left: 17px;
	top: 3px;
	font-size: 23px;
	font-weight: lighter;
	width: 474px;
}
.portfolio #headerb {
	position: absolute;
	left: 17px;
	top: 3px;
	font-size: 23px;
	font-weight: lighter;
	width: 474px;

}
.portfolio #headerc {
	position: absolute;
	left: 17px;
	top: 3px;
	font-size: 23px;
	font-weight: lighter;
	width: 474px;

	
}
.portfolio #headerd {
	position: absolute;
	left: 17px;
	top: 3px;
	font-size: 23px;
	font-weight: lighter;
	width: 474px;

}
.portfolio #headere {
	position: absolute;
	left: 17px;
	top: 3px;
	font-size: 23px;
	font-weight: lighter;
	width: 474px;

}
.portfolio #headerf {
	position: absolute;
	left: 17px;
	top: 3px;
	font-size: 23px;
	font-weight: lighter;
	width: 474px;

}
.portfolio #prevnext {
	height: 45px;
	width: 40px;
	position: absolute;
	left: 800px;
	top: 9px;
}
.portfolio #pnl {
	height: 19px;
	width: 19px;
	position: absolute;
	left: 725px;
	top: 0px;
}
.portfolio #pnr {
	height: 19px;
	width: 19px;
	position: absolute;
	left: 750px;
	top: 0px;
}
.portfolio #prevnextb {
	height: 21px;
	width: 49px;
	position: absolute;
	left: 573px;
	top: 9px;
}
.portfolio #location {
	position: absolute;
	left: 9px;
	top: -125px;
	width: 321px;
	height: 55px;
}
.index #navleft {
	width: 310px;
	height: 30px;
	float: left;
	font-size: 13px;
	margin-top: 6px;
	color: #CCCCCC;
	font-weight: lighter;
	padding-top: 0px;
	padding-left: 15px;
}
.index #navright {
	width: 310px;
	height: 40px;
	margin-left: 575px;
}
.index #navpeople {
	height: 31px;
	width: 279px;
	position: absolute;
	left: 8px;
	top: 2px;
	font-size: 14px;
	margin-top: 6px;
	font-family: Arial, Helvetica, sans-serif;
}

.portfolio #portfolio_image {
	height: 210px;
	width: 745px;
	position: absolute;
	left: 82px;
	top: 30px;
	text-align: center;
}
.portfolio  #image_container_1 {
	width: 500px;
	height: 60px;
	background-color: #333333;
	margin-bottom: 15px;
	margin-left: 100px;
}
.portfolio #home_image {
	height: 210px;
	width: 754px;
	position: absolute;
	left: 67px;
	top: 30px;
	text-align: center;
	background-color: #666666;
}
.portfolio #list {  list-style-position: inside; list-style-type: disc; font-style: normal}
.portfolio #sub_menu_imagea {
	height: 50px;
	width: 180px;
	position: absolute;
	left: 100px;
	top: 45px;
	background-color: #ffffff;
}
.portfolio #sub_menu_imageb {
	height: 50px;
	width: 180px;
	position: absolute;
	left: 332.5px;
	top: 45px;
	background-color: #ffffff;
}
.portfolio #sub_menu_imagec {
	height: 50px;
	width: 180px;
	position: absolute;
	left: 565px;
	top: 45px;
	background-color: #ffffff;
}
.portfolio #sub_menu_imaged {
	height: 50px;
	width: 180px;
	position: absolute;
	left: 100px;
	top: 120px;
	background-color: #ffffff;
}
.portfolio #sub_menu_imagee {
	height: 50px;
	width: 180px;
	position: absolute;
	left: 332.5px;
	top: 120px;
	background-color: #ffffff;
}
.portfolio #sub_menu_imagef {
	height: 50px;
	width: 180px;
	position: absolute;
	left: 565px;
	top: 120px;
	background-color: #ffffff;
}

a:link {
	color: #FFF;
}
a:visited {
	color: #000;
}
a:active {
	color: #FFF;
}
a:hover {
	color: #060;
}