/* ------------------- chanelle henry portfolio start: 9.27.09 author: marie dorsaima kyle || http://mariekyle.com =========== TOC =GLOBAL RESET & DEFAULTS =GENERAL HEADING STYLES =STRUCTURE =HEADER / MAIN NAV =WELCOME / about section =FEATURED WORK =OTHER PROJECTS =PHOTOGRAPHY =FOOTER =========== NOTES =========== COLORS blue #5b96b3 light powder blue #a3c2d0 light blue #b8d0db green #346e6a blue green #1D575F light blue green #27747F ----------------------- */ /* =GLOBAL RESET & DEFAULTS _____________________________________________________ */ @font-face { font-family: 'Cicle Fina'; src: url(../fonts/Cicle_Fina.eot); src: local('Cicle Fina'), local('Cicle-Fina'), url(../fonts/Cicle_Fina.ttf) format('truetype'); } @font-face { font-family: 'Cicle Semi'; src: url(../fonts/Cicle_Semi.eot); src: local('Cicle Semi'), local('Cicle-Semi'), url(../fonts/Cicle_Semi.ttf) format('truetype'); } @font-face { font-family: 'Cicle Gordita'; src: url(../fonts/Cicle_Gordita.eot); src: local('Cicle Gordita'), local('Cicle-Gordita'), url(../fonts/Cicle_Gordita.ttf) format('truetype'); } @font-face { font-family: 'Vegur ExtraLight'; src: url(../fonts/Vegur-EL_0500.otf); format("opentype"); } @font-face { font-family: 'Vegur Regular'; src: url(../fonts/Vegur-R_0500.eot); format("opentype"); } @font-face { font-family: 'Vegur Bold'; src: url(../fonts/Vegur-B_0500.eot); format("opentype"); } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,input,kbd,q,s,samp,small, strike,strong,sub,sup,tt,var,b,u,i,input,center,dl,dt,dd,ol,ul,li,fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:101%;vertical-align:baseline; } body { font-family:'Cicle Fina', Tahoma, Arial, sans-serif; font-size:101%; color:#B8D0DB; background:url(../images/bg.gif) top center #000 no-repeat; } body, { font-family:Tahoma, Arial, sans-serif; } ol,ul { list-style:none;} blockquote,q { quotes:none; } blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; } :focus { outline:0; } ins { text-decoration:none; } del { text-decoration:line-through; } table { border-collapse:collapse;border-spacing:0; } img { border:none; } a { color:#B8D0DB; text-decoration:none; } .clear { clear:both; } strong { color:#a3c2d0; font-family:'Cicle Semi', Tahoma, Arial, sans-serif; } strong, { font-family:Tahoma, Arial, sans-serif; } /* =GENERAL HEADING STYLES _________________________________________________________*/ h1, h2, h3, h4, h5, h6 { font-family:'Cicle Gordita', Tahoma, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family:Tahoma, Arial, sans-serif; } h1 { float:left; width:354px; } h1 a { width:354px; height:127px; display:block; background:url(../images/logo1.png) no-repeat; text-indent:-9999px; } h1 a, { background:url(../images/logo1.gif) no-repeat; } h2 { font-size: 95%; text-transform:uppercase; margin-bottom:5px; letter-spacing:0.06em; overflow:hidden;width:888px; } #about_sec h2 { color:#5b96b3; } #feat_sec h2 { color:#346e6a; } #other_sec h2, #photo_sec h2 { color:#0a3e42 } /* =STRUCTURE ______________________________________________________________________*/ #container { width:955px; margin:0 auto; } #header, #about_sec, #feat_sec, #other_sec, #photo_sec { width:inherit; margin-bottom:20px; overflow: hidden;} #about_sec, #feat_sec, #other_sec, #photo_sec { padding:20px 33px 0; width:888px; } #about_sec > div, #feat_sec > div, #other_sec > div { background:url(../images/hrdotted.png) top left no-repeat; padding-top:15px; overflow:hidden; } h2 span { display:block; width:70px; height:16px; float:right; } h2 span a { display:block; float:right; width:inherit; } .toplink { background:url(../images/topnext.gif) no-repeat 0 0; width:30px; height:15px; } .nextlink { background:url(../images/topnext.gif) no-repeat -33px 0; width:35px; height:15px; margin-left:4px} .toplink:hover { background-position: 0 -16px; width:30px; height:15px; } .nextlink:hover { background-position:-33px -16px; width:35px; height:15px; margin-left:4px} /* =HEADER / MAIN NAV ______________________________________________________________________*/ #mainnav { width:350px; float: left; margin:0 0 0 80px; } #mainnav li { float: left; } #mainnav li a { display:block; height:27px; text-indent:-9999px; } #navblog a { width:55px;margin-left:3px; background:url(../images/nav.png) 0 0 no-repeat; } #navother a { width:100px; background:url(../images/nav.png) -58px 0 no-repeat; } #navphoto a { width:100px; background:url(../images/nav.png) -158px 0 no-repeat; } #navcontact a { width:90px; background:url(../images/nav.png) -258px 0 no-repeat; } #navblog a:hover { background:url(../images/nav.png) no-repeat 0px -30px; } #navother a:hover { background:url(../images/nav.png) -58px -30px no-repeat; } #navphoto a:hover { background:url(../images/nav.png) -158px -30px no-repeat; } #navcontact a:hover { background:url(../images/nav.png) -258px -30px no-repeat; } #hiretag { display:block; width:92px; height:78px; background:url(../images/hire.png) 0 -2px no-repeat; margin-top:0; float:right; text-indent:-9999px } #hiretag:hover {background-position:0 0; } /* =WELCOME / about section ______________________________________________________________________*/ #about_sec p { color:#B8D0DB; font-size:95%; letter-spacing:0.03em;line-height:28px; padding-top:10px; } #about_sec { height:145px; background:url(../images/aboutbg.png) no-repeat; padding-bottom: 20px; } /* =FEATURED WORK ______________________________________________________________________*/ #feat_sec { background:url(../images/featbg.gif) no-repeat; overflow:hidden; margin-bottom:50px; } #feat_sec ul { width:290px; height:124px; float: left; padding-bottom:10px; } #feat1, #feat2, #feat3 { margin-top:5px; } #feat1, #feat2,#feat4, #feat5 { padding-right:8px; } #featlogos { width:890px!important; height: 50px!important; clear:both; } li#thumb2020 a { display:block!important; width:290px; height:124px; background:url(../images/lbthumbs/f_2020.gif) 0 0 no-repeat; } li#thumbfood a { display:block!important; width:290px; height:124px; background:url(../images/lbthumbs/f_food.gif) 0 0 no-repeat; } li#thumbhome a { display:block!important; width:290px; height:124px; background:url(../images/lbthumbs/f_home.gif) 0 0 no-repeat; } li#thumbcinci a { display:block!important; width:290px; height:124px; background:url(../images/lbthumbs/f_cinci.gif) 0 0 no-repeat; } li#thumbgrey a { display:block!important; width:290px; height:124px; background:url(../images/lbthumbs/f_grey.gif) 0 0 no-repeat; } li#thumbyah a { display:block!important; width:290px; height:124px; background:url(../images/lbthumbs/f_yah.gif) 0 0 no-repeat; } li#thumb2020 a:hover, li#thumbfood a:hover, li#thumbhome a:hover, li#thumbcinci a:hover, li#thumbgrey a:hover, li#thumbyah a:hover { background-position:0 -124px; } #thumblogo a { display:block; width:886px; height:43px; background:url(../images/logos.jpg) no-repeat 0 0; } #thumblogo a:hover { background-position:0 -43px } /* =OTHER PROJECTS ______________________________________________________________________*/ #other_sec { background:url(../images/otherbg.gif) no-repeat; overflow:hidden; padding-bottom: 45px; } #other_sec ul { width:215px; height:88px; float: left; padding-bottom:10px; } #other1, #other2, #other3, #other4 { margin-top:5px; } #other1, #other2, #other3, #other5, #other6, #other7, #other9, #other10 { padding-right:8px; } li#thumbalbum a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_album.gif) 0 0 no-repeat; } li#thumbbern a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_bern.gif) 0 0 no-repeat; } li#thumbdeath a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_death.gif) 0 0 no-repeat; } li#thumblang a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_lang.gif) 0 0 no-repeat; } li#thumbengland a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_england.gif) 0 0 no-repeat; } li#thumbrda a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_rda.gif) 0 0 no-repeat; } li#thumbseeds a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_seeds.gif) 0 0 no-repeat; } li#thumbsumm a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_summ.gif) 0 0 no-repeat; } li#thumbgive a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_give.gif) 0 0 no-repeat; } li#thumbbike a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_bike.gif) 0 0 no-repeat; } li#thumbultima a { display:block!important; width:215px; height:88px; background:url(../images/lbthumbs/o_ultima.gif) 0 0 no-repeat; } li#thumbalbum a:hover, li#thumbbern a:hover, li#thumbdeath a:hover, li#thumblang a:hover, li#thumbengland a:hover, li#thumbrda a:hover, li#thumbseeds a:hover, li#thumbsumm a:hover, li#thumbgive a:hover, li#thumbbike a:hover, li#thumbultima a:hover { background-position:0 -88px; } /* =PHOTOGRAPHY ______________________________________________________________________*/ #photo_sec { background:url(../images/photogbg.gif) no-repeat; overflow:hidden; padding-bottom:45px; } #pictowrap { width:888px; background:#171717; padding:20px 0; } #PictoBrowser091003061550 { width:580px; padding:10px; background:#000; margin:0 auto; } /* =FOOTER ______________________________________________________________________*/ #footer { background:url(../images/footerbg.jpg) no-repeat bottom center #000; width:953px; height:147px; margin-top:15px; overflow:hidden; } #f_contact, #f_connect, #f_download { padding-top:60px; } #f_contact { width:309px; float:left; } #f_contact li { text-align:center; letter-spacing:.07em; font-size:101%; line-height:24px; } #f_connect { width:332px; float:left; } #f_connect li { float:left; margin-left:4px} #f_connect li a { width:32px; height:45px; display:block; text-indent:-9999px;} #f_connect li a:hover { margin-top:-1px; } #be a { background:url(../images/social2.gif) no-repeat -3px 0px; } #de a { background:url(../images/social2.gif) no-repeat -37px 0px; } #fa a { background:url(../images/social2.gif) no-repeat -70px 0; } #fl a { background:url(../images/social2.gif) no-repeat -103px 0; } #la a { background:url(../images/social2.gif) no-repeat -135px 0; } #li a { background:url(../images/social2.gif) no-repeat -168px 0; } #st a { background:url(../images/social2.gif) no-repeat -201px 0; } #tw a { background:url(../images/social2.gif) no-repeat -234px 0; } #vi a { background:url(../images/social2.gif) no-repeat -269px 0; } #be a:hover { background-position: -3px -45px; } #de a:hover { background-position: -37px -45px; } #fa a:hover { background-position: -70px -45px; } #fl a:hover { background-position: -103px -45px; } #la a:hover { background-position: -135px -45px; } #li a:hover { background-position: -168px -45px; } #st a:hover { background-position: -201px -45px; } #tw a:hover { background-position: -234px -45px; } #vi a:hover { background-position: -269px -45px; } #f_download { width:310px; float:left; text-indent:-9999px; } #f_resume { padding-left:10px; } #f_resume a { display:block; float:left; width:131px; height: 48px; background:url(../images/dllinks.gif) 0 0 no-repeat; } #f_resume a:hover { background-position: 0px -48px; } #f_portfolio a { display:block; float:left; width:131px; height: 48px; background:url(../images/dllinks.gif) -131px 0 no-repeat; } #f_portfolio a:hover{ background-position: -131px -48px; } #copyright { clear:left; color:#1D575F; display:block; font-size:68%; margin:0 auto; padding-top:17px; width:425px; text-align:center; } #copyright a { color:#1D575F; } #copyright a:hover { text-decoration:underline; color:#27747F }