/* COLORS
======================================================================
	#xxxxxx : color name
====================================================================== */


@import url(base.css);
 

/* GENERAL
====================================================================== */

html {
}

body, input, select, textarea {
	font-family: "Trebuchet MS";
}

/* STICKY FOOTER
======================================================================*/  

   
/*====================================================================== */


h1 {
	font-size: 1.95em;
	font-weight: normal;
	background: url(../_images/logo.png) no-repeat 0 0;
	width: 614px;
	height: 135px;
}

h2 span,
h1 span {
	position: absolute;
	top: -10000px;
}

h2 {
	margin: 30px 0 20px 40px;
	height: 39px;
}


h3 {
	margin-top: 0;
	position: relative;
	top: 15px;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.4;
	padding-left: 8px;
}

h4, h5, h6 {
	margin-top: 0;
	position: relative;
	top: 15px;
	color: #fff;
	font-size: .8em;
	line-height: 1.4;
}

h7 {
	margin-top: 1.5em;
	font-size: .8em;
	font-style:;italic;
	font-weight: bold;
	line-height: 1.5;
	color: #ffffff;
	text-align:left;
	padding-left: 20px;
	display: block;
	width: 900px;
}

h8 {
	margin-top: 0;
	position: relative;
	top: 15px;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.4;
	padding-left: 8px;
}
p, address, dl, ul, ol, table, label {
	/* good place to define typical font-size, line-height and margins */
	margin-top: 1.5em;
	font-size: .8em;
	line-height: 1.5;
	color: #d8d8d8;
	padding-left: 8px;
}

.bodytext {
	margin-top: 1.5em;
	font-size: .8em;
	line-height: 1.5;
	color: #d8d8d8;
	padding-left: 20px;
	display: block;
	width: 455px;
}

.bodybutton {
	margin-top: 1.5em;
	font-size: .8em;
	line-height: 1.5;
	color: #d8d8d8;
	padding-left: 200px;
	display: block;
	width: 455px;
}

.extratext {
	margin-top: 1.5em;
	font-size: .8em;
	line-height: 1.5;
	color: #d8d8d8;
	text-align:left;
	padding-left: 20px;
	display: block;
	width: 400px;
}

.widthtext {
	margin-top: 1.5em;
	font-size: .8em;
	line-height: 1.5;
	color: #d8d8d8;
	text-align:left;
	padding-left: 20px;
	display: block;
	width: 900px;
}

.contacttext {
	margin-top: 1.5em;
	font-size: .8em;
	line-height: 1.5;
	color: #d8d8d8;
	padding-left: 50px;
	display: block;
	width: 455px;
}


h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
	/* use to reduce space above first paragraph under any header */
}

ul {
	margin-left: 1.5em;
	list-style-type: disc;
}

ul ul {
	margin-top: 0;
	list-style-type: circle;
}

ol {
	margin-left: 1.5em;
	list-style-type: decimal;
}

ol ol {
	margin-top: 0;
	margin-left: 1.5em;
	list-style-type: lower-alpha
}

dd {
	margin: 0;
}

dt {
	margin-top: 1.5em;
	font-weight: bold;
}

blockquote {
	margin: 2em 0;
	padding: .5em 2em 1.5em 2em;
	/* good place to define a background */
}

blockquote p {
	/* good place to define typical font-size, line-height and margins */
	margin-top: 50px;
}

cite {
	text-align: right;
	display: block;
}

cite:before {
  content: "- ";
}

em, q { font-style: italic; }

strong { font-weight: bold; }

a:hover,
a:active {
	color: white;
}


hr {
	margin: 15px 0px 30px 20px;
}

/* FORMS
====================================================================== */
form {
	width: 360px;
	text-align: left;
}

form.Row {
	overflow: auto;
}

fieldset {
	position: relative; /* make legend move horizontally correct in IE */
	overflow: auto;
}

legend {
	position: relative;
	left: -7px; /* IE */
	padding: 1.5em 0 .85em 0;
	font-weight: bold;
}

fieldset>legend {
	left: 0; /* future proof */
}

input, textarea, select {
	margin-top: 3px;
	display: block;
}

label {
	margin: 0;
	padding-bottom: .85em;
	width: 310px;
	line-height: 1.2;
	display: block;
}

select,
label.FieldLarge,
label.FieldLarge input,
label.FieldLarge select,
label.FieldMedium,
label.FieldMedium input,
label.FieldMedium select,
label.FieldSmall,
label.FieldSmall input,
label.FieldSmall select,
input.InputRadio,
input.InputCheck {
	float: left;
}

label.FieldLarge,
label.FieldLarge input,
label.FieldLarge select {
	width: 310px;
}

label.FieldMedium,
label.FieldMedium input,
label.FieldMedium select {
	width: 150px;
}

label.FieldSmall,
label.FieldSmall input,
label.FieldSmall select {
	width: 70px;
}

label.FieldLarge,
label.FieldMedium,
label.FieldSmall {
	margin-right: 10px;
}

label.LabelRadio,
label.LabelCheck {
	margin-left: 25px;
	padding-bottom: 15px;
}

input.InputRadio,
input.InputCheck {
	margin: 0;
}




/* CONTAINERS
====================================================================== */

#header_wrapper {
	min-width: 963px;
	background: #fff url(../_images/background_header.jpg) repeat-x bottom right;
}

#header {
	width: 963px;
	margin: 0 auto;
}
/* SPACE BETWEEN COLORED BAR AND REST OF PAGE */

#content_wrapper {
	padding: 10px 0px 0px 0px;
	min-width: 993px;
}

#nav_wrapper {
	width: 963px;
	margin: 0 auto;
}

#content {
	overflow: auto;
	width: 993px;
	margin: 0 auto;
	padding-bottom: 35px;
	background: url(../_images/content_tile.png) repeat-y 0 0;
}

.Shim {
	height: 16px;
}

#content_inner {
	width: 976px;
	background: url(../_images/background_content.png) no-repeat 0 0;

}

/* HOME
====================================================================== */

body#section_visual_and_graphic_arts {
  background: url(../_images/background_html_purple.jpg);
}

body#section_visual_and_graphic_arts #content_wrapper {
	background: url(../_images/colorbar_purple.jpg) repeat-x top right;
}

body#section_visual_and_graphic_arts #sub_nav {
	margin-right: 0px;
}

body#section_visual_and_graphic_arts #sub_nav li {
	background: #8682a1;
}


body#section_visual_and_graphic_arts h2 {
	border-bottom: 2px solid #948eae;
}

h2#welcome {
	width: 500px;
	background: url(../_images/h2_welcome.gif) no-repeat top left;
}

h2#where {
	width: 500px;
	background: url(../_images/h2_where.png) no-repeat top left;
}

h2#what {
	width: 500px;
	background: url(../_images/h2_what.png) no-repeat top left;
}

h2#terms {
	width: 500px;
	background: url(../_images/h2_terms.png) no-repeat top left;
}


body#section_visual_and_graphic_arts #content_inner {
	overflow: auto;
}

.Photo {
	margin: 0 20px 20px 0px;
	float: right;
}

#photo_box {
	width: 320px;
	margin: 0 20px 20px 0px;
	float: right;
}

#photo_box img {
	margin: 0 0 20px 0;
}

body#section_visual_and_graphic_arts p {
	margin-left: 20px;
}

/* SERVICES
====================================================================== */

body#section_services {
	background: url(../_images/background_html_blue.jpg);
}

body#section_services #content_wrapper {
	background: url(../_images/colorbar_blue.jpg) repeat-x top right;
}

body#section_services #sub_nav {
	margin-right: 0px;
}

body#section_services #sub_nav li {
	background: #477c97;
}

body#section_services h2 {	
	border-bottom: 2px solid #8bbed4;	
}

h2#services {
	width: 320px;
	margin-top: 20px;
	background: url(../_images/h2_services.gif) no-repeat top left;
}

body#section_services #content_inner {
	overflow: auto;
}

.Container {
	overflow: auto;
	margin: 20px 0 0 20px;
	padding: 20 0 40px 0;
}

.credits {
	overflow: auto;
	margin: 0px 0 0 0px;
	padding: 0 0 0px 0;
}


body#section_visual_and_graphic_arts .Container {
	overflow: visible;
}

.Container p {
	margin-top: 20px;
}

/*ALL IMAGES - THIS SECTION IMPACTS EVERY PAGE - ALL IMAGES
=====================================================================*/

.Thumb {
	margin: 10px 10px;
	background: #fff;
	opacity: .5;
}

.Thumb:hover {
opacity: 1;
}

body#section_services .Thumb {
	border: 2px solid #437c98;
	padding: 1px;
	background: #fff;
}

.Nail {
	margin: 0px 2px 0px 2px;
	background: #fff;
	opacity: .5;
}

.Nail:hover {
opacity: 1;
}

/*BLUE boarder around image
==================================================================*/

.Image {
	float: right;
	margin: 0 20px;
	border: 3px solid #549cbf;
}

.Image img {
	border: 2px solid #fff;
}


/*Purple boarder around image
====================================================================*/

.Notherimage {
	float: right;
	margin: 0 5px;
	border: 3px solid #948eae;
}

.Notherimage img {
	border: 2px solid #fff;
}


.mini {
	margin: 10px 10px;
	background: #fff;
	opacity: .5;
}

.mini:hover {
opacity: 1;
}

body#section_visual_and_graphic_arts .mini {
	border: 2px solid #948eae;
	padding: 1px;
	background: #fff;
}


/*Green boarder around image
=======================================================================*/

.Port {
    float: right;
	margin: 0 20px;
	border: 3px solid #5a9699;
}

.Port img {
	border: 2px solid #fff;
}

/*YELLOW boarder around image
======================================================================*/

.Graphic {
    float: right;
	margin: 0 20px;
	border: 3px solid #dbbc76;
}

.Graphic img {
	border: 2px solid #fff;
}

/*SHOP boarder around image
======================================================================*/

.Shopgraphic {
    float: right;
	margin: 0 20px;
	border: 3px solid #c9aa89;
}

.Shopgraphic img {
	border: 2px solid #fff;
}

.style1 {
	color: #FFFFFF;
	font-weight: bold;
}


/*TUTORIALS boarder around image
======================================================================*/

.Tutorialgraphic {
    float: right;
	margin: 0 20px;
	border: 3px solid #96aabd;
}

.Tutorialgraphic img {
	border: 2px solid #fff;
}


/* NO BORDER - SLIDESHOWS
====================================================================*/

.slide {
	float: right;
	margin: 0 0px;
	
}


 
/* Gallery
====================================================================== */

body#section_gallery {
	background: url(../_images/background_html_green.jpg);
}

body#section_gallery #content_wrapper {
	background: url(../_images/colorbar_green.jpg) repeat-x top right;
}

body#section_gallery #sub_nav {
	margin-right: 0px;
}

body#section_gallery #sub_nav li {
	background: #538689;
}

body#section_gallery h2 {
	border-bottom: 2px solid #579699;	
}

h2#gallery {
	width: 320px;
	margin-top: 20px;
	background: url(../_images/h2_galleries.gif) no-repeat top left;
}

body#section_tutorials h4,
body#section_gallery h4 {
	margin: 0 0 20px 0;
	position: static;
	top: 0px;
	text-align: left;
}

body#section_gallery #content_inner {
	overflow: auto;
}

#one,
#two,
#three,
#four {
	width: 320px;
	padding: 0 0 0 40px;
	margin-left: 80px;
	float: left;
}

#one img,
#two img,
#three img,
#four img {
	width: 300px;
}

h3#illustration {
	margin-top: 0;
	position: relative;
	top: 0px;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.4;
	margin: 20px 0px 10px;
}

.slideshow {
	margin: 0 0 0 40px;
	text-align: center;
}

.slideshow img {
	border: 2px solid #5a9699;
}

.slideshow ul {
	margin: 10px 0 0 0;
	list-style-type: none;
	text-align: left;
}

.slideshow ul li {
	display: -moz-inline-box;
	display: inline-block;
}

.notslideshow {
	margin: 0 0 0 40px;
	text-align: left;
}

.slideshow img {
	border: 2px solid #5a9699;
}

.slideshow ul {
	margin: 10px 0 0 0;
	list-style-type: none;
	text-align: left;
}

.slideshow ul li {
	display: -moz-inline-box;
	display: inline-block;
}
/*div {
	outline: 1px solid lime;
}*/

/* Contact
====================================================================== */

body#section_contact {
	background: url(../_images/background_html_yellow.jpg);
}

body#section_contact #content_wrapper {
	background: url(../_images/colorbar_yellow.jpg) repeat-x top right;
}

body#section_visual_and_graphic_arts #content {
	margin-top: 23px;
}

body#section_contact #content {
	margin-top: 40px;
}

body#section_contact #content_inner {
	overflow: auto;
}

body#section_contact h2 {
	margin-top: 36px;
	background: url(../_images/h2_contact.gif) no-repeat 0 0;
	width: 320px;
	border-bottom: 2px solid #dbbc76;
	margin-bottom: 20px;
}

body#section_contact form {
	margin-left: 40px;
}

body#section_contact form input,
body#section_contact form textarea {
	width: 310px;
	padding: 4px;
	border: 2px solid #e8d991;
}

body#section_contact form input.Send {
	width: 50px;
	background: #dbbc76;
	cursor: pointer;
}

body#section_contact form input.Send:hover {
	color: #fff;
}

div#honeypot {
	display: none;
}

p.Msg {
	margin: 0 0 15px 20px;
}

/* TUTORIALS
====================================================================== */

body#section_tutorials{
	background: url(../_images/background_html_grey.jpg);
}


/*JUST FOR TESTING BACKGROUNDS
======================================================================*/
/*body#section_tutorials{
	background: url(../_images/test-tile.jpg);
}*/

body#section_tutorials #content_wrapper{
	background: url(../_images/colorbar_grey.jpg) repeat-x top right;
}

body#section_tutorials #sub_nav{
	margin-right: 0px;
}

body#section_tutorials #sub_nav li{
	background: #6f7f8e;
}

body#section_tutorials h2{	
	border-bottom:2px solid #96aabd;	
}

h2#tutorials{
	width: 320px;
	margin-top:20px;
	background:url(../_images/h2_tutorials.png) no-repeat top left;
}

body#section_tutorials #content_inner{
	overflow: auto;
}

.Container {
	overflow: auto;
	margin: 20px 0 0 20px;
	padding: 20 0 40px 0;
}

.Container p {
	margin-top: 20px;
}


/* SHOP
====================================================================== */

body#section_shop {
	background: url(../_images/background_html_orange.jpg);
}

body#section_shop #content_wrapper {
	background: url(../_images/colorbar_orange.jpg) repeat-x top right;
}

body#section_shop #sub_nav {
	margin-right: 0px;
}

body#section_shop #sub_nav li {
	background: #a58783;
}

body#section_shop h2 {	
	border-bottom: 2px solid #c9aa89;	
}

h2#shop {
	width: 320px;
	margin-top: 20px;
	background: url(../_images/h2_store.png) no-repeat -39px 0;
}

body#section_shop #content_inner {
	overflow: auto;
}

.Container {
	overflow: auto;
	margin: 20px 0 0 20px;
	padding: 20 0 40px 0;
}

.Container p {
	margin-top: 20px;
}

.Thumb {
	margin: 10px 10px;
	background: #fff;
	opacity: .5;
}



/* NAVIGATION
====================================================================== */
ul#sub_nav,
ul#nav {
	margin: 0;
	list-style-type: none;
	text-align: right;
}

ul#sub_nav {
	margin: 0 0 20px 0;
}

#sub_nav li {
	display: -moz-inline-block;
	display: inline-block;
}

#nav li {
	/* use this for centered navigation */
	display: -moz-inline-box;
	display: inline-block;
	background: #7c8f9f;	
	font-size: 1em;
}

#nav li a:link,
#nav li a:visited {
	/* use this for centered navigation */
	display: block;
	display: inline-block;
	padding: 5px 15px;
	color: #000;
}

#sub_nav li a:link,
#sub_nav li a:visited {
	padding: 3px 20px;
	color: #fff;
}

#sub_nav li a:hover,
#sub_nav li a:active {
	text-decoration: underline;
}

#nav li.Last a:link,
#nav li.Last a:visited {
	
}

#nav li a:hover,
#nav li a:active {
	color: #fff;	
}

#nav li.Current a:link,
#nav li.Current a:visited {
	color: #fff;
}

/*COLOR OF NAVIGATION TABS
=======================================================================*/
	
li#home {
	background: #8682a1;
}

li#services {
	background: #4682a0;
}	

li#galleries{
	background: #569094;
}

li#contact {
	background: #d9bc78;
}

li#store {
	background: #a58783;
}
li#tutorials {
	background: #8b9cad;
}

/* FOOTER
====================================================================== */

#footer_wrapper {
	height: 40px;
	min-width: 963px;
	margin: 0;
	padding: 0;
	background: #000;
}

#footer {
	padding: 10px 0;
	width: 983px;
	margin: 0 auto;
	background: #000;
}

#footer p {
	margin: 0 0 0 17px;
}

/* CUSTOM CLASSES
====================================================================== */

.ClearBoth {
	clear: both;
}

h3 a:link,
h3 a:visited {
	font-size: 12px;
	color: #d9d9d9;
	font-style: italic;
	margin-left: 20px;
}

h3 a:hover,
h3 a:active {
	color: #d9bc78;
	text-decoration: underline;
}


#content_inner a:link,
#content_inner a:visited {
	font-size: 12px;
	color: #d9bc78;
	font-style: italic;

}
#content_inner a:hover {
	color: #d9bc78;
	text-decoration: underline;

}

/*JAVASCRIPT GALLERY - NOTE: DEFAULTS ARE UGLY 
=======================================================================*/



* {margin:0; padding:0}
java_pix {font-family: "Trebuchet MS"; background:#666;}  

#java_gallery {position:relative; width:525px; height:625px; margin:20px 20px; padding:5px;}

#java_images {height:510px; margin-bottom:20px;}

#java_image {position:relative; width:510px; height:510px; padding:2px;}

#java_image img {position:absolute; top:5px; left:5px; border: 3px solid #5a9699; padding: 2px; background: #fff;}

#miniswrapper {margin-top:2px; padding:5px 0; width:522px; height:115px;}

#minisarea {
	position:relative;
	top: -10px;
	overflow:hidden; 
	height:115px; 
	width:510px; 
}

#minis {
	position:absolute;
	list-style:none; 
	margin-left:5px; height:115px; width:10000px; 
}

#minis li {float:left; margin-right:5px; cursor:pointer}

.java_imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}

#previmg {left:0;}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0;}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}


p.GalleryText {
	display: block;
	width: 330px;
	float: right;
	text-align: left;
	padding: 0 20px 0 0;
}

p.newsText {
	display: block;
	width: 330px;
	float: left;
	text-align: left;
	padding: 0 20px 0 0;
}

.logos {
display: inline;}