@import url(/stylesheets/reset.css);

/* General
---------------------------------------------------------- */
body,html  { background:#000; color:#222; font:13px/1.20em Arial,Helvetica,sans-serif; }

/* Utility classes */
.right  { float:right; }
.left   { float:left; }
.clear  { clear:both; }

/* Layout
---------------------------------------------------------- */
#page { margin:0 auto; width:900px; padding:0 10px; 
	-webkit-animation-name: fade-in;
	-moz-animation-name: fade-in;
	-ms-animation-name: fade-in;
	
	-webkit-animation-duration: 5s;
	-moz-animation-duration: 5s;
	-ms-animation-duration: 5s;}
	
#page #twitter a img { float:right; margin: 170px 50px 0 0;}
#page #facebook a img { float:right; margin: 168px 10px 0 0;}

#branding { background:url(/images/front/branding-background.jpg) left top no-repeat; height:204px; }
#branding h1   { background:url(/images/front/vitruvian-fine-art-studio.png) left top no-repeat; height:80px; text-indent:-5000px; position:relative; top:126px; overflow:hidden; width:508px; }

#nav-primary   { background:url(/images/front/nav-primary-bottom.jpg) left bottom no-repeat; position:relative; }
#nav-primary ul         { background:url(/images/front/nav-primary-top.jpg) right top no-repeat; min-height:34px; padding:20px 0 5px 50px; whitespace:nowrap; }
#nav-primary ul li      { float:left; list-style:none; }
#nav-primary ul li a    { color:#333; display:block; float:left; font-weight:bold; height:30px; line-height:30px; padding:0 10px; text-decoration:none; text-transform:capitalize; }
#nav-primary ul li a:hover    { color:#fff; }

#nav-secondary	{ font-size:11px; margin:-1em 0 1.25em; }
#nav-secondary ul li	{ float:left; list-style:none; padding-right:22px; color: black;}
#content #nav-secondary ul li a:hover { color:#075698; }
#content #nav-secondary ul li a.on { color:gray; }

#content  { background:url(/images/front/content-background.jpg) left top repeat-y; clear:both; overflow-x:hidden; padding:20px 40px 30px 60px; }

#content table   { display:block; background:url(/images/front/underline.png) left top repeat-x; }
#content thead tr {border-bottom: none; }
#content th { padding:0 10px; height:32px; line-height:32px; }   
#content td { padding:5px 10px; line-height:1.7em; }
#content tr {border-bottom: 1px solid lightgray;}
#content a  { color:#0e497a; }
#content dt,#content th  { color:#075698; }
#content h1,#content h2,#content h3,#content h4     { clear:both; line-height:1.25em; }
#content h1,#content h2,#content h3,#content h4,#content dt,#content th  { font-weight:bold; }
#content h2 { background:url(/images/front/underline.png) left bottom repeat-x; font-size:19px; font-weight:bold; margin-bottom:15px; padding-bottom:8px; }
#content h3 { font-size:17px; font-weight:bold; margin-bottom:15px; }
#content h4 { color:#bfc8d9; font-size:28px; font-weight:bold; letter-spacing:1px; margin:0 10px 5px; }
#content h5 { color:#bfc8d9; font-size:60px; font-weight:bold; letter-spacing:1px; margin:50px 10px 30px 5px; }
#content p { color:#444; }
#content p,
#content ul { margin-bottom:0.95em; }
#content ul li  { margin-bottom:0.25em;line-height:1.5em; }
#content ul li a {  color:black; text-decoration:none; display:block; }
#content ul li a:hover { color:white; }

#content .paint-box-content #courses-list tbody tr td a { color:black; text-decoration:none; } 
#content .paint-box-content #courses-list tbody tr td a:hover { color:#fff; }
    
#content em { color:#075698; font-weight:bold; }
#content strong { color:#075698; font-weight:bold; font-size:1.25em; line-height:1.25em; }
#content .disclaimer    { color:#666; font-size:11px; font-style:italic; line-height:1.15em; }
#content .note    { color:#666; font-size:11px; }
#content .center    { text-align:center !important; }

#content .index tbody tr td a {color:black; font-weight:bold; text-decoration:none; }
#content .index tbody tr td a:hover {color:#c5c5c5;}

#content #instructor-gallery  {  }
#content #instructor-gallery div.gallery-thumbnail  { position:relative; float:left; height:130px; text-align:center; width:70px; }
#content #instructor-gallery div.gallery-thumbnail a img    { border:2px solid #7B8B98; }

#content #nav-blog ul     { margin-left:0; }
#content #nav-blog ul li  { list-style:none; }
#content #nav-blog ul li ul       { margin-left:1.25em; }
#content #nav-blog ul li ul li    { list-style:disc outside; }

#content #breadcrumbs   { font-size:10px; margin:-1em 0 1.25em; }
#content #breadcrumbs ul li     { float:left; padding-right:5px; }
#content #breadcrumbs ul li a   { background:url(/images/front/breadcrumb-background.gif) right center no-repeat; display:block; padding-right:8px; color:#075698; }

/* Two column layout */
body.two-column #content-primary    { float:left; padding-right:25px; width:445px; }
body.two-column #content-secondary  { float:right; width:320px; padding: 10px 10px 0 0; }

/* One column layout */
body.one-column #content    { padding-right:60px; }
body.one-column #content-secondary  { display:none; }

#site-info  { background:url(/images/front/site-info-background.jpg) center top no-repeat; min-height:340px; position:relative; }
#site-info p.legal  { color:#1e1413; position:absolute; top:290px; left:45px; }

/*SiteMeter*/
.sitemeter { display: none; }

/*Google Ads*/
#content #content-secondary .ad { padding: 0 10px 20px 0; text-align: center; }
#content .course-images .ad { margin-left: 15px; text-align: center; }

/* Content elements
---------------------------------------------------------- */
/* Quote */
#content blockquote { background:url(/images/front/blockquote-background.png) left top no-repeat; margin-bottom:1.25em; padding:18px 57px; position:relative; text-align:left; font-weight:bold; }
#content blockquote div.blockquote-content   { position:relative; z-index:2; }
#content blockquote div.blockquote-bottom    { background:url(/images/front/blockquote-background.png) right bottom no-repeat; height:100%; width:100%; position:absolute; right:0; bottom:0; z-index:1; }
#content blockquote p {color:#555; text-align:right; font-weight:normal; }

/* Blog post */
#content div.blog-post      { margin-bottom:32px; }
#content div.blog-post h3   { background:url(/images/front/underline.png) left bottom repeat-x; font-size:19px; font-weight:bold; margin-bottom:15px; padding-bottom:8px; color:#075698; font-size:18px; font-weight:bold; line-height:1em; margin-bottom:0.15em; }
#content p.blog-date        { color:#666; font-size:12px; font-style:italic; line-height:1em; margin-bottom:0.50em; }
#content p.blog-date        { color:#666; font-size:12px; font-style:italic; line-height:1em; margin-bottom:0.50em; }


/* Photo frame: Primary Content */
#content #content-primary .photo-frame    { width:435px; }
#content #content-primary .photo-frame-top {background:url(/images/front/primary-content-photo-frame-top.png) left top no-repeat; height:45px; }
#content #content-primary .photo-frame-bottom { background:url(/images/front/primary-content-photo-frame-bottom.png) left bottom no-repeat; height:11px; margin-bottom: 20px;}
#content #content-primary .photo-frame-middle { background:url(/images/front/primary-content-photo-frame-middle.png) left top repeat-y; line-height:0; margin:0; padding:0 25px; width:385px; }
#content #content-primary .photo-frame-middle div.photo-frame-details { background:url(/images/front/primary-content-photo-frame-details.png) left top repeat-y; color:#666; font-size:11px; font-style:italic; line-height:1.10; margin:0 1px; padding:10px 0; }

/* Photo frame: Secondary Content */
#content div.photo-frame    { width:300px; }
#content div.photo-frame-top    { background:url(/images/front/photo-frame-top.png) left top no-repeat; height:45px; }
#content div.photo-frame-middle { background:url(/images/front/photo-frame-middle.png) left top repeat-y; line-height:0; margin:0; padding:0 25px; width:250px; }
#content div.photo-frame-middle a,
#content div.photo-frame-middle a img   { line-height:0; margin:0; padding:0; }
#content div.photo-frame-middle div.photo-frame-details { background:url(/images/front/photo-frame-details.png) left top repeat-y; color:#666; font-size:11px; font-style:italic; line-height:1.10; margin:0 1px; padding:10px 0; }
#content div.photo-frame-middle div.photo-frame-details ul li { padding:2px 0; }
#content div.photo-frame-middle div.photo-frame-details a {color:#075698; }
#content div.photo-frame-bottom { background:url(/images/front/photo-frame-bottom.png) left bottom no-repeat; height:11px; margin-bottom: 20px;}

/* Photo frame: Courses */
#content #course div.course-images .photo-frame {width: 300px}
#content #course div.course-images .photo-frame-top    { background:url(/images/front/photo-frame-top.png) left top no-repeat; height:45px; }
#content #course div.course-images .photo-frame-middle { background:url(/images/front/photo-frame-middle.png) left top repeat-y; line-height:0; margin:0; padding:0 25px; width:250px; }
#content #course div.course-images .photo-frame-middle a,
#content #course div.course-images .photo-frame-middle a img   { line-height:0; margin:0; padding:0; }
#content #course div.course-images .photo-frame-middle div.photo-frame-details { background:url(/images/front/photo-frame-details.png) left top repeat-y; color:#666; font-size:11px; font-style:italic; line-height:1.10; margin:0 1px; padding:10px 0; }
#content #course div.course-images .photo-frame-middle div.photo-frame-details ul li { padding:2px 0; }
#content #course div.course-images .photo-frame-middle div.photo-frame-details a {color:#075698; }
#content #course div.course-images .photo-frame-bottom { background:url(/images/front/photo-frame-bottom.png) left bottom no-repeat; height:11px; margin-bottom: 20px;}
#content #course div.course-images iframe { float:right; }

/* Sketch box */
#content div.sketch-box    { background:url(/images/front/sketch-box-background.png) left top no-repeat; margin-bottom:1.25em; overflow:visible; padding:18px; position:relative; }
#content div.sketch-box-content  { overflow:auto; position:relative; z-index:2; }
#content div.sketch-box-bottom   { background:url(/images/front/sketch-box-background.png) right bottom no-repeat; height:100%; width:100%; position:absolute; right:0; bottom:0; z-index:1; }

/* Paint box */
#content div.paint-box   { clear:both; margin-bottom:1.25em; min-height:200px; position:relative; }
#content div.paint-box strong   { background:url(/images/front/underline.png) left bottom repeat-x; display:block; font-size:19px; font-weight:bold; margin-bottom:15px; padding-bottom:8px; }
#content div.paint-box div.paint-box-content    { padding:30px; position:relative; z-index:2; }
#content div.paint-box canvas   { zoom:1; position:absolute; top:0; left:0; z-index:1; }

/* Alternate layouts
---------------------------------------------------------- */
/* Course descriptions */
body.course #content ul.course-details  { overflow:auto; }
body.course #content ul.course-details li   { float:left; font-weight:bold; margin-right:25px; }

body.course #content div.photo-frame	{ margin:-40px 0 0 30px; }
body.course #content div.has-images div.course-description { width:450px; }
body.course #content div.has-images div.course-images  { float:right; }