/***********************************************************************************************************************
DOCUMENT: style/format.css
DEVELOPED BY: Ryan Stemkoski
COMPANY: Zipline Interactive
EMAIL: ryan@gozipline.com
PHONE: 509-321-2849
DATE: 2/26/2009
DESCRIPTION: This document contains the structural formatting files for the accordion style menu.
************************************************************************************************************************/


.accordionButton {
	height: 25px;	
	width: 200px;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */;


	cursor: auto;
	}
	
.accordionContent {	
	width: 200px;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	background: #95B1CE;
	}
	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/


body{
	background-color:#000000;
	border:0; 
	padding:0; 
	margin:0;
}


#splashcontainer{
	
	background-color:#000000;
	width:  auto;
	height:  auto;
	overflow: auto;
	margin: 0 0 0 0;
	overflow-x:hidden;
	overflow-y:hidden;
	
}


#container{
	background-color:#000000;
	position: fixed;
	width: 100%;
	height: 600px;
	border: 1px solid  #000;
	overflow: auto;
	margin: 0 0 0 0;
	overflow-x:hidden;
	overflow-y:hidden;
	margin-top: 0px;
}


#menucontainer {
	margin-top: 0px;
	margin-left: 15px;
	float: left;
	height: 498px;
	width: 200px;
	background-color:#000;
	overflow: hidden;
	border: 1px solid  #000;

}


#splashmenucontainer {
	top: 0px;
	position: fixed;
	margin-top: 0px;
	margin-left: 95px;
	float: left;
	height: 500px;
	width: 200px;
	background-color:#000;
	background-image:splashmenubackground.gif;
	opacity:0.85;filter:alpha(opacity=85);
	z-index: 20;
	padding-top: 5px;
	padding-left: 11px;
	padding-right: 11px;
	border:1px solid #272727;
	border-bottom: 2px;
	border-bottom-color: #ffffff;
	border-bottom-width:thick;
	
	
}

#dial {
	position: fixed;
	top: 394px;
	width:222px;
	height:225px;
	margin-left: 96px;
	background-image:url(Images/UI/dial2.gif);
	opacity:0.88;filter:alpha(opacity=88);
	background-position: center;
	background-repeat:no-repeat;
	z-index: 20;
}
	

#backtomenuspot {
	margin-left: 0px;
	height: 2px;
	width: 2px;
	background-image:url(Images/UI/backtomenu_spot.gif);
	top: 0px;
	padding: opx;
	border: 0px;
}
	


.portraiture-main-content {
	
	
	top: 0px;
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 9094px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
}


.commercial-main-content {
	margin-top: 0px;
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 11376px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
}

.brentalex-main-content {
	
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 10273px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
}

.markjulia-main-content {
	
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 9140px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
}

.alastairjuliet-main-content {
	
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 12574px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
}

.timvanessa-main-content {
	
	
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 9469px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
	
}

.OOTC-main-content {
	
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 22490px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
}


.Ethiopia2007-main-content {
	
	margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 28643px;
	height: 480px;
	padding:20px;
	background:#0000000;
	
}

.contact-main-content {
	position:relative;
	top: 26px;
margin-left:260px;
	border: 1px   #333;
	border-style: solid;
	float: none;
	width: 690px;
	height: 480px;
	padding:30px;
	
}


.sectionhorizontal{
	margin: 1 1 1 1;
	height: 480;
	width:717px;
	float:left;
	margin-right:50px;
	border:1;
	background-image:url(Images/UI/backgroundhor.gif);
	background-repeat:no-repeat;
}

.sectionvertical{
	margin: 1 1 1 1;
	height: 480px;
	width: 324px;
	float:left;
	margin-right:50px;
	border:1;
	background-image:url(Images/UI/backgroundvert.gif);
	background-repeat:no-repeat;
}


.sectionmarkjulia8{
	margin: 1 1 1 1;
	height: 480px;
	width: 368px;
	float:left;
	margin-right:50px;
	border:1;
	background-image:url(Images/UI/backgroundvert.gif);
	background-repeat:no-repeat;
}


.sectionseparate{
	margin: 0 0 0 0;
	height: 480px;
	width: 100px;
	float:left;
	margin-right:50px;
	border:1;

}

#sectiontext{
	background-color:#333;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 14px;
	line-height: 120%;
	color:#E0E0E0;
	margin: 1 1 1 1;
	height: 380px;
	width:640px;
	float:left;
	margin-right:50px;
	border:1;
	padding:50px;
	
}

#OOTCsectiontext{
	background-color:#333;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 14px;
	line-height: 135%;
	color:#E0E0E0;
	margin: 1 1 1 1;
	height: 380px;
	width:640px;
	float:left;
	margin-right:50px;
	border:1;
	padding:50px;
	
}

#signature {
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:600;
	font-size: 14px;

}


#blog {
	margin-left:225px;
	top:30px;
	height: px;
	width: 790px;
	overflow-y: hidden;
	overflow-x: hidden;
	border:#000 0px;
	

}

#splashsocialnetworking {
	vertical-align:text-top;
	color:#ccc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	position: fixed;
	top:580px;
margin-left: 847px;
	height:20px;
	width:120px;
	border: 1px #FFF;
	z-index: 8000;
}
	
img
{  border-style: none;
}

#wedding a {
		display:block;
		height: 24px;;
		width:120px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("Images/UI/menu_wedding.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#wedding1 a:hover {	
		background-position: -120px 0;
	
		}
	#wedding1 a:active {
		background-position: -240px 0;

		}
	
	
#portraiture a {
		display:block;
		height: 20px;
		width:210px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("Images/UI/portraiture_menu.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#portraiture a:hover {	
		background-position: -210px 0;
	
		}
	#portraiture a:active {
		background-position: -420px 0;

		}



#brentalex a {
		display:block;
		height: 20px;
		width:210px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("Images/UI/brentalex_menu.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#brentalex a:hover {	
		background-position: -201px 0;
	
		}
	#brentalex a:active {
		background-position: -419px 0;

		}


#alastairjuliet a {
		display:block;
		height: 20px;
		width:210px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("Images/UI/alastairjuliet_menu.gif") 0 0 no-repeat;
		text-decoration: none;
		overflow:hidden;
		}
	#alastairjuliet a:hover {	
		background-position: -220px 0;
	
		}
	#alastairjuliet a:active {
		background-position: -440px 0;

		}
		
#timvanessa a {
		display:block;
		height: 20px;
		width:210px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("Images/UI/timvanessa_menu.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#timvanessa a:hover {	
		background-position: -210px 0;
	
		}
	#timvanessa a:active {
		background-position: -420px 0;

		}


#markjulia a {
		display:block;
		height: 20px;
		width:210px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("Images/UI/markjulia_menu.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#markjulia a:hover {	
		background-position: -210px 0;
	
		}
	#markjulia a:active {
		background-position: -420px 0;

		}



#OOTC a {
		display:block;
		height: 20px;
		width:210px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		font: bold 14px/1 sans-serif;
		color:#c60;
		background: url("Images/UI/OOTC_menu.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#OOTC a:hover {	
		background-position: -210px 0;
	
		}
	#OOTC a:active {
		background-position: -420px 0;

		}




#ethiopia a {
		display:block;
		height: 20px;
		width:210px;
		margin: 0 0 0  0; padding:0px 0 0px 0px;
		background: url("Images/UI/ethiopia_menu.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#ethiopia a:hover {	
		background-position: -210px 0;
	
		}
	#ethiopia a:active {
		background-position: -420px 0;

		}
		

#filler {
	
		height: 3px;
		width:210px;
		margin: 0 0 0 0 ;
		background-image: url(Images/UI/filler.gif)
}

.instructions {

	color: #666;

	margin-left: 15px;
	height: 26px;
	width: 200px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	font-weight: 550;
	margin: 15 0 0 0;

}
	

 



.sectionseparate{
	margin: 0 0 0 0;
	height: 480px;
	width: 100px;
	float:left;
	margin-right:50px;
	border:1;

}

	
img
{  border-style: none;
}


.box {
	width: 220px;
	height: 72px;
	background-image:url(Images/UI/menu_divider.gif);
		color:#000000;
		
}

#backtomenu a {
		top: 16px;
		position:relative;
		z-index:2;
		float:right;
		display:block;
		height: 24px;
		width:175px;
		margin: 0 0 0  0; padding:0px 0px 0px 0px;
		background: url("Images/UI/backtomenutext.gif") 0 0 no-repeat;
		text-decoration: none;
		}
	#backtomenu a:hover {	
		background-position: -175px 0;
	
		}
	#backtomenu a:active {
		background-position: -350px 0;

		}
		
.hiddenPic {display:none;}

.main_view {
	float: left;
	position: relative;
	
}

The CSS

/* rotator in-page placement */
    div#rotator {
	position:relative;
	height:345px;
	margin-left: 15px;
}
/* rotator css */
	div#rotator ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div#rotator ul li img {
		position:fixed;
		top: 13px;
	border:1px solid #333;
	padding: 20px;
	background: #000;
}
    div#rotator ul li.show {
	z-index:5;
}


/* rotator in-page placement */
    div#sidetext {
		
	top: 480px;
	position:absolute;
	height:555px;
	margin-left: 770px;
}
/* rotator css */
	div#sidetext ul li {
	float:right;
	position:relative;
	list-style: none;
}
/* rotator image style */	
	div#sidetext ul li img {
		opacity:0.85;filter:alpha(opacity=85);
		position:fixed;
	border:1px solid #333;
	padding: 0px;
	background: #000;
}
    div#sidetext ul li.textclass {
	z-index:5;
}

title { height: 0; padding-top: 240px; overflow: hidden;
background-color:#666;
border:thin;
border-color:#CCC;
color:#FFF;

}

@font-face {
	font-family: Opal;
	src: url('Opal.ttf');
}

.submenu_class {
	font-family: Opal;
	font-size: 16px;
	color:#888;
	background-color:#000;
	font-weight:100;
	
	
}

.menu_class {
	font-family: Opal;
	font-size: 25px;
	color:#888;
	background-color:#000;
	font-weight:100;
	width:200px;
	
}

a:link {color:  #888;
text-decoration:none}      /* unvisited link */
a:visited {color:#888;
text-decoration:none}  /* visited link */
a:hover {color:#fff;
text-decoration:none}  /* mouse over link */
a:active {color:#fff;
text-decoration:none}  /* selected link */

#dark 			{display: none; background-color:#000; position:absolute; left:0; top:0; z-index:100;}
#message 		{display:none; position:absolute; left:0; top:0; z-index:101; width:460px; height:425px; background-color:#000; border:1px solid #555; -moz-border-radius: 20px; -webkit-border-radius : 0px; padding: 0px; color:  #ccc; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bolder; line-height:2;}

#copyright {
	
  font-family: "Opal";
  font-size:12px;
  src: url"(http://www.illuminphotography.com/UI/OPAL.TTF") format("truetype");
  color: #333;
	position:fixed;
	top: 583px;
	left: 635px;
	z-index: 100;
}