/* BASIC ELEMENTS ------------------------------------------------------------------------------------- */ * { margin:0; padding:0; } html { min-height:100%; margin-bottom:1px; } body { background: #42596c; font-family: tahoma, Arial, verdana,arial,sans-serif; font-size: 12px; color: #333; text-align: center; } table, td, th, form, input, textarea { font-family: verdana, sans-serif; font-size: 12px; color: #333; text-align: left;} a img, :link img, :visited img { border:none; } a:link { color:#e51b24; text-decoration:underline; } a:visited { color:#e51b24; text-decoration:underline; } a:hover, a:active { color:#e51b24; text-decoration:none; } abbr { border-bottom:1px dotted #ccc; cursor:help; } blockquote { width: 350px; margin-top: 20px; padding: 20px; background: #f0f8fb; border: 1px solid #e0f4fb; font-size: 11px; } blockquote span { text-align: right; font-size: 9px; font-style: italic; } h1 { width: 285px; font-size: 14px; color: #22596f; text-align: left; } h2 { width: 285px; margin-top: 20px; font-size: 12px; color: #22596f; text-align: left; } h3 { font-size: 12px; color: #22596f; text-align: left; } h4 { font-size: 11px; color: #22596f; text-align: left; } h5 { font-size: 10px; color: #22596f; text-align: left; } hr { height: 1px; margin: 5px 0 10px 0; border-bottom: 1px dashed #cccccc; } #skip { display: none; } #container { position: relative; width: 980px; margin: 0 auto; padding: 20px 0 0; text-align: left; } #main { position: absolute; width: 980px; background: #fff url(../../assets/images/main-veggies.jpg) no-repeat right top; vertical-align: top; } #b_photos #main { background: #fff url(../../assets/images/main-drops.jpg) no-repeat right top; vertical-align: top; } #b_about #main { background: #fff url(../../assets/images/main-arroyo.jpg) no-repeat right top; vertical-align: top; } #b_poetry #main { background: #fff url(../../assets/images/main-cactus.jpg) no-repeat right top; vertical-align: top; } #b_resume #main { background: #fff url(../../assets/images/main-sunset.jpg) no-repeat right top; vertical-align: top; } #b_act #main { background: #fff url(../../assets/images/main-pine.jpg) no-repeat right top; vertical-align: top; } #b_fuzzies #main { background: #fff url(../../assets/images/main_fuzzies.jpg) no-repeat right top; vertical-align: top; } #b_kfuzzies #main { background: #fff url(../../assets/images/main_fuzzies.jpg) no-repeat right top; vertical-align: top; } #b_fosters #main { background: #fff url(../../assets/images/main-root.jpg) no-repeat right top; vertical-align: top; } #b_art #main { background: #fff url(../../assets/images/main-rose.jpg) no-repeat right top; vertical-align: top; } #b_store #main { background: #fff url(../../assets/images/main_store.jpg) no-repeat right top; vertical-align: top; } #b_resume #main { background: #fff url(../../assets/images/main_resume.jpg) no-repeat right top; vertical-align: top; } #header { width: 980px; height: 41px; } #header img { float: left; } #search { height: 25px; width: 290px; margin: 5px; float: right; } #search .input { height: 19px; width: 150px; margin: 0 0 0 10px; border: 1px solid #ccc; opacity:.85; filter:alpha(opacity=85); float: right; } #search .submit { height: 21px; width: 90px; border: 1px solid #ccc; background: #efefef; color: #479FC5; font-weight: bold; text-align: center; opacity:.85; filter:alpha(opacity=85); float: right; } #content { height: auto; width: 850px; margin: 0 100px 20px 30px; } #content p { width: 700px; padding: 6px; } #content .first { width: 350px; } #content ul { width: 500px; margin: 0 0 10px 20px; } #breadcrumbs { width: 320px; margin: 0 0 20px 0; padding: 7px 0; border-bottom: 1px dashed #efefef; font-size: 9px; color: #ccc; text-align: left; } #footer { clear: both; width: 800px; } #copyright { font-size: 9px; color: #666; float: right; text-align: right; } /* PAGE SPECIFIC STYLES */ #home #main { background: #fff url(../../assets/images/h-main-flowers.jpg) right no-repeat; } #home p { width: 550px; } #home #nav2, #home #breadcrumbs { display: none; } #home #content { width: 550px; } #home blockquote { width: 550px; margin-top: 0px; padding: 20px; background: #efefef; border: 1px solid #BADDEA; } #home #footer { clear: both; } #h_store { float: left; width: 200px; height: 300px; margin: 30px 0 0 0;} #h_store h1 { width: 180px; margin: 10px 0; padding: 2px; font-size: 11px; } #h_store p { width: 180px; font-size: 10px; } #h_activities { float: left; width: 300px; margin: 30px 0 0 0; border: 1px solid #ccc; } #h_activities h1 { width: 280px; margin: 10px 0; padding: 2px; font-size: 12px; } #h_activities p { width: 280px; font-size: 12px; } .photos { height: 97px; width: 198px; margin: 0 10px 10px 0; float: left; background: #f6f6f6; } #s_photos { margin-top: 0px; } #s_photos p { height: 80px; width: 160px; float: left; } #h_photos, #s_photos { font-size: 12px; float: left; } #h_photos h1, #s_photos h1 { width: 160px; margin: 10px 0; padding: 2px; border-top: 1px solid #ccc; font-size: 12px; } #b_photos #s_photos p { height: 110px; width: 160px; font-size: 10px; } #h_photos p { height: 70px; width: 160px; font-size: 10px; } #h_photos img, #s_photos img { margin-top: 7px; } #activities, #fosters { float: left; width: 550px; } #activities h2 { width: 550px; margin: 10px 0; padding: 2px; border-top: 1px solid #ccc; } #fosters p { width: 490px; } .rsvp { margin-top: 0; text-align: right; } /* NAVIGATION ------------------------------------------------------------------------------------- */ #nav { float: right; width: 351px; height: 41px; } #nav li { float:left; position:relative; height:41px; list-style:none; } #nav li a { cursor:pointer; } #nav li a, #nav li div { position:relative; display:block; height:41px; text-decoration:none; color:#fff; font-size:12px; } #nav li strong { position:absolute; top:0px; left:0px; display:block; height:41px; } #nav li, #nav li a, #nav li strong, #nav li div { background-image:url(../../assets/images/nav.gif); } #nav li.one, #nav li.one a, #nav li.one a strong { background-position:0px 0px; width:82px; } #nav li.two, #nav li.two a, #nav li.two a strong { background-position:-82px 0px; width:86px; } #nav li.three, #nav li.three a, #nav li.three a strong { background-position:-168px 0px; width:97px; } #nav li.four, #nav li.four a, #nav li.four a strong { background-position:-265px 0px; width:86px; } /* HOVER STATE */ #nav li.one:hover a, #nav li.one:hover a strong, #nav li.one a:hover, #nav li.one a:hover strong { background-position:0px -41px; width:82px; } #nav li.two:hover a, #nav li.two:hover a strong, #nav li.two a:hover, #nav li.two a:hover strong { background-position:-82px -41px; width:86px; } #nav li.three:hover a, #nav li.three:hover a strong, #nav li.three a:hover, #nav li.three a:hover strong { background-position:-168px -41px; width:97px; } #nav li.four:hover a, #nav li.four:hover a strong, #nav li.four a:hover, #nav li.four a:hover strong { background-position:-265px -41px; width:86px; } /* ON STATE */ #nav li.oneon, #nav li.oneon strong, #nav li.oneon div { background-position:0px -41px; width:82px; } #nav li.twoon, #nav li.twoon strong, #nav li.twoon div { background-position:-82px -41px; width:86px; } #nav li.threeon, #nav li.threeon strong, #nav li.threeon div { background-position:-168px -41px; width:97px; } #nav li.fouron, #nav li.fouron strong, #nav li.fouron div { background-position:-265px -41px; width:86px; } /* IF NO DROP DOWNS ARE USED IN THE NAVIGATION YOU CAN REMOVE THE FOLLOWING STYLES DOWN TO THE LINE OF STARS */ /* DROP DOWNS */ /* POSITIONS LAST LIST(S) IN THE NAV */ #nav li.four:hover ul, #nav li.four a:hover ul { left:-2px; } #nav li.four:hover li:hover ul, #nav li.four a:hover li a:hover ul { visibility:visible; position:absolute; left:-140px; top:0; } #nav li table { margin:0 -1px -1px; border-collapse:collapse; } #nav li td { font-size:10px; } #nav li:hover, * html #nav a:hover { position:relative; } #nav li li a { font-size:10px; text-align:left; } /* FIRST LEVEL DROP DOWNS */ #nav li ul li a { background: #42596c; } #nav li ul { display:none; } #nav li:hover ul, #nav li a:hover ul { display:block; position:absolute; top:35px; left:0; width:120px; opacity:.85; filter:alpha(opacity=85); } #nav li:hover li, #nav li a:hover li { border-bottom: 1px solid #333; height: 25px; width:120px !important; background: #000; opacity:.85; filter:alpha(opacity=85); } #nav li:hover li.last, #nav li a:hover li.last { background:black; } #nav li:hover li a, #nav li a:hover li a { padding:3px; display:block; width:120px !important; height: 20px; color:#fff; /*background:navy !important;*/ } * html #nav li:hover li a, * html #nav li a:hover li a { width:120px !important; w\idth:104px; } #nav li:hover li a:hover, #nav li a:hover li a:hover { color:#000; background:#ccc !important; } /* MAKES THE HOVER 'STICK' IN FIREFOX */ /* CLASS 'drop' MUST BE ON THE 'href', NOT THE 'li' OR IT WILL NOT WORK */ #nav ul a.drop:hover, #nav ul :hover > a.drop{ color:#fff; background:black !important; } /**************************************************************************************************************/ #nav2 { clear: left; width: 230px; height: 110px; float: right; margin: 55px 0 20px 10px; padding: 10px; background: #000; filter:alpha(opacity=50); -moz-opacity:0.50; opacity: 0.50; } #nav2 h1 { width: 170px; margin-bottom: 10px; font-size: 14px; color: #fff; } #nav2 ul { width: 150px; color: #fff; list-style: none;} #nav2 ul li ul { width: 130px; height: 100px; } #nav2 li { min-height: 20px; } #nav2 a:link { color:#baddea; font-weight: bold; text-decoration:none; } #nav2 a:visited { color:#baddea; font-weight: bold; text-decoration:none; } #nav2 a:hover, a:active { color:#ffffcc; font-weight: bold; text-decoration:underline; } #nav2 li { color: #666; font-weight: bold; } #nav2 ul li ul { margin: 5px 0 0 20px; } #nav2 ul li ul li { height: 20px; color: #666; font-weight: normal; } #nav2 ul li ul li a:link, #nav2 ul li ul li a:visited, #nav2 ul li ul li a:hover, #nav2 ul li ul li a:active { font-weight: normal; } #b_resume #nav2 { height: 230px; } /* LINK ICONS ------------------------------------------------------------------------------------- */ .doc { padding:0 15px 0 0; background:url(../images/icn_word.gif) no-repeat 100% 4px; } .excel { padding:0 15px 0 0; background:url(../images/icn_excel.gif) no-repeat 100% 4px; } .pdf { padding:0 14px 0 0; background:url(../images/icn_pdf.gif) no-repeat 100% 4px; } .ppt { padding:0 15px 0 0; background:url(../images/icn_ppt.gif) no-repeat 100% 4px; } .qt { padding:0 15px 0 0; background:url(../images/icn_quicktime.gif) no-repeat 100% 4px; } /* MISC. CLASSES & IDS ------------------------------------------------------------------------------------- */ div.fuzzies { clear: both; width: 530px; padding: 10px; margin-bottom: 10px; background: #f6f6f6; } .fuzzies img { float: left; margin-right: 20px; padding: 5px; border: 1px solid #cccccc; clear: right; } .fuzzies h5 { color: #554646; font-size: 10px; margin-bottom: 10px;} .fuzzies p { margin-left: 220px; } .fuzzies b { color: #5f3a38; } #b_resume p.first { margin: 40px 0; } #b_resume p, #b_resume li { line-height: 1.5;} #b_resume h2 { width: 700px; margin: 5px 0 10px; border-bottom: 1px solid #22596f; } #b_resume #resume li { width: 650px; margin: 7px 0; } #b_act .top { padding: 10px 0; border-top: 1px dashed #ccc; } #b_act .top h2 { margin-top: 0 } p.caption { text-align: right; } .show { display:block; } .hide { display:none; } .clear { clear:both; } br.clear { line-height:0px; height:0; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } /* PLEASE LEAVE BOTH THESE LINES, FIX FOR IE7 */ .clearfix { display:inline-block; } .clearfix { /*\*/display:block;/**/ } /* ADD THIS CLASS TO AN ELEMENT TO FIX THE IE ITALICS BUG, MUST BE THE INNER-MOST BLOCK-LEVEL ELEMENT THAT CONTAINS THE TEXT LIKE p, blockquote OR li MAY REQUIRE A MORE DIRECT PATH TO THE ELEMENT */ * html .italicsfix { /*\*/overflow:hidden; o\verflow:visible; width:100%; w\idth:auto; he\ight:1%;/**/ } .floatleft { float:left; } .floatright { float:right; } img.floatleft { margin:0 10px 5px 0; position:relative; } img.floatright { margin:0 0 5px 10px; position:relative; } .alignleft { text-align:left; } .alignright { text-align:right; } .aligncenter { text-align:center; } .aligntop { vertical-align:top; } .alignbottom { vertical-align:bottom; } /*lightbox styles*/ #lightbox { position: absolute; top: 20px; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; color:#151410; } #lightbox a, #lightbox a:hover { border-bottom:none; color:#151410; text-decoration:underline; } #lightbox a img { border: none; } #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; } #loadingLink { display:block; margin:0 auto; padding:0; width:32px; height:32px; background:url(../images/loading.gif) center center no-repeat; text-indent:-9999px; } #hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav { left: 0;} #hoverNav a { outline: none;} #prevLinkImg, #nextLinkImg { width: 49%; height: 100%; background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; text-indent:-9999px; } #prevLinkImg { left: 0; float: left;} #nextLinkImg { right: 0; float: right;} #prevLinkImg:hover, #prevLinkImg:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLinkImg:hover, #nextLinkImg:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; } #imageData { padding:0 10px; } #imageDetails { width: 70%; float: left; text-align: left; } #caption { font-weight: bold; } #numberDisplay { display: block; clear: left; } #detailsNav { display: block; clear: left; padding:0 0 10px 0; } #prevLinkDetails { margin:0 8px 0 0; } #nextLinkDetails { margin:0 8px 0 0; } #closeLink { display:block; margin:0; padding:0 0 10px 0; text-decoration:none; float:right; width:66px; height:28px; background:url(../images/closelabel.gif) no-repeat; text-indent:-9999px; overflow:hidden; } #overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #151410; filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } .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 */} /* PORTFOLIO SECTION */ /* email images */ .email { float: left; width: 250px; padding: 15px; border-top: 1px solid #ccc; } #monthly, #eoy, #nl, #vday { position: absolute; top: 40px; left: 10px; background: #fff; padding: 30px; border: 10px solid #ccc; } #monthly img, #eoy img, #nl img, #vday img, { position: absolute; top: 0px; left: 0px; float: left; } #monthly .x, #eoy .x, #nl .x, #vday .x, { position: absolute; top: 10px; left: 100px; margin: 3px; padding: 2px 5px 4px; border: 1px solid #ccc; background: #efefef; color: #000; font-family: arial; font-size: 14px;} /* social images */ #social img { margin: 30px 50px 0 0; } /* web images */ .portfolio { float: left; width: 350px; padding: 15px; border-bottom: 1px solid #ccc; } #abe, #abes, #bb, #bbs, #pbrsd, #pbrsds, #pf, #pfs, #sg, #sgs, #swirl, #swirls, #vh, #vhs, #wk, #wks, #xtreme, #xtremes { position: relative; background: #fff; } #abe img, #abes img, #bb img, #bbs img, #pbrsd img, #pbrsds img, #pf img, #pfs img, #sg img, #sgs img, #swirl img, #swirls img, #vh img, #vhs img, #wk img, #wks img, #xtreme img, #xtremes img { position: absolute; top: 0px; left: 0px; float: left; } #abe .x, #abes .x, #bb .x, #bbs .x, #pbrsd .x, #pbrsds .x, #pf .x, #pfs .x, #sg .x, #sgs .x, #swirl .x, #swirls .x, #vh .x, #vhs .x, #wk .x, #wks .x, #xtreme .x, #xtremes .x {position: relative; top: 10px; left: 10px; margin: 3px; padding: 2px 5px 4px; border: 1px solid #ccc; background: #fff; color: #000; font-family: arial; font-size: 14px;} /* other images */ .other { float: left; width: 350px; padding: 15px; border-top: 1px solid #ccc; } #hol1, #hol2, #hol3, #hol4 { position: relative; background: #fff;} #hol1 img, #hol2 img, #hol3 img, #hol4 img { position: absolute; top: 0px; left: 0px; float: left; } #hol1 .x, #hol2 .x, #hol3 .x, #hol4 .x {position: relative; top: 10px; left: 10px; margin: 3px; padding: 2px 5px 4px; border: 1px solid #ccc; background: #fff; color: #000; font-family: arial; font-size: 14px;} .divider40 { width: 100%; height: 40px; }