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


@import 'jether-sulat.css';

body
 {
	background-color: #FFFFFF;       
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
	font-size: .75em;
}



.imahen
{
 border: solid 1px #ccc;
 padding: 4px;
}


.imahen-gamay
{
 border: solid 1px #ccc;
 padding:1px;
}



#lawas
 {
   width: 790px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   vertical-align:top;


 }


#butanganan
 {
	position: absolute;
	top: 0px;
	left: 5px;
	right: -10px;
	bottom: 5px;
	height: inherit;
	

}




#logo
 {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 200px;
	height: 130px;

}



#tagline
 {
	position: absolute;
	top: 60px;
	left: 250px;
	right: 0px;
	bottom: 0px;
}



#advanced
 {
	position: absolute;
	top: 115px;
	left: 475px;
	right: 0px;
	bottom: 0px;
	
}


#nabigasyon-igbaw
 {
	position: absolute;
	top: 10px;
	left: 250px;
	right: 0px;
	bottom: 0px;
	width:  550px;


}


#nabigasyon-menu
 { 
      float: left;
	  line-height: 12pt;
      padding:150px 10px 10px 5px;
      margin:0px 0px 0px 0px;

}

#mgafeatures
 {
 
position: absolute;
   	top: 185px;
	left: 20px;
	right: 20px;
	bottom: 10px;
	width: 790px;
	height: 267px;
	background: #ffffff;
}

#unod-mismo
 {
	position: absolute;
	top: 481px;
	left: 20px;
	right: 0px;
	bottom: 50px;
	margin-bottom: 20px;

	
}




#unod-wa
 {
	position: absolute;
	top: 480px;
	left: 25px;
	right: 0px;
	bottom: 50px;
	width: 190px;
	height:inherit;

}


#unod-too
 {
	position: absolute;
	top: 480px;
	left: 240px;
	right: 0px;
    width: 565px;
	height:inherit;
}


#tiil
{
   float: left;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   vertical-align: bottom;
   height:inherit;
   width: 100%;

}		





#tiil-wa
 {
      float: left;
	  margin-top: 50px;
      padding: 0px auto 10px auto;
      margin: 25px auto 0px auto;




}

#tiil-too
 {
      float: right;
      padding: 0px 0px 10px 0px;
	  margin:25px auto 0px auto;
	  width: 100%px;	 

}

























/* para sa mga SURGICAL TEAMS */

#surgical-assistants-syod-margot
 {
	position: absolute;
	top: 30px;
	left: 10px;
	right: 0px;
	bottom: 5px;
	width: 775px;
}


#surgical-assistants-margot-wa
 {
	float: left;
	top: 50px;
	left: 5px;
	right: 0px;
	bottom: 10px;
	width: 190px;

}

#surgical-assistants-margot-too
 {
	float: right;
	top: 50px;
	left: 5px;
	right: 0px;
	bottom: 10px;
    width: 565px;
}




#surgical-assistants-syod-miko
 {
	position: absolute;
	top: 290px;
	left: 10px;
	right: 0px;
	bottom: 50px;
	width: 775px;

}



#surgical-assistants-miko-wa
 {
	float: left;
	top: 520px;
	left: 0px;
	right: 0px;
	bottom: 50px;
	width: 190px;

}


#surgical-assistants-miko-too
 {
	float: right;
	top: 550px;
	left:0px;
	right: 0px;
	bottom: 50px;
    width: 565px;
    min-height: 222px;
	vertical-align:top;
}






/* para sa associate MD */




#associate-syod-joselyn
 {
	position: absolute;
	top: 30px;
	left: 10px;
	right: 0px;
	bottom: 5px;
	width: 775px;
}



#associate-joselyn-wa
 {
	float: left;
	top: 400px;
	left: 0px;
	right: 0px;
	bottom: 10px;
	width: 190px;
}




#associate-joselyn-too
 {
	float: right;
	top: 450px;
	left:0px;
	right: 0px;
	bottom: 5px;
	width: 565px;
	height:auto;
}




#associate-syod-edward
 {
	position: absolute;
	top: 747px;
	left: 10px;
	right: 0px;
	bottom: 5px;
	width: 775px;
	height: 553px;

}



#associate-edward-wa
 {
	float: left;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 10px;
	width: 190px;
}




#associate-edward-too
 {
	float: right;
	top: 0px;
	left:0px;
	right: 0px;
	bottom: 5px;
    width: 565px;
}












/* para sa mga tabs ni Dr Arambulo profile */




.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: 12px Arial, Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 5px;
margin-right: 3px;
border: 1px solid #e1eceb;
color: #009fce;
background: white url(images/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #009fce;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #ad3052;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
color: #ad3052;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
/* background-image: url(images/shadeactive.gif); */
border-bottom-color: white;
color: #ad3052;
background:#fff;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}


/* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/ 
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
border-color: #D25A0B; /*Brown color theme*/ 
}

/* ######### CSS for Indented CSS Tabs. Remove if not using ######### */


.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid darkred; /*darkred border*/
background: black url(indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: black; /*text color*/
padding: 3px 11px;
text-decoration: none;
border-right: 1px solid darkred; /*darkred divider between menu items*/
}

.indentmenu ul li a:visited{
color: black;
}

.indentmenu ul li a.selected{
color: black !important;
padding-top: 4px; /*shift text down 1px*/
padding-bottom: 2px;
background: black url(indentbg2.gif) center center repeat-x;
}


/* para sa BEFORE & AFTER photos */

#before-after
 {
	position: absolute;
	width:780px;
	top: 50px;
    margin-left: 0px;
    margin-bottom: 50px;
}



#before-after1
{
 position:absolute;
  left: 30px;
  top:5px;
}


#before-after2
{
 position:absolute;
  left: 410px;
  top:5px;
}



#before-after3
{
 position:absolute;
  left: 30px;
  top: 215px;
}





#before-after4
{
 position:absolute;
  left: 410px;
  top: 215px;
}



#before-after5
{
 position:absolute;
  left: 30px;
  top: 430px;
  margin-bottom: 50px;
}



#before-after6
{
 position:absolute;
  left: 410px;
  top: 430px;
  margin-bottom: 50px;
}



#before-after7
{
 position:absolute;
  left: 30px;
  top: 650px;
  margin-bottom: 50px;
}


/* para sa DERMATOLOGICAL SERVICES*/




/* scar revisions */

#scarsulat
 {
	position: absolute;
	width:780px;
	top: 565px;
    margin-left: 0px;
}


#scarpix
 {
	position: absolute;
	width:780px;
	top: 50px;
    margin-left: 0px;
}

#scarpix1
{
 position:absolute;
  width: 250px;
  left: 0px;
  top:5px;
}


#scarpix2
{
 position:absolute;
  width: 250px;
  left: 265px;
  top:5px;
}



#scarpix3
{
 position:absolute;
  width: 250px;
  left: 530px;
  top:5px;
}


#scarpix4
{
 position:absolute;
  width: 250px;
  left: 0px;
  top: 175px;
}


#scarpix5
{
 position:absolute;
  width: 250px;
  left: 265px;
  top: 175px;
}



#scarpix6
{
 position:absolute;
  width: 250px;
  left: 530px;
  top: 175px;
}



#scarpix7
{
 position:absolute;
  width: 250px;
  left: 0px;
  top: 345px;
}



#scarpix8
{
 position:absolute;
  width: 250px;
  left: 265px;
  top: 345px;
}


#scarpix9
{
 position:absolute;
  width: 250px;
  left: 530px;
  top: 345px;
}




/* sclerotherapy  */

#sclerosulat
 {
	position: absolute;
	width:780px;
	top: 400px;
	margin: 0 auto 0 auto;
}


#scleropix
 {
	position: absolute;
	width:780px;
	top: 55px;
	margin: 0 auto 0 auto;
}

#scleropix1
{
 position:absolute;
  width: 250px;
  left: 0px;
  top:5px;
}


#scleropix2
{
 position:absolute;
  width: 250px;
  left: 265px;
  top:5px;
}



#scleropix3
{
 position:absolute;
  width: 250px;
  left: 530px;
  top:5px;
}



#scleropix4
{
 position:absolute;
  width: 250px;
  left: 0px;
  top: 175px;
}


#scleropix5
{
 position:absolute;
  width: 250px;
  left: 265px;
  top: 175px;
}



#scleropix6
{
 position:absolute;
  width: 250px;
  left: 530px;
  top: 175px;
}





/* laser surgery  */

#lasersulat
 {
	position: absolute;
	width:780px;
	top: 405px;
	margin: 0 auto 0 auto;
}


#laserpix
 {
	position: absolute;
	top: 55px;
	margin: 0 auto 0 auto;
}

#laserpix1
{
 position:absolute;
  width: 250px;
  left: 0px;
  top:5px;
}


#laserpix2
{
 position:absolute;
  width: 250px;
  left: 265px;
  top:5px;
}



#laserpix3
{
 position:absolute;
  width: 250px;
  left: 530px;
  top:5px;
}



#laserpix4
{
 position:absolute;
  width: 250px;
  left: 0px;
  top: 175px;
}



#laserpix5
{
 position:absolute;
  width: 250px;
  left: 265px;
  top: 175px;
}




#laserpix6
{
 position:absolute;
  width: 250px;
  left: 530px;
  top: 175px;
}








/* liposuction */




#lipopix
 {
	position: absolute;
	width:650px;
	top: 50px;
	margin: 0 auto 0 auto;
}

#lipopix1
{
 position:absolute;
  width: 300px;
  left: 100px;
  top:5px;
}


#lipopix2
{
 position:absolute;
  width: 300px;
  left: 380px;
  top:5px;
}



#lipopix3
{
 position:absolute;
  width: 300px;
  left: 100px;
  top: 180px;
}



/* mga sulat ng DERMA */


#dermasulat
 {
	position: absolute;
	width:780px;
	top: 300px;
	margin: 0 auto 0 auto;
}


#lasersulat
 {
	position: absolute;
	width:780px;
	top: 415px;
	margin: 0 auto 0 auto;
}



#liposulat
 {
	position: absolute;
	width:780px;
	top: 400px;
	margin: 0 auto 0 auto;
}



/* para sa pix pop up */


#pix
{
position: relative;
margin:auto;
width:  0px;
margin-left: 0px;
bottom:: 0px;


}


#pix-row1-1
{
position: absolute;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 5px;
}


#pix-row1-2
{
position: absolute;
margin-top: 0px;
margin-left: 105px;
margin-bottom: 5px;
}



#pix-row2-1
{
position: absolute;
margin-top: 60px;
margin-left: 10px;

}


#pix-row2-2
{
position: absolute;
margin-top: 60px;
margin-left: 105px;
margin-bottom: 5px;
}





#pix-row3-1
{
position: absolute;
margin-top: 115px;
margin-left: 10px;

}


#pix-row3-2
{
position: absolute;
margin-top: 115px;
margin-left: 105px;
margin-bottom: 2px;
}





#pix-row4-1
{
position: absolute;
margin-top: 170px;
margin-left: 10px;
margin-bottom: 2px;
}


#pix-row4-2
{
position: absolute;
margin-top: 170px;
margin-left: 105px;
margin-bottom: 2px;
}




#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }