﻿/****************************/
/* CSS for Cobenick Studios */
/****************************/

/* main sections of the page */
#bodydiv {
	font-family:Tahoma, Arial, sans-serif;
	font-size:14px;
	width:995px;
	margin:0 auto;
	background-image:url('../images/background.jpg');
	background-repeat:no-repeat;
}

#contentdiv p{
	margin-top:-10px;
}

#topdiv {
	position:relative;
	height:210px;
	width:995px;
}

#logodiv {
	width:200px;
	height:200px;
	float:left;
}

#headerdiv {
	width:795px;
	height:200px;
	float:left;
}

#bottomdiv {
	position:relative;
	width:995px;
}

#menudiv {
	width:185px;
	float:left;
	position:relative;
}

#contentdiv {
	width:810px;
	clear:right;
	margin-left:185px;
	position:relative;
}

.bookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/indexbook.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#indexbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/cobenick.png');
	background-repeat:no-repeat;
}

#booksbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/books.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#journalbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/journals.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#calligbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/calligraphy.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#weddingbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/wedding.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#inkquillsbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/inkquills.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#waxsealsbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/waxseals.png');
	background-repeat:no-repeat;
	font-size:14px;
}


#contactbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/contactus.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#workshopbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/workshops.png');
	background-repeat:no-repeat;
	font-size:14px;
}

#invitationsbookdiv {
	width:804px;
	height:521px;
	top:0;
	left:0;
	background-image:url('../images/book/invitations.png');
	background-repeat:no-repeat;
	font-size:14px;
}


.feedback textarea, .feedback input.feed {
	font-family:"Goudy Old Style", Verdana, sans-serif;
	font-size:16px;
	color:#202091;
	background-color:#DDDDDD;
}

#pagepens span {
	margin-top:34px;
	width:300px;
	left:-275px;
}


/* styles for the contents of the menu div */
#menudiv p {
	margin-left:10px;
}
#menudiv a:link {
	text-decoration:none;
	font-size:14px;
	color:#202091;
}

#menudiv a:visited {
	text-decoration:none;
	font-size:14px;
	color:#202091;
}

#menudiv a:active {
	text-decoration:none;
	font-size:14px;
	color:#202091;
}

#menudiv a:hover {
	text-decoration:none;
	font-size:14px;
	color:#1783DE;
}

#menudiv img {
	display:block;
	margin:auto auto;
}

#copyright {
	text-align:center;
	font-size:12px;
	margin-top:0;
}

#footerdiv {
	height:100px;
}

#leftpage, #rightpage {
	width:402px;
	height:521px;
	position:relative;
	float:left;
}

.right {
	width:330px;
	height:521px;
	position:absolute;
}

#leftpage a:link, #rightpage a:link {
	text-decoration:none;
	color:#202091;
}

#leftpage a:visited, #rightpage a:visited {
	text-decoration:none;
	color:#202091;
}

#leftpage a:active, #rightpage a:active {
	text-decoration:none;
	color:#202091;
}

#leftpage a:hover, #rightpage a:hover {
	text-decoration:none;
	color:#202091;
}

#leftpage p {
	text-indent:14px;
}

.indent p{
	text-indent:14px;
}

/* styles for the order buttons in the popups */
input.btnb {
	width:100px; color:navy; font-family:Verdana; background-color:silver;
}

input.btnj {
	width: 110px;color:navy; font-family:Verdana; background-color:silver;
}
/* form textboxes */
.camp {
	width:300px; border:1px gray solid; background-color:silver; color:#202091;
	}



/****************************/
/* CSS for the image viewer */
/****************************/
.thumb {
	position:relative; z-index:0; /*z-index keeps thumbnail behind popup*/
}

.thumb img {
	border-width:0;
}

.thumb:hover {
	background-color:transparent; z-index:50; /*z-index has popup in front of everything else*/
}
/*settings for the popup window*/
.thumb span {
	position:absolute; 
	background-color:silver; /*color of the edges of the popup*/
	padding:5px; 
	left:-1000px;
	border: 1px solid gray; 
	visibility:hidden; /*not seen unless invoked by mouseover*/
	color:black; /*text color*/
	text-decoration:none;
	width:205px;
}

.thumb span img {/*img inside popup*/
	border-width:0; 
	padding:2px;
}

.thumb:hover span {
	visibility:visible; 
	top:-25px; 
	left:-215px; /*offsets larger image by 60px, so original is still somewhat visible
	             but still on the thumbnail, so cursor can be moved to interior of popup*/
}



/* CSS for sub-tree vertical menu */

.menudiv ul{
margin:0;
padding: 0;
list-style-type: none;
width: 90px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
	
.menudiv ul li{
position: relative;
}
	
.menudiv ul li ul{
position: absolute;
width: 90px; 
top: 0;
visibility: hidden;
}

.menudiv ul li a{
display: block;
overflow: auto; 
color: #0FA1F5;
text-decoration: none;
background: none;
padding: 5px 0;
border: 1px solid #ccc;
border-bottom: 0;
}

.menudiv ul li a:visited{
color: black;
}

.menudiv ul li a:hover{
background-color: #202091;
}

.menudiv .submenustyle{
background: url(arrow.png) no-repeat center right;
}

/* IE hack \*/
* html .menudiv ul li { float: left; height: 1%; }
* html .menudiv ul li a { height: 1%; }
/* end hack */

