/* html elements */

* {
	margin: 0px;
	padding: 0px;
}

body {
	background: #eee;
	font: 11px/1.5em Verdana, Arial, Helvetica, sans-serif;
	color: #000;
}

a img {
	border: none;
}

ul { list-style: none; }

/* basic layout */

#frame {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -272px;
	margin-left: -356px;
	width: 712px;
	height: 544px;
}

#header {
	height: 44px;
	padding: 6px 0 0 0;
	background: #eee url(../_img/bkgd-header.jpg) no-repeat;
}

#content {
	padding: 10px 0;
	background: #eee url(../_img/bkgd-content.gif) repeat-y;
}

#main {
	float: right;
	width: 438px;
	height: 446px;
	margin: 0 16px 0 0;
	padding: 0 10px;
	border-left: 1px solid #fff;
}

#sidebar {
	width: 220px;
	height: 446px;
	margin: 0 0 0 16px;
	border-right: 1px solid #d2d9e2;
}

#footer {
	clear: both;
	padding: 12px 6px 0 0;
	background: #eee url(../_img/bkgd-footer.gif) no-repeat;
	text-align: right;
	font-size: 10px;
	letter-spacing: .1em;
	color: #acb3bb;
}

/* menubar */

ul#menubar {
	margin: 0 0 0 269px;
}

ul#menubar li a {
	display: block;
	float: left;
	width: 108px;
	height: 43px;
	position: relative;
}

/* image replacement technic by: http://www.mezzoblue.com/tests/revised-image-replacement/ */
ul#menubar li a span {
	position: absolute;
	width: 100%;
	height: 100%;
}

ul#menubar li#home a span {
	background: url(../_img/home.jpg) no-repeat;
}
	
ul#menubar li#home a:hover span {
	background: url(../_img/home.jpg) 0 -43px no-repeat;
}
	
ul#menubar li#home.selected span, ul#menubar li#home.selected a:hover span {
	background: url(../_img/home.jpg) 0 -86px no-repeat;
}

ul#menubar li#demo a span {
	background: url(../_img/demo.jpg) no-repeat;
}
	
ul#menubar li#demo a:hover span {
	background: url(../_img/demo.jpg) 0 -43px no-repeat;
}
	
ul#menubar li#demo.selected span, ul#menubar li#demo.selected a:hover span {
	background: url(../_img/demo.jpg) 0 -86px no-repeat;
}

ul#menubar li#help a span {
	background: url(../_img/help.jpg) no-repeat;
}
	
ul#menubar li#help a:hover span {
	background: url(../_img/help.jpg) 0 -43px no-repeat;
}
	
ul#menubar li#help.selected span, ul#menubar li#help.selected a:hover span {
	background: url(../_img/help.jpg) 0 -86px no-repeat;
}

ul#menubar li#contact a span {
	background: url(../_img/contact.jpg) no-repeat;
}
	
ul#menubar li#contact a:hover span {
	background: url(../_img/contact.jpg) 0 -43px no-repeat;
}
	
ul#menubar li#contact.selected span, ul#menubar li#contact.selected a:hover span {
	background: url(../_img/contact.jpg) 0 -86px no-repeat;
}

/* sidebar */

#sidebar p {
	padding: 2px 7px 6px 10px;
	text-align: left;
	font-size: 10px;
	font-style: italic;
	letter-spacing: .1em;
	color: #666;
}

#sidebar p a {
	padding: 0 0 2px 0;
	text-decoration: none;
	font-weight: bold;
	color: #448beb;
}

#sidebar p a:hover {
	border-bottom: 1px dotted #448beb;
	color: #18afff;
}

#sidebar form p { /*cancels padding p in mailing list form*/
	padding: 0;
}

#sidebar h3 {
	padding: 6px 0 4px 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: .1em;
	color: #84aadd;
}

#sidebar ul {
	list-style: url(../_img/li-arrow.gif);
	padding: 0 10px 0 21px;
	color: #666;
}

#sidebar ul li {
	padding: 2px 0;
}

/* image replacement technic by: http://www.mezzoblue.com/tests/revised-image-replacement/ */
h2#dl_latest a  {
	width: 220px;
	height: 46px;
	display: block;
	position: relative;
}

h2#dl_latest a span {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../_img/dl_latest.jpg) no-repeat;
}
	
h2#dl_latest a:hover span {
	background: url(../_img/dl_latest.jpg) 0 -46px no-repeat;
}

#whats_new {
	width: 220px;
	height: 283px;
}

#others_galleries {
	width: 220px;
	height: 271px;
}

#others_galleries ul {
	overflow: auto;
	height: 214px;
	margin: 9px;
	padding: 0;
	border: 4px solid #fff;
	list-style: none;
}

#others_galleries ul li {
	margin: 0;
	padding: 0;
}

#others_galleries ul li a {
	display: block;
	margin: 0;
	padding: 1px 10px;
	border-bottom: 1px solid #fff;
	background: #eee;
	text-decoration: none;
	color: #789acb;
}

#others_galleries ul li a:hover {
	background: #789acb;
	color: #fff
}

h2.mailing_list {
	display: none;
}

/* form on home page */
form.mailing_list {
	background: url(../_img/mailing_list.jpg) no-repeat;
	width: 200px;
	height: 40px; 
	padding: 33px 0 0 20px;
}

form.mailing_list input.txt {
	float: left;
	width: 150px;
	margin: 3px 8px 0 0;
}

/* form on demo page */
form.gallery_submit {
	background: url(../_img/gallery_submit.jpg) no-repeat;
	width: 200px;
	height: 65px; 
	padding: 20px 0 0 20px;
}

form.gallery_submit input {
	margin: 25px 0 0 0;
}

form.gallery_submit input.txt {
	float: left;
	width: 150px;
	margin: 3px 8px 3px 0;
}

h2#dl_manual a  {
	width: 221px;
	height: 54px;
	display: block;
	position: relative;
}

h2#dl_manual a span {
	position: absolute;
	width: 100%;
	height: 100%;
}

h2#dl_manual a span {
	background: url(../_img/dl_manual.jpg) no-repeat;
}
	
h2#dl_manual a:hover span {
	background: url(../_img/dl_manual.jpg) 0 -54px no-repeat;
}

/* on contact page */
#contact_side {
	width: 220px;
	height: 283px;
}

#contact_side form {
	text-align: center;
}

#contact_side p {
	font-style: normal;
}

ul#email_descriptions  {
	float: right;
	width: 316px;
	height: 4em;
}

#email_descriptions li {
	display: none;
}

#email_descriptions li.show_description {
	display: block;
	padding: 2px 6px;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #fff;
	background-color: #84aadd;
	font-size: 10px;
	font-style: italic;
	color: #fff;
}

#contact_form select {
	margin: 2px 0 0 0;
}

#contact_form input {
	width: 212px;
	margin: 0 0px 4px 0;
}

#contact_form input#subject {
	width: 432px
}

#contact_form textarea {
	width: 432px;
	height: 180px;
}

input#submit_button {
	float: right;
	width: 146px;
	margin: 6px 2px 0 0;
}

/* main */

#main a {
	padding: 0 0 2px 0;
	text-decoration: none;
	font-weight: bold;
	color: #448beb;
}

#main a:hover {
	border-bottom: 1px dotted #448beb;
	color: #18afff;
}

#main a:hover:visited {
	color: #858e9a;
}

#main p {
	padding: 4px 0;
	text-align: justify;
}

#main h1 {
	margin: 0 0 6px 0;
	padding: 10px 0 2px 0;
	text-align: center;
	font-size: 12px;
	font-style: italic;
	letter-spacing: .2em;
	color: #858e9a;
}

#main h2 {
	display: none;
}

#main_txt {
	height: 197px;
}

/* home page */
#features {
	float: left;
	width: 194px;
	height: 216px;
	padding: 25px 10px 10px 10px;
	background: url(../_img/features.gif) no-repeat;
}

#features ul li {
	padding: 0 0 5px 0;
}

#requirements {
	width: 194px;
	height: 216px;
	margin: 0 0 0 226px;
	padding: 25px 10px 10px 10px;
	background: url(../_img/requirements.gif) no-repeat;
}

#requirements ul li {
	padding: 0 0 5px 0;
}

/* demo page */
#main blockquote {
	background: transparent url(../_img/pullquote_left.gif) no-repeat;
}

#main blockquote p {
	padding: 6px 50px;
	background: transparent url(../_img/pullquote_right.gif) no-repeat bottom right;
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
	letter-spacing: .1em;
	color: #448beb;  /* #84aadd better? */
}

#quote_source {
	margin: 0 50px 10px 0;
	text-align: right;
	font-size: 10px;
	color: #999;
}

#templates {
	width: 436px;
	height: 251px;
	margin: 0 0 0 1px;
	padding: 1px 0 0 0; /* for stupid collapsing border rule */
	background: url(../_img/templates.gif) no-repeat;
}

#templates ul {
	overflow: auto;
	height: 224px;
	margin: 19px 7px 0 5px;
}

#templates ul li a {
	margin: 0 3px 0 5px;
	font-weight: normal;
}

/* help page */
#faq {
	height: 446px;
	overflow: auto;
	margin: 0 -10px 0 0; /* to cancel padding from #main */
	padding: 0 10px 0 0;
}

#faq a:hover {
	border: none;
}

#faq a:hover:visited { /* this one's for firefox */
	color: #18afff;
}

#faq h1 {
	padding: 0;
	text-align: left;
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
	letter-spacing: 0.2em;
}

#faq h4 {
	color: #448beb;
}

/* states of f4 sibling changed with DOM scripting */
#faq .hidden{
	display: none;
}

#faq .shown{
	display: block;
}

#faq .open{
	color: #18afff;
}

#faq .hover{
	cursor: pointer;
	color: #18afff;
}


/* footer */

#footer a {
	text-decoration: none;
	color: #acb3bb;
}

#footer a:hover {
	color: #858e9a;
}

/* mailers feedback form */

#mailing_list {
	background: url(../_img/mailing_list.jpg) no-repeat;
	width: 200px;
	height: 40px; 
	padding: 33px 0 0 20px;
	color: #fff;
}

#mailing_list p {
	padding: 5px 0 0 2px;
	font-style: normal;
	font-size: 12px;
	color: #fff;
}

#gallery_submit {	
	background: url(../_img/gallery_submit.jpg) no-repeat;
	width: 200px;
	height: 65px; 
	padding: 20px 0 0 20px;
}

#gallery_submit p {
	padding: 5px 0 0 2px;
	font-style: normal;
	font-size: 12px;
	color: #fff;
	
}