@import url(reset.css);

/* gallery.css */

.galleria{list-style:none;width:200px}
	.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0; }
	.galleria li a{display:none}
	.galleria li div{position:absolute;display:none;top:0;left:180px}
	.galleria li div img{cursor:pointer}
	.galleria li.active div img,.galleria li.active div{display:block}
	.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto;}
	.galleria li .caption{display:block;padding-top:.5em;}
* html .galleria li div span{width:400px} /* MSIE bug */

.gallery_demo{width:702px;margin:0; padding: 0; }
.gallery_demo li{width:68px;height:50px;border:3px double #222; margin: 0 2px;background: #000;}

#main_image{height:438px;width:700px;background:black; margin-left: 0px; margin-bottom: 60px; margin-top: -8px;}
#main_image img{margin-bottom:10px;}

.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:2px;text-transform:uppercase; left: 0px;}
.nav a { color: #fff;}
.demo { width: 700px;}
.caption { color: #fff;}

#box {
width:1002px;
height:785px;
position:absolute;
top:0;
left:50%;
margin-left:-502px;
background-color:#000;
z-index:0;
}

.works #box {
height: 1085px;

}

.sum #box {
height: 1385px;
}


#shadowl {
left:0;
background:url(../img/shadowl.jpg);
}

#shadowr {
right:0;
background:url(../img/shadowr.jpg);
}

#shadowl,#shadowr {
position:absolute;
top:0;
width:26px;
height:100%;
}

#header {
width:950px;
height:312px;
background: url(../img/header.jpg);
position:absolute;
top:0;
left:26px;
}

/*
header on non-index page
*/
#header-mini {
width:950px;
height:116px;
background:url(../img/header-mini.jpg);
position:absolute;
top:0;
left:26px;
}

#logo {
width:416px;
height:84px;
position:absolute;
left:50%;
margin-left:-222px;
text-align:left;
}

.index #logo {
top:118px;
}
.works #logo {
top:25px;
}
.sum #logo {
top:25px;
}
#topshad {
background:url(../img/topshad.jpg);
width:950px;
height:45px;
position:absolute;
top:265px;
left:26px;
z-index:20;
}

#menu {
position:absolute;
right:26px;
height:34px;
width:950px;
background-color:#242424;
background-image:url(../img/menu-shad.jpg);
background-position:center;
background-repeat:no-repeat;
}

.index #menu {
top:313px;
}
.works #menu {
top:117px;
}
.sum #menu {
top:117px;
}

#menutext {
position:absolute;
width:600px;
left:50%;
margin-left:-200px;
font-size:14px;
padding-top:9px;
}

.menuitem {
width:100px;
display:inline;
}

#menushad {
position:absolute;
right:26px;
width:950px;
height:82px;
background-image:url(../img/mshad.jpg);
background-position:center;
background-repeat:no-repeat;
z-index:10;
}
.index #menushad{
top:347px;
}
.works #menushad{
top:151px;
}
.sum #menushad{
top:151px;
}
#submenu {
position:absolute;
left:320px;
height:34px;
width:500px;
color:#FFF;
z-index:11;
}

.index #submenu{
top:380px;
}
.works #submenu{
top:184px;
}

.sum #submenu{
top:184px;
}

.subitem {
font-size:12px;
width:100px;
display:inline;
}

#line {
position:absolute;
background:url(../img/line.jpg);
width:572px;
height:9px;
left:50%;
margin-left:-286px;
z-index:12;
background-repeat:no-repeat;
}

.index #line{
top:430px;
}
.works #line{
top:234px;
}
.sum #line{
top:234px;
}

#center {
width:950px;
height:229px;
top:500px;
position:absolute;
z-index:15;
left:26px;
text-align:center;
}

.works #center {
width:800px;
top:280px;
margin-left: 130px;
}

.sum #center {
width:600px;
top:280px;
margin-left: 130px;
height:329px;
}

.pic1,.pic2,.pic3 {
position:absolute;
display:inline;
width:225px;
height:161px;
padding:20px;
}

.pic1 {
left:50px;
}

.pic2 {
left:340px;
}

.pic3 {
right:50px;
}

.pic1 p,.pic2 p,.pic3 p {
position:absolute;
top:170px;
font-size:12px;
color:#FFF;
}

.pic1 p {
left:95px;
}

.pic2 p {
left:362px;
}

.pic3 p {
left:632px;
}

#footer {
background:url(../img/footer.jpg);
width:1002px;
height:116px;
position:absolute;
top:680px;
left:0;
margin-left:0;
}

.works #footer {
top: 1000px;
}

.sum #footer  {
top: 1300px;
}

#footer p {
margin-top:30px;
font-size:12px;
text-align:center;
color:#fff;
}
#footer a { color: white; text-decoration: underline}

.highslide-html {
background-color:#FFF;
}

.highslide-html-content {
position:absolute;
display:none;
width:400px;
}

.highslide-display-block {
display:block;
text-align:center;
}

.highslide-display-none {
display:none;
}

.control {
float:right;
display:block;
font-size:9pt;
font-weight:700;
color:#999;
margin:0 5px;
}

.control:hover {
color:#000!important;
}

.highslide-move {
cursor:move;
border:0;
height:18px;
padding:2px;
}

.highslide {
cursor:url(../highslide/graphics/zoomin.cur), pointer;
outline:none;
}

.highslide img {
border:0 solid gray;
}

.highslide:hover img {
border:0 solid silver;
}

.highslide-image {
border-bottom:1px solid #FFF;
}

.highslide-caption {
display:none;
border-bottom:1px solid #FFF;
font-size:10pt;
background-color:silver;
padding:5px;
}

.highslide-loading {
display:block;
color:#FFF;
font-size:9px;
font-weight:700;
text-transform:uppercase;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;
background-color:#000;
padding:3px;
}

a.highslide-credits,a.highslide-credits i {
color:silver;
font-size:10px;
padding:2px;
}

a.highslide-credits:hover,a.highslide-credits:hover i {
color:#FFF;
background-color:gray;
}

.highslide-body {
text-align:left;
padding:0 10px 10px;
}
.highslide-body li{
margin-left: 20px;
padding-bottom: 5px;
list-style-type: circle;
}



h3 {
text-align:center;
color: #024e68;
margin-bottom: 10px;
font-size: 22px;
}

.n {
position:absolute;
top:75px;
z-index:100;
left:35px;
visibility:hidden;
}

.v {
position:absolute;
top:75px;
z-index:100;
right:35px;
visibility:hidden;
}

.index .n {
visibility:hidden;
}

#gotoallportfolio {
position:absolute;
right:96px;
top:460px;
}
.works #gotoallportfolio {
display: none;
}
#gotoallportfolio a {
color:#FFF;
font-size:20px;
}

#gotoallportfolio a span {
font-size:23px;
text-decoration:underline;
}

.menuitem a,.subitem a {
margin-left:15px;
margin-right:15px;
color:#fff;
display:inline;
}


/* Ul li A */

ul>li>a { color: #024e68; }

/* Summary */

#sum ul li { list-style: none; text-align: left;color: #fff; text-align: left; font-size: 14px; line-height: 18px; left: 0px; }
#sum ul li span, #my_univer span  {font-size: 12px; display: inline;  color: #ccc; margin-right: 5px;}
#sum {  position: absolute; left: 0px; width: 700px;}
h1 { color: #fff; text-align: left; font-weight: normal; font-size: 25px; margin-bottom: 30px;}
#my_name { text-align: left; color: #fff; width: 700px;  margin-top: 20px; line-height: 19px; font-size: 20px;}
#my_name span { font-size: 13px; display: block; }
#my_name img {position: absolute; right: 0px;}
#about_me { margin-top: 20px; display: block;}
p h4 {color: #fff; text-align: left; font-weight: normal; font-size: 24px;}
#my_univer {  text-align: left;color: #fff; margin-top: 20px; font-size: 14px; margin-bottom: 40px;}
#about_my_skills{text-align: left; color: #fff; width: 700px;  margin-top: 50px; line-height: 21px; font-size: 15px;}

ul li#skills {  left: 0px; text-align: left; }
ul#skills li {padding: 10px ;display: block; padding: 10px ;display: block;  margin-bottom: 1px; margin-top: 1px;}

li#excellent { background-color: #323232; left: 0px; margin-right:230px;   }
li#best {  background-color: #222; margin-right: 280px; }
li#better {  background-color: #666;  margin-right: 380px; background-image: url(../img/chel.png); background-position: right bottom; background-repeat: no-repeat;}
li#good {  background-color: #555;  margin-right: 400px; }
li#normal { background-color: #333; margin-right: 420px;  }
li#lev1 { background-color: #777; margin-right: 440px;}
li#lev2 { background-color: #888; margin-right: 460px;}
li#lev3 { background-color: #333; margin-right: 480px;}
li#lev4 { background-color: #909090; margin-right: 500px;}
li#lev5 { background-color: #656565; margin-right: 520px;}
li#lev6 { background-color: #454545; margin-right: 540px;}

ul#skills li span { visibility: hidden; position: absolute;  text-align: left; width: 350px;  }
ul#skills li:hover span { visibility:  visible;}

li#excellent span { left: 500px;}
li#best span { left: 450px;}
li#better span { left: 350px;}
li#good span { left: 320px;}
li#normal span { left: 310px;}
li#lev1 span { left: 290px;}
li#lev2 span { left: 270px;}
li#lev3 span { left: 250px;}
li#lev4 span { left: 230px;}
li#lev5 span { left: 210px;}
li#lev6 span { left: 190px;}

acronym {  border-bottom: 1px dotted #555;}




/*
.bubbleInfo {
position: relative;
display: inline;	
color:#fff;

}
.trigger {

display: inline;
margin-left: 15px; margin-right: 15px;
}

*/

.bubbleInfo {
	position: relative;
	color:#fff;
	display: inline; 	

}
.trigger {
	display: inline;
	margin-left: 15px;
	margin-right: 15px;
	
}

.white { background-color: #fff; color: #000;}
.popup {
	position: absolute;
	display: none;
	z-index: 150;
	border-collapse: collapse;
	font-size: .8em;
	width: auto;
		display: block;	
			width: 400px;
			margin-left: -100px;


}

.popup td.corner {
	height: 15px;
	width: 19px;
	
}

.popup td#topleft { 
	background-image: url(../files/bubble-1.png); 
} 

.popup td.top { 
	background-image: url(../files/bubble-2.png); 
}

.popup td#topright { 
	background-image: url(../files/bubble-3.png); 
}

.popup td.left { 
	background-image: url(../files/bubble-4.png); 
}

.popup td.right { 
	background-image: url(../files/bubble-5.png); 
}

.popup td#bottomleft { 
	background-image: url(../files/bubble-6.png); 
}

.popup td.bottom { 
	background-image: url(../files/bubble-7.png); 
	text-align: center;
}

.popup td.bottom img { 
	display: block; 
	margin: 0 auto; 
	
	
}

.popup td#bottomright { 
	background-image: url(../files/bubble-8.png); 
}