/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - CSS by Justin James Grevich (jgrevich@gmail.com) Many thanks for a legendary font/color scheme and CSS layout by Steve Smith at orderedlist.com. Colors: * Body Background: 171B20 * Body Top Stripe: 0D0F10 * Dark gray Section: 121519 * Body Font: CCC * Blue Links: 09F * Link Hover: 3CF * Headline Green: 96BF55 * Background Green: 83A94A * Section gray: 1D2128 * Light Yellow: FF9 * Dark Green Links: 33421D * Dark Green Hover: 1A210E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ @media screen, projection { body { font-family:"Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif; font-size:62.5%; text-align:center; background:#171b20; padding:0 20px 0; color:#aaa; text-shadow:black 0 0 0; } :link,:visited { text-decoration:none; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, body,html,p,blockquote,fieldset,input { margin:0; padding:0; } select, input, textarea { font:99% arial,helvetica,clean,sans-serif; } table { font-size:inherit; } a { color:#069; } a:hover { color:#069; } a img, a:hover img { border:none; } h1,h2,h3,h4,h5,h6 { text-transform:uppercase; } h1 a, h3 a, li.title a { color:#693; } h1 a:hover, h3 a:hover, li.title a:hover{ color:#069; } h1 { font-size:2.2em; color:#069; margin:0 0 15px; } h2 { font-size:1.8em; padding:0 0 10px; } h3, li.title { font-size:1.3em; color:#069; } h4 { font-size:1.2em; color:#fc9; } h5 { font-size:1.1em; color:#ddd; } h5 a { font-size:1.1em; color:#ddd; } ol { margin-left:35px; } ul { list-style-type:none; } ul li { margin:0 0 0 5px; padding:0 0 0 20px; } strong { font-weight:bold; color:#FF9; } img { padding:0; } code { background:#171B20; padding:1px 2px; font-size:0.9em; color:#EEE; font-family:Monaco, "Courier New", Courier, mono; } blockquote { background:#171B20; padding:20px; margin:0 0 1.6em; font-style:italic; } pre { font-size:0.9em; width:100%; overflow:auto; } fieldset { border:none; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Layout - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #wrapper { width:800px; margin:0 auto; padding:0; text-align:left; } #header { margin:13px auto 26px; text-indent:-9999px; } #logo { background: url(../images/logo.gif) no-repeat; height:32px; width:522px; margin:0 auto; } #footer { clear:both; text-align:center; font-size:1.2em; float:none; } #footer p { margin:0 0 5px 0; padding:0; } #footer p:first-letter { font-size:1.9em; } #footer a:hover { border-bottom:1px dotted silver; } #footer .wrapper { float:none; } div#footer.section { margin: 0 0 50px 0; } .dotted_silver_line { height:1px; border-top:1px dotted silver; padding:0 50px; } .fleft { float:left; } .fright { float:right; } .cleft { clear:left; } .cright { clear:right; } .big_p { font-size:1.9em; margin:20px 0; } li.title, li.title a { margin:0; text-align:center; font-size:1.8em; line-height:1.4em; font-weight:bold;} .pagination { font-size:1.7em; margin:19px 0; text-align:center; } .pagination .current { background-color:#222; border:1px solid #666; padding:9px 4px; } .pagination a { padding:9px 4px; border:1px solid #222; } .pagination a:hover { background-color:#171B20; border:1px solid #333; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Navbar Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #navbar { height:30px; width:800px; margin:0 auto 13px; } #navbar ul { background:url(../images/nav.gif) no-repeat; height:30px; list-style-type:none; margin:0 auto; position:absolute; width:800px; } #navbar li { float:left; } #navbar ul a { background:url(../images/nav.gif) no-repeat top left; height:30px; overflow:hidden; position:absolute; text-indent:-9999px; width:800px; } #navbar #welcome a { width:85px; left:0; background-position:0 0; } #navbar #about a { width:165px; left:85px; background-position:-85px 0; } #navbar #paintings a { width:113px; left:250px; background-position:-250px 0; } #navbar #blog a { width:79px; left:363px; background-position:-363px 0; } #navbar #life a { width:166px; left:442px; background-position:-442px 0; } #navbar #contact a { width:112px; left:608px; background-position:-608px 0; } #navbar #links a { width:80px; left:720px; background-position:-720px 0; } #navbar #welcome a:hover { background-position:0 -60px; } #navbar #about a:hover { background-position:-85px -60px; } #navbar #paintings a:hover { background-position:-250px -60px; } #navbar #blog a:hover { background-position:-363px -60px; } #navbar #life a:hover { background-position:-442px -60px; } #navbar #contact a:hover { background-position:-608px -60px; } #navbar #links a:hover { background-position:-720px -60px; } #welcome_body #navbar #welcome a { background-position:0 -60px; } #about_body #navbar #about a { background-position:-85px -60px; } .paintings #navbar #paintings a { background-position:-250px -60px; } .blog #navbar #blog a { background-position:-363px -60px; } #life_body #navbar #life a { background-position:-442px -60px; } #contact_body #navbar #contact a { background-position:-608px -60px; } #links_body #navbar #links a { background-position:-720px -60px; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Header Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #ajax_flash { color:green; position:absolute; top:0; left:0; height:100%; width:100%; background-color:#111; z-index:100; } #admin_welcome { position:absolute; top:3px; left:9px; font-size:1.3em; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Sections - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ .section a:hover { color:#39F; } .section { margin:0 0 15px 0; background:#1D2128 url(../images/section_top.gif) no-repeat; float:left; clear:both; width:800px; } .section .wrapper { padding:10px; width:780px; background:url(../images/section_bottom.gif) no-repeat bottom left; float:left; clear:left; } .nugget { background:#121519 url(../images/section_nugget_top.gif) no-repeat; } .nugget .wrapper { padding:5px 10px; width:780px; background-image:url(../images/section_nugget_bottom.gif); } .dotted_silver_line { height:1px; padding:0 0 5px 0; border-top:1px dotted silver; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Welcome - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #welcome_body #content p { font-size:2em; padding:20px; line-height:2em; } #welcome_body #content p:first-letter { font-size:2.6em; } #welcome_logo { margin:1px 40px 23px 40px; padding: 0; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - About - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #about_body #content p { font-size:1.7em; line-height:1.7em; } #about_body #content p:first-letter { font-size:2.3em; } #about_top_third .left_image { float:left; margin:55px 0 0 0; } #about_top_third .right_text { margin:10px 0 0 150px; } #about_middle_third .right_image { float:right; margin:110px 0 0 0; } #about_middle_third .left_text { width:390px; margin:10px 0 0 0; } #about_bottom_third .left_image { float:left; margin:0; } #about_bottom_third .right_text { margin:10px 0 0 200px; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Life - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #life_body #content p { font-size:1.7em; line-height:1.7em; } #life_body #content p:first-letter { font-size:2.3em; } #life_body .life_photo { float:left; clear:none; width:107px; margin:20px 0 20px 1px; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Contact - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #contact_body .flash { color:white; text-align:center; } #contact_body #content p { font-size:1.7em; line-height:1.7em; padding:5px; } #contact_body #content p:first-letter { font-size:2.3em; } #contact_body form { width:400px; margin:0 auto; padding:30px 0; overflow:hidden; } #contact_body fieldset { font-size:2em; border:none; margin-top:10px; padding:5px; } #contact_body legend:first-letter { font-size:2.3em; } #contact_body input { padding:2px; } #contact_body #user_email, #contact_body #user_email_confirmation { width:400px; margin:0 auto; overflow:hidden; } #simple_captcha { margin:0 auto; padding: 5px !important;text-align:center;} #simple_captcha, #simple_captcha div { display: table; } #simple_captcha .simple_captcha_field, #simple_captcha .simple_captcha_image { margin: 0px auto 2px !important; padding: 0px !important; } #simple_captcha .simple_captcha_image img { margin: 0px !important; padding: 0px !important; width: 110px !important; } #simple_captcha .simple_captcha_label { font-size: 12px; } #simple_captcha .simple_captcha_field input { width: 150px !important; font-size:16px; border:none; background-color:#efefef; } #contact_submit { text-align:center; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Unsubscribe - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #unsubscribe_body p.flash { font-size:2.5em; color:white; text-align:center; } #unsubscribe_body #content p { padding:5px; text-align:center; } #unsubscribe_body p.text { font-size:2em; } #unsubscribe_body p.text:first-letter { font-size:2.3em; } #unsubscribe_body form { width:400px; margin:0 auto; padding:30px 0; overflow:hidden; } #unsubscribe_body fieldset { font-size:2em; border:none; margin-top:10px; padding:5px; } #unsubscribe_body legend:first-letter { font-size:2.3em; } #unsubscribe_body input { padding:2px; } #unsubscribe_body #user_email { width:400px; margin:0 auto; overflow:hidden; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Links - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #links_body #content p { font-size:1.7em; line-height:1.7em; padding:5px; } #links_body #content p:first-letter { font-size:2.3em; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Paintings - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #painting { overflow:hidden; } #p_genre_nav { text-align:center; font-size:1.4em; padding:0; margin:0; text-transform:uppercase; } #paintings_nav .pagination { margin:3px 0; } div.painting_holder { height:365px; width:150px; float:left; margin:2px; padding-top:5px; } .painting a:hover.noborder { border:0; } .painting li.title a:hover { border-bottom:1px dotted silver; color:#693; } .painting ul { margin:-27px 0 0 0; padding:0; text-align:center; } .painting li { background:none; margin:0; padding:0; font-size:1em; line-height:1em; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Blog - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #blog_body { margin:0 0 50px 0; } #blog_header { font-size:2em; } #blog_header h1 { padding:10px; color:#ccc; } #blog_header p { padding:10px; } #blog_header_nav { border:1px solid silver; } #blog_header_nav ul { margin:0; padding:0; display:inline-block; float:left; } #blog_header_nav li:first-letter { font-size:1.5em; margin:0; padding:0; } #blog_header_nav li { font-size:1.3em; margin:0 7px; padding:0 0 0 13px; display:block; float:left; } #blog_header_nav h3 a { text-align:right; margin:0 0 0 0; padding:0; display:inline; float:right; border-bottom:1px solid silver; } .blog_nav.top .pagination { margin:17px 0 7px 0; } .blog_nav.bottom .pagination { margin:7px 0 17px 0; } .blog_post_painting { width:330px; float:left; clear:left; margin:15px 0 0 10px; padding-right:10px; } .blog_post_painting h3 { margin:-25px 0 0 0; padding:0; text-align:center; font-size:2.5em; text-transform:none; } .painting_info { margin:0px 0 0 0; padding:0; } .painting_info li { background:none; margin:0; padding:0; font-size:1.2em; text-align:center; } .blog_post_text { margin:0; } .blog_post_text h3 { margin:0 0 0 10px; font-size:2em; } .blog_post_text p { padding:5px; font-size:1.6em; } .blog_post_footer { margin:0; text-align:right; } .comment_footer p { text-align:right; font-size:0.8em; color:#555; } div.blog_comments { padding-top:10px; } .add_comment_link { text-align:right; padding: 5px; } .blog_comments h4 { margin:0; } .blog_comments h4 { margin:0; } .blog_comment { border-right:3px solid gray; margin:0 0 17px 0;} .blog_comment p { padding:0 20px; font-size:1.2em;} .comment_footer p { font-size:1.1em; } div.cform { text-align:right; } div.cform h5 { margin:10px 1px; } .cform input { font-size:1.4em; } #body_blog fieldset { margin:0 0 10px 0; overflow:hidden; } #comment_body { font-size:2em; width:769px; height:60px; margin-top:5px; } #comment_from { font-size:1.2em; margin:0; } .entire_post { clear:both; padding-top:20px; position:relative; bottom:0; width:780px; text-align:left; } p.date { text-align:right; font-size:1em; color:white; text-transform:uppercase; margin:0 0 3px; padding:0; } p.gray { color:gray; } .blog_show_painting { width:640px; padding:0; margin:0 70px; } .blog_show_painting h3 { margin:-35px 0 0; } .blog_show_text { padding:0; margin:20px 0; } .blog_show_text p { padding:0; margin:10px 0; font-size:1.8em; } #blog_show_body p.date { padding:0 0 5px 0; } #blog_edit_body .blog_post_painting { width:150px; float:left; clear:left; padding:0;} #blog_edit_body .blog_post_painting img { margin:0 45px; } #blog_edit_body .blog_post_painting canvas { margin:0 45px; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Admin - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #users_login { font-size:2em; text-align:center; padding:10px; } #users_login legend h2 { padding:5px 0 0 0; } #users_login input { width:220px; padding:2px; } #users_login h1, #users_login fieldset, #users_login form { padding:0 10px; } #users_login h2.flash { margin-top:50px; } input#login_button { margin-top:30px; } #admin_header h4 { margin-bottom:5px; font-size:1.7em; } #admin_header li { font-size:1.7em; float:left; } li#logout { float:right; } #admin_content h2 { padding: 0 10px; line-height:2em; display:inline; } #admin_fixme a { line-height:1.8em; font-size:1.8em; } #admin_fixme ul { } #stats_menu a { line-height:1.8em; font-size:1.8em; } #stats_menu ul { width:770px; margin:0; } #users_list { margin:2px; } #users_list h3 { float:right; padding:2px 5px; } #users_list ul { width:763px; margin:1px; padding:4px; clear:both; font-size:1.5em; } ul#list_header { width:763px; height:20px; padding-top:10px; margin-bottom:-1px; } li.icons { width:30px; margin:0; padding:0 5px; float:left; } li.user_name { width:220px; margin:0 2px; float:left; } li.user_email { width:260px; margin:0 2px; float:left; } li.user_list { width:140px; margin:0 2px; float:left; } #dynamic_content fieldset { float:left; margin:0 1px; } #dynamic_content legend { padding:5px; font-size:1.6em; font-variant:small-caps; } #dynamic_content input { font-size:2em; margin:0; padding:3px; } .new_user_input_row { width:650px; height:60px; margin:0 65px; clear:both; } #new_user_add_button { margin-top:15px; } div#admin_fixme ul { padding:0; margin:0; } div#admin_fixme li { padding:3px; margin:0; } #todo_list_container h2 { display:inline; margin:0; padding:0; } #todo_list_container h3 { float:right; padding-right:20px; margin-top:5px; } #input fieldset,form { padding:0; margin:0; } #input h4 { float:right; margin-top:5px; } #todo_list_type { display:inline; } #todo_list_arrow { display:inline; position:relative; bottom:1px; } #todo_list { border-right:none; border-bottom:1px dotted silver; border-left:none; border-top:1px dotted silver; } #todo_list li a { font-size:1.7em; line-height:1.8em; padding-right:5px; } .drag_image { } #todo_description { font-size:2em; width:775px; margin:10px 0; padding:0; } #painting fieldset { display:inline; padding:0 0 10px 0; margin:10px 0; } #photo_upload_container fieldset { margin:30px 0 0 0; } #photo_upload_container legend { text-transform:uppercase; font-size:1.5em; padding:0; margin:0; } #painting legend { text-transform:uppercase; font-size:1.5em; padding:0; margin:0; } #painting input,textarea, select { font-size:2em; padding:2px; } #photo_upload_container input,textarea { font-size:2em; padding:2px; } #painting_title { width:420px; padding-right:20px; } input#painting_title { width:400px; } #painting_length,#painting_width, #painting_shipping { width:57px; } #painting_price { width:87px; } #painting_width { margin-right:30px; } #post_body { width:777px; height:45px; margin:0; } #photo_uploaded_data { overflow:visible; color:silver; } fieldset.ph_upload { width:520px; } #painting input.block { display:block; } select#category_ids { height:260px; float:left; clear:left; font-size:1.2em; padding:5px 10px; } #pa_medium, #pa_canvas, #pa_location { float:right; clear:both; } #pa_medium legend, #pa_canvas legend, #pa_location legend { text-align:right;} #painting .right input { float:right; clear:both; margin-top:50px;} #painting a, #dynamic_content a { font-size:1.4em; } #painting a:hover, #dynamic_content a:hover { border-bottom: 1px dotted silver; } #category_input input { margin:10px 5px; } #photo_holder p { color:red; font-size:1.2em; } #photo_holder input { display:block; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Errors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ .fieldWithErrors { padding:3px; background-color:red; } #errorExplanation { width:640px; border:3px solid red; padding:7px; padding-bottom:12px; margin:20px auto; background-color:#f0f0f0; } #errorExplanation h2 { text-align:left; font-weight:bold; padding:5px 5px 5px 15px; font-size:1.2em; margin:-7px -7px 5px; background-color:#c00; color:#fff; } #errorExplanation p { color:#333; margin-bottom:0; padding:15px; font-size:2.2em; } #errorExplanation ul li { color:#111; font-size:2em; list-style:none; background:none; } #ajax_busy { position:absolute; top:0; right:0; color:#eee; padding:5px; } div.uploadStatus { margin:5px; } div.progressBar { margin:5px; } div.progressBar div.border { background-color:#fff; border:1px solid gray; width:100%; } div.progressBar div.background { background-color:#333; height:18px; width:0%; } /*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Lightbox - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ #lightbox { position:absolute; top:40px; left:0; width:100%; z-index:100; text-align:center; line-height:0; } #lightbox a img { border:0; } #lightbox a:link,#lightbox a:visited { padding:0; color:#326ea1; text-decoration:none; border:0; } #lightbox a:hover { padding-bottom:0; color:#383d44; border:0; } #outerImageContainer { position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto; } #imageContainer { padding:10px; } #loading { position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0; } #hoverNav { position:absolute; top:0; left:0; height:100%; width:100%; z-index:10; } #imageContainer>#hoverNav { left: 0; } #hoverNav a { outline:none; } #prevLink, #nextLink { width:49%; height:100%; background:transparent url(../images/lb2_images/blank.gif) no-repeat; /* Trick IE into showing hover */ display:block; } #prevLink { left:0; float:left; } #nextLink { right:0; float:right; } #prevLink:hover, #prevLink:visited:hover{ background:url(../images/lb2_images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover{ background:url(../images/lb2_images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer { font:1em Verdana, Helvetica, sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em; } #imageData { padding:0 10px; } #imageData #imageDetails { width:70%; float:left; text-align:left; } #imageData #caption { font-weight: bold; } #imageData #numberDisplay { display:block; clear:left; padding-bottom:1.0em; } #imageData #bottomNavClose { width:66px; float:right; padding-bottom:0.7em; } #overlay { position:absolute; top:0; left:0; z-index:90; width:100%; height:500px; background-color:#000; opacity:0.9; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } * html>body .clearfix { display:inline-block; width:100%; } * html .clearfix { /* Hides from IE-mac \*/ height:1%; /* End hide from IE-mac */ } }