/* CSS Document */
* { padding: 0 margin: 0; }

BODY {
	text-align: center;
	background: #e00024;		
}

SPAN {
	color:#990000;
}

#mainContainer {	
	width: 780px;
	height: 585px;
	margin: 0 auto;	
}

#galleryContainer {
	width: 780px;
	height: 600px;
	margin: 0 auto;
}

#header {
	position:relative;
	background: #df0023;
	width: 780px;
	height: 125px;
}

*HTML #header {
	position:relative;
	background: #df0023;	
	width:780px;
	height:125px;
	top:0px;
}

.headerNav {
	background:#df0023;	
	width:670px;
	height:20px;
	position:relative;	
	top:0px; 
	left:100px;
}

*HTML .headerNav {	
	width:670px;
	height:20px;
	position:relative;	 
	top:0px; 
	left:45px;
}

.headerPosition {
	position:relative; 
	top: -25px; 
	left:50px; 
	z-index:1;
}

*HTML .headerPosition {
	position:relative; 
	top: -25px; 
	left:50px; 
	z-index:1;
}

#bgLeft {
	background: #df0023;
	width: 13px;
	height: 460px;
	float: left;
}

#bgRight {
	background: #df0023;
	width: 19px;
	height: 460px;
	float: left;
}

#leftContainer {
	float: left;
	width: 453px;
	height: 460px;
	background:url('../images/bgLeft.jpg') no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#leftContainerArt {
	float: left;
	width: 453px;
	height: 460px;
	background:url('../images/bgLeft5.jpg') no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#leftContact {
	float: left;
	width: 453px;
	height: 460px;
	background:url('../images/bgLeft6.jpg') no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#leftContainerLink{
	float: left;
	width: 453px;
	height: 460px;
	background:url('../images/bgLeft7.jpg') no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#homeContainer {
	float: left;
	width: 748px;
	height: 460px;
	background: #e00024;	
}

*HTML #homeContainer {
	float: left;
	width: 748px;
	height: 460px;
	background: #e00024;
}


#leftContainer2 {
	float: left;
	width: 453px;
	height: 460px;
	background:url('../images/bgLeft3.jpg') no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#leftContainerBox {
	float: left;
	width: 453px;
	height: 460px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
	background:url('../images/bgLeft2.jpg') no-repeat;
}

#noWriteups {
	float: left;
	width: 453px;
	height: 460px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
	background:url('../images/portfolio/bg_nowriteups.jpg') no-repeat;
}

#leftContAfter {
	float: left;
	width: 90%px;	
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
	font-weight: bold;	
}

.divArtist {	
	text-indent:30px;
	padding: 85px 10px 10px 50px;	 
	width:350px; 
	height:330px; 	
	font-size:12px; 
	float:center; 
	color:#333; 
	text-align:left;
}

*HTML .divArtist {
	padding: 110px 10px 10px 10px;	  
	width:350px; 
	height:330px; 	
	font-size:12px; 
	float:center; 
	color:#333; 
	text-align:left;
}

/* this is the fix for IE7 */
*+HTML .divArtist {
	padding: 110px 10px 10px 10px;	  
	width:350px; 
	height:330px; 	
	font-size:12px; 
	float:center; 
	color:#333; 
	text-align:left;
}


.johanContact {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#333333;
	text-align: left;
	float: left;
}

.formError {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:500;
	color:#990000;
}

.divConPos {	
	width:340px;
	padding: 80px 10px 10px 60px;
	text-indent:30px;	
}

*HTML .divConPos {
	width:340px;
	padding: 90px 10px 10px 16px;
	text-indent:30px;	
}

.contactImage {
	padding: 10px 10px 10px 60px;
	width:340px;
	font-weight:bold;		
}

*HTML .contactImage {
	padding: 10px 10px 10px 16px;
	width:340px;
	font-weight:bold;	
}

.conTxt {
	position:relative;
	font-size:1.4em;
	color:#df0023;
	font-weight:bold; 
	top:80px; 
	left:20px;
}

*HTML .conTxt {
	position:relative;
	font-size:1.4em;
	color:#df0023;
	font-weight:bold; 
	top:80px; 
	left:20px;
}

.johan {
	position:relative;
	font-size:4.4em;
	color:#000;
	font-weight:bold; 
	top:90px; 
	left:20px;
}

.box{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.formStyle {
	padding-left: 50px;	
	width: 400px;
	float:left; 
}

.rightTitle {
	position:relative;
	top:60px;
	left:-80px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	color: #666666;	
}
*HTML .rightTitle {
	position:relative;
	top:60px;
	left:-80px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:bold;
	color: #666666;	
}


.rightStyle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:left;
	color: #666666;
	position:relative;
	top:60px;
	left:1px;
}

*HTML .rightStyle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:left;
	color: #666666;
	position:relative;
	top:40px;
	left:1px;
}

#rightContainer {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float: left;	
	width: 295px;
	height: 460px;
	background:url('../images/bgRight.jpg') no-repeat;
}

#rightContainer2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	float: left;	
	width: 295px;
	height: 460px;
	background:url('../images/bgRight2.jpg') no-repeat;
}

.artistprofile {
  	position: relative;
	top: 50px;	
	
}

*HTML .artistprofile {
  	position: relative;
	top:50px;	
}

.loginPos {
	padding: 110px 10px 10px 2px;	
}

*HTML .loginPos {
	padding: 110px 10px 10px 2px;	
}

.message {
	padding-left: 10px;
	text-align: center;
	padding-left: 20px;	
}

.user {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

.userTitle {
	padding-left: 90px;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#900;
}

*HTML .userTitle {
	padding-left: 10px;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	color:#900;
}

.portfolio {
	margin: 110px 10px 10px 41px; 	
	background: url(../images/portfolioleft.jpg) no-repeat;	
	height: 282px;
	padding: 25px 0px 0px 112px;
}

*HTML .portfolio {
	margin: 110px 10px 10px 41px; 	
	background: url(../images/portfolioleft.jpg) no-repeat;	
	height: 282px;
	padding: 46px 0px 0px 110px;
}

.johanWedding {
	list-style-type: none; 
	padding-right: 730px;
}

.johanWedding LI {
	width: 748px; 
	height: 460px;	
}

#editorial_temporary {
	padding: 0px 1px;
	margin: 0px 5px;
}

*HTML #editorial_temporary {
	padding: 10px 1px;
	margin: 0px 5px;
}
/*-- FOR ARTIST WORLD --*/
.list {
	padding-top:10px;
}

.artistworld {
	margin-top:10px;	
	padding: 20px 10px 10px 50px;
	z-index: 1;
	font-family:Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	color:#000000; 
	text-align: left; 
	width: 380px; 
	height: 400px; 
	overflow: auto;
}

*HTML .artistworld {
	margin-top:10px;	
	padding: 36px 10px 10px 50px;
	z-index: 1;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#000; 
	text-align:left; 
	width:390px; 
	height: 400px; 
	overflow:auto;
}

A.backTop link, A.backTop:visited  {
	text-decoration:none;
	color:#e00024;
	font-weight:bold;
}

A.backTop:hover {
	color: #000;	
}

.artist {
	position:relative; 
	z-index:1; 
	padding-right:20px;
	margin-top: 108px; 
	left:-16px; 
	width:210px; 
	height:275px; 	
	font-size:12px; 
	float:right; 
	color:#333; 
	text-align:left; 	
	font-style:italic; 
	overflow:auto;
}

*HTML .artist {
	position:relative; 
	z-index:1; 
	padding-right:20px;
	margin-top: -30px; 
	left:-595px; 
	width:210px; 
	height:275px; 	
	font-size:12px; 
	float:right; 
	color:#333; 
	text-align:left; 	
	font-style:italic; 
	overflow:auto;
}

.artistPosition {
	position:relative;
	z-index:1; 
	top:-20px;
}

*HTML .artistPosition {
	position:relative; 
	top:-20px;
}

/*FOR THE EFFECTS OF SLIDE USING ACCORDION*/
.accordion {
	margin-top: 2px;
	padding: 20px 10px 0 90px;		 
	text-align:left; 
	width: 350px;
	border-bottom: solid 1px #c4c4c4;
	overflow:auto;
	height:438px;
}

*HTML .accordion {
	margin-top: 2px;
	padding: 32px 10px 10px 90px; 
	text-align:left; 
	width: 350px;
	height:408px;
	border-bottom: solid 1px #c4c4c4;
}

.accordion h4 {
	background: #dcdada url('../images/arrow-square.gif') no-repeat right -51px;
	padding: 7px 8px;
	margin: 0;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion h5 {
	background: #dcdada;
	padding: 7px 8px;
	margin: 0;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
*HTML .accordion h4 {
	background: #dcdada url('../images/arrow-square.gif') no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion h4:hover {
	background-color: #e9e7e7;
}
*HTML .accordion h4:hover {
	background-color: #dcdada;
}

.accordion h4.active {
	background-position: right 5px;
}
*HTML .accordion h4.active {
	background-position: right 5px;
}

.accordion p {
	background: #f8e2e6;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}
*HTML .accordion p {
	background: #f7f7f7;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}


/*THIS IS FOR THE RIGHT SIDE*/
.accordion2 {	
	padding-top: 20px;
	text-align:left; 
	width: 280px;
	border-bottom: solid 1px #c4c4c4;
	overflow:auto;
	height:439px;
}
*HTML .accordion2 {
	padding-top: 40px;
	text-align:left; 
	width: 270px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion2 h5 {
	background: #dcdada url('../images/arrow-square.gif') no-repeat right -51px;
	padding: 5px 4px;
	margin: 0;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
*HTML .accordion2 h5 {
	background: #dcdada url('../images/arrow-square.gif') no-repeat right -51px;
	padding: 5px 5px;
	margin: 0;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion2 h5:hover {
	background-color: #e9e7e7;
}

*HTML .accordion2 h5:hover {
	background-color: #e9e7e7;
}

.accordion2 h5:active {
	background-position: right 5px;
}

*HTML .accordion2 h5:active {
	background-position: right 5px;
}

.accordion2 p {
	background: #f7f7f7;
	margin: 0;
	padding: 5px 7px 5px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}
*HTML .accordion2 p {
	background: #f7f7f7;
	margin: 0;
	padding: 5px 7px 5px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}
/*END OF ACCORDION*/

.navMainHeader {
	color: #fbf1f2;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;		
	color: #999;
}

*HTML .navMainHeader {
	color: #fbf1f2;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;	
	color: #999;
}

.navStatic {	
	text-decoration: none;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;		
	color: #999;
}

*HTML .navStatic {	
	text-decoration: none;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;		
	color: #999;
}

/*FOR THE LINKS*/
A.navMain:link, A.navMain:visited {
	color: #fbf1f2;
	padding: 0 10px;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;	
}

A.navMain:hover {
	color: #999;	
}

A.navHome:link, A.navHome:visited {
	width: 100px;
	color: #df0023;	
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
}

.navBackPosition {
	position:relative; 
	z-index:50; 
	left: 140px; 
	top:-215px;
}

*HTML .navBackPosition {
	position:relative; 
	z-index:50; 
	left: 140px; 
	top:-215px;
}

A.navBack:link, A.navBack:visited {
	color: #FFF;
	font-weight:normal;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;	
}

A.navBack:hover {	
	color: #df0023;	
}

A.navReserve:link, A.navReserve:visited {
	color: #000;
	font-weight: bold;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	
}

A.navReserve:hover {	
	color: #df0023;
	text-decoration:underline;
}

A.navRegister:link, A.navRegister:visited {
	color: #000;
	font-weight:bold;
	text-decoration:none;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	
}

A.navRegister:hover {
	text-decoration:underline;	
	color: #df0023;	
}

A.navLink:link, A.navLink:visited {
	color: #990000;
	padding: 0 10px;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;	
}

A.navLink:hover {
	color: #999;
	text-decoration: underline;	
}

/*THIS IS FOR THE TITLE OF THE PORTFOLIO EX. AVANT, B0RDS right WEDDING ETC.*/
.portfolioPosition {
	position:relative; 
	z-index:1; 
	left:10px; 
	top:-400px;
}

.newWedding {
	position:relative; 
	z-index:1; 
	left:10px; 
	top:-320px;
}

.portfolioTxtPosition {
	width:380px; 
	padding:0px 20px 0px 20px;
}

*+HTML .portfolioTxtPosition {
	width:380px; 
	padding:10px 20px 0px 20px;
}

.linkSideCont {
	color: #990000;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: left;		
}

.linkSideTitle {
	color: #990000;
	padding: 50px 5px 10px 30px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-align: left;			
}


/*THIS IS FOR THE AVANT PAGE*/
.avant {
	padding-left:40px; 
	font-size:12px; 
	font-style:italic; 
	color:#bb2c38; 
	text-align:left;
} 

*HTML .avant {
	padding-left:20px; 
	font-size:12px; 
	font-style:italic; 
	color:#bb2c38; 
	text-align:left;
} 

*+HTML .avant {
	padding-left:10px; 
	font-size:12px; 
	font-style:italic; 
	color:#bb2c38; 
	text-align:left;
} 

.barbie {
	margin-top: 10px;
	padding-left:40px; 
	font-size:12px; 
	font-style:italic; 
	color:#bb2c38; 
	text-align:left;
} 

*HTML .barbie {
	margin-top: 10px;
	padding-left:20px; 
	font-size:12px; 
	font-style:italic; 
	color:#bb2c38; 
	text-align:left;
}

#leftContainer A SPAN {
	display:none;
}
/* FOR IMAGE GALLERY IMAGO */

/* THUMB IMAGE ON THE LEFT */
.imago_thumbImg {
	border: 2px solid #666;
	margin-right: 5px;	
}

.imago_selectedThumb {
	border: 2px solid #990000;	
}

img.imago_loading {
	position: absolute;
	top: 20px;
	left: 40px;
	display:none;
}

.imago_error {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	color: #FFFFFF;
}

/*THUMB IMAGE POSITION*/
div.imago_thumbMenu {
	width: 330px;
	height: 300px;
	position: absolute;	
	left: -95px;
	margin-top:210px;
	padding-top:-300px;	
}
/* TAKE NOTE THIS IS THE SOLUTION IF YOU WANT TO MAKW THE SPACING MATCH ON ALL BROWSERS JUST INCLUDE * HTML AS SEEN ABOVE OF THIS*/
* HTML div.imago_thumbMenu {
	width: 330px;
	height: 300px;
	position: absolute;	
	left: -95px;
	margin-top:190px;
	padding-top:-300px;	
}
 
table.imago_currentThumbTable {
	margin-left: 11%;
	margin-right: 11%;
	width: 200px;
	cursor:pointer;
}

div.imago_currentImage {
	padding-bottom: 0px;	
}

/*FOR THE TITLE OF THE THUMB IMAGE*/
div.imago_cititle {
	text-align: center;
	font-weight: bold;
	color: #df0023;
}

div.imago_frame {
	position: relative;
	z-index: 500;
	top: 0px;
	left: 292px;
	margin-right: 105px; 
	margin-left: 51px;
	
}

/*FOR THE BORDER OF THE LARGER IMAGE*/
div.imago_currentImage {
  	position: relative;	
	z-index:500;	
	left: -12px;	
}

/*FOR THE POSITION OF THE GALLERY ON THE PAGE*/
.imagogallery {
	position: relative;/*KAPAG SINABING RELATIVE KUKUNIN NITO YUNG SUKAT SA LOOB NG DIV MO KAYA KASAMA NITO YUNG Z-INDEX*/
	z-index: 10;
	padding-top: -120px; /*this is the fix for the vertical position of large image both on IE & Mozilla*/
	left: 122px; 
	width: 100%;
	height: 100%;
}

*HTML.imagogallery {
	position: relative;/*KAPAG SINABING RELATIVE KUKUNIN NITO YUNG SUKAT SA LOOB NG DIV MO KAYA KASAMA NITO YUNG Z-INDEX*/
	z-index: 10;
	padding-top: -110px; /*this is the fix for the vertical position of large image both on IE & Mozilla*/
	left: 122px; 
	width: 100%;
	height: 100%;
}

div.imago_loading {
	position: relative;
	z-index:500;
	top: 50px;	
	width: 100%;
	height: 100%;
	background-color: #000000;
	color: #FFFFFF;
}
a.imago_navNext, a.imago_navPrev, a.imago_navNextImage, a.imago_navPreviousImage
{
	position: relative;
	z-index: 10;
	height: 100%;
	width: 10%;
	cursor:pointer;
	background: url('../image_gallery/empty.gif') no-repeat center center;
}
a.imago_navNext, a.imago_navPrev {
	filter:alpha(opacity=20);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

a.imago_navPreviousImage:focus, a.imago_navNextImage:focus {
  	outline-style: none;
}

a.imago_navPrev {
	left:0;
	top:0;
	background: url('../image_gallery/prev.gif') no-repeat top left;
}

a.imago_navNext {
	right: 0;
	top: 0;
	background: url('../image_gallery/next.gif') no-repeat top right;
}

a.imago_navNextImage:hover {
	background: url('../image_gallery/nextImg.png') no-repeat center center;
}

a.imago_navNextImage {
	right: 0px;
	top: 0px;
}

a.imago_navPreviousImage {
	left: 0px;
	top: 0px;
}

a.imago_navPreviousImage:hover {
	background: url('../image_gallery/prevImg.png') no-repeat center center;
}