/* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; min-width:775px; background: #000 url(../images/backgrounds/bg-bar2.jpg) repeat-x; text-align:left; } ul { list-style:none } li {font-size:1em; padding-bottom:6px; color:#333;} ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:"Verdana", Arial, Helvetica, sans-serif; line-height:1.4em; color:#000; } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#fff; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#000; margin:30px 0 12px 0 } h3 { font-size:1.3em; color:#000; margin:0 0 12px 0 } h4 { font-size:1.3em; color:#000; margin:30px 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:1.1em; color:#000; margin:0 0 12px 0; line-height:160% } p.tiny-text { font-size:1.1em; color:#666; margin:0 0 12px 0; line-height:160% } a { color:#000000; text-decoration:none;} a:hover { color:#999999; text-decoration:underline;} ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000; font-style:normal; margin-bottom:20px } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc } fieldset { border:1px solid #ccc; } legend {} label { font-size:1.1em; color:#fff } textarea, input[type='text'], select { border:1px solid #393333; background:#232221; font-size:11px; color:#000; } img { border:none } /* Fix div clearing */ .clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0} .clearfix {display: inline-block} html[xmlns] .clearfix {display: block} * html .clearfix {height: 1%} /* Common classes */ .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none } .red-font { color:#900;} .pad-bottom { padding-top:20px;} .pad-top { padding-top:40px;} /* Background */ #wrapper { background:url(../images/backgrounds/bg.jpg) no-repeat #000000; width:1215px; margin:0 auto;} /* Header */ #header { height:300px; position:relative; width:1100px; margin:0 auto; } #header h1 { padding:20px 0 0 0px; } #header h1 a { background:url(../images/site_images/Logo.png) no-repeat; width:450px; height:190px; text-indent:-9999px; display:block; margin-top:20px; } /* Main Navgation */ #navigation { height:30px; list-style:none; display:inline; padding:20px 60px 20px 0; display:block; margin:0px 0 0 0px; /* position absolute so that z-index can be defined */ position:relative; /* should be higher than #box */ z-index:100; } #navigation li {float:right; padding:0px 30px 0 0; margin-right:0px } #navigation li a {height:30px; font:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bolder; font-size:14px } #navigation li a:hover { color:#C00;} #navigation li a.current { color:#C00;} /* Nav annimation */ #lava { position:relative; width:100%;} #lava #box { /* position absolute so that z-index can be defined and able to move this item using javascript */ position:absolute; left:0; top:10px; padding-left:10px; /* should be lower than the list menu */ z-index:50; /* image of the right rounded corner */ background:url(../images/site_images/tail.gif) no-repeat right top; height:42px; /* add padding 8px so that the tail would appear */ padding-right:40px; /* self-adjust negative margin to make sure the box display in the center of the item */ margin-left:-28px; } #lava #box .head { /* image of the left rounded corner */ background:url(../images/site_images/head.gif) no-repeat 0 0; height:42px; /* self-adjust left padding to make sure the box display in the center of the item */ padding-left:10px; } #bottom-container-flower { padding:30px 120px 0 0; height: 100px; } #gallery-btn { list-style:none; padding:0; margin:30px 0 0 0; height:82px; margin-left:120px; } #gallery-btn li { float:left; width:131px; height:82px; position:relative; overflow:hidden; } #gallery-btn li.gallery-btn a { position:absolute; top:9px; text-indent:-999em; background:url(../images/buttons/gallery.jpg) no-repeat 0 0px; display:block; width:131px; height:82px; } #gallery-btn li.awards-btn a { position:absolute; top:9px; text-indent:-999em; background:url(../images/buttons/awards.jpg) no-repeat 0 0px; display:block; width:131px; height:82px; } #gallery-btn li.shinys-btn a { position:absolute; top:9px; text-indent:-999em; background:url(../images/buttons/shinys.jpg) no-repeat 0 0px; display:block; width:131px; height:82px; } #gallery-btn li.ishare-btn a { position:absolute; top:9px; text-indent:-999em; background:url(../images/buttons/ishare.jpg) no-repeat 0 0px; display:block; width:131px; height:82px; } /* Container */ #container { background:#FFFFFF url(../images/backgrounds/container-bar.jpg) repeat-x; width:1000px; margin:0 auto; min-height: 500px; background-repeat: repeat-y; position:relative; padding-top:30px; } #container-bottom { width:1000px; height:195px; background:url(../images/backgrounds/container-bottom.jpg); position:absolute; bottom:0; z-index:4;} #primary-content { width:375px; float:left; padding:30px 30px 20px 45px; margin:0 0 40px 40px; background:url(../images/design/small-box.jpg) no-repeat; z-index:5; position:relative;} #primary-content2 { width:820px; float:left; padding:30px 0px 30px 0px; margin:0 0 40px 0px; z-index:5; position:relative;} #primary-content3 { width:400px; float:left; padding:40px 0px 30px 0px; margin:0 0 40px 0px; z-index:5; position:relative;} iframe { float:left; padding-top:30px;} #gallery-container { width:800px; height:720px; float:left; padding:20px 0px 30px 0px; margin:0 0 40px 100px; z-index:5; position:relative;} .print-paypal{ width: 300px; float: right; margin: 0px 0 30px 30px; padding: 20px; background: #e5e5e5; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius: 10px; } .print-paypal table, .print-paypal table tr, .print-paypal table td { border-style: none; } .print-paypal table td input, .print-paypal table td select { background: white; font: black; margin: 5px 0 20px 0; padding: 10px; border: 5px solid white; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); background: rgba(255,255,255,0.5); } .print-paypal table td select { background: white; width: 258px; padding: 5px; font-size: 14px; line-height: 1; border: 0; border-radius: 0; height: 34px; } .print-paypal-box { border: 5px solid white; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1); padding: 15px; background: rgba(255,255,255,0.5); margin: 0 0 20px 50px; } #shiny-shiny-container{ padding: 0px 0 0px 50px; } #shiny-addin-box{ margin: 0px 0 0px -30px; height: 400px; width: auto; } .shiny-images { margin: 0px 0 0px 0px; background-color: #d6d6d6; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px; } #videotutorials{ width:100%; float:left; text-align:left; } #videotutorials h3 { margin: 0 0 -20px 0; padding-top: 20px;} .iframevideos, iframe.centervid { margin: 0 auto; display: block; width: 720px; padding-left: 15px;padding-bottom: 40px;} #secondary-content { width:480px; height:200px; float:right; padding:0px 0; margin:0px 0px 0 0; position:relative; z-index:6; } #note_box { width:350px; padding:0px 0; margin:0px 0px 0 0; position:relative; z-index:6; } #note_box2 { width:650px; padding:50px 0 50px 0; margin:0px 0px 0 0; position:relative; z-index:6; } #ipad-box { width:274px; padding:0px 0; margin:-7px 45px 0 0; position:relative; float:right; z-index:6; } #ipad-box p { padding:0 0px 0 45px; margin:-26px 0px 0 0; z-index:7; font-weight:bold; } #wide-content { width:860px; padding:0px 0px 0px 20px; margin:10px 0px 0px 60px; z-index:5; position:relative;} } #wide-content p { margin:0 40px 0 0;} #float-right { width:400px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; z-index:5; position:absolute; top:240px; left:460px;} } .earth { margin:20px 0px; padding:0px 0px; } /* Titles */ #title-dare { margin-left:30px; width:310px; height:51px; background:url(../images/design/titles/dare_to_be_different.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-about { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/stuff_about_me.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-influencing-factors { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/influencing_factors.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-got-a-question { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/got_a_question.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-contact-kt-allen { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/contact_me.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-gallery { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/gallery.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-copyright { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/copyright2.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-composite_images { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/composite_images.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; } #title-making_the_composite { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/making_the_composite.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:60px;} #title-toxic_fish { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/toxic_fish.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-the_raw_photographs { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/the_raw_photographs.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:60px;} #title-awards { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/awards.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:0px;} #title-awards_2012 { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/awards_2012.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:0px;} #title-city_angel { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/city_angel.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-mutiny { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/mutiny.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-ishare { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/ishare.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-awards_2013 { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/awards_2013.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-awards_2014 { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/awards_2014.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-shiny { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/shiny_shinys.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-guest-speaking { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/guest_speaking.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-dvds-for-sale { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/dvds_for_sale.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-prints-for-sale { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/prints_for_sale.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:10px;} #title-blue-badge { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/blue_badge.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:20px;} #title-individual-image-awards { margin-left:-20px; width:310px; height:51px; background:url(../images/design/titles/individual_image_awards.jpg) no-repeat top left; text-indent:-3000px; margin-bottom:10px; margin-top:80px;} #contact-logos { width:400px; height:78px; list-style:none; display:inline;} #contact-logos li {float:left; padding:0px; margin-right:0px } #contact-logos li a {height:78px; } #contact-logos li a:hover {background-position:50% -78px;} #contact-blog-btn { width:112px; text-indent:-3000px;} #contact-blog-btn a {width:112px; height:78px; background:url(../images/site_images/logo-blog.jpg) top left no-repeat; display:block} /* Composite thumb list */ ul#composite-images { height:120px; list-style:none; display:inline; padding:0px 0px 0 0px; display:block;} ul#composite-images li { float:left; margin:0; padding:0px 6px 0px 0px; height:120px; width:auto; } ul#composite-images li a img{ border:#CCC solid 3px; } ul#composite-images li a:hover img { border:#F00 solid 3px;} /* Fancy bullet list */ ul.simple-list { list-style:square; display:inline; padding:5px 0px 0 40px; display:block;} ul#composite-images li { float:left; margin:0; padding:0px 6px 0px 0px; height:120px; width:auto; } ul#composite-images li a img{ border:#CCC solid 3px; } ul#composite-images li a:hover img { border:#F00 solid 3px;} /* Footer */ #footer { height:140px; width:577px; background:url(../images/backgrounds/footer.jpg) no-repeat top; color:#999; padding:20px 450px 50px 190px; position:relative; } #footer p { color:#999; font-size:10px;} #footer p.copy { width:205px; height:24px; background:url(../images/design/titles/copyright.jpg) no-repeat top left; text-indent:-3000px; float:left; margin-top:40px; } #footer a {color:#999; font-size:10px} #footer a:hover {color: #00c2d3} /* Footer Logos */ #footer ul#footer-logos { height:49px; list-style:none; display:inline; padding:0px 0px 0 0px; display:block;} #footer ul#footer-logos li { float:right; margin:0; padding:3px; height:143px; text-indent:-3000px;} #footer ul#footer-logos li a.ephotozine { height:34px; width:117px; background:url(../images/buttons/ephotozine.png) no-repeat; display:block;} #footer ul#footer-logos li a.twitter { height:34px; width:117px; background:url(../images/buttons/twitter.jpg) no-repeat; display:block;} #footer ul#footer-logos li a.facebook { height:34px; width:117px; background:url(../images/buttons/facebook.jpg) no-repeat; display:block;} #footer ul#footer-logos li a.blog { height:39px; width:38px; background:url(../images/buttons/kt-allen-photography-blog.png) no-repeat; display:block;} #footer ul#footer-logos li a:hover {background-position:0px -39px; color:#FFFFFF;} /* Footer Nav */ ul#navlist-footer { width:300px; font-size:1.0em; position:absolute; top:20px; padding-left:5px; } ul#navlist-footer li { list-style-type: none; margin:0px 10px 0 0; display:inline;} ul#navlist-footer li a { color:#666;} ul#navlist-footer li a:hover { color:#900;} ul#navlist-footer2 { width:300px; font-size:1.0em; position:absolute; top:40px; padding-left:5px; } ul#navlist-footer2 li { list-style-type: none; margin:0px 10px 0 0; display:inline;} ul#navlist-footer2 li a { color:#666;} ul#navlist-footer2 li a:hover { color:#900;} .blue_text { color: #0080FF; }