/* BASIC STRUCTURE *******************************************************************************/ html {} * { margin:0; padding:0; list-style:none; } body {margin:0; padding:0; width: 9600px; height: 1300px; /*overflow: hidden;*/} /*THW ********************************************************************/ #page { float:left; } .section-style { margin: 0px; float: left; width: 1600px; height: 1300px; display: block; position: relative; z-index:0 !important; } #arrows { position: fixed; top: 440px; left: 650px; width: 90px; height: 30px; cursor: pointer; display:none; } #arrows ul { margin: 0; padding: 0; list-style:none; } #arrows ul li { margin: 0; padding: 0; display:inline; width: 40px; height: 30px; } #arrows ul li a{ margin-right: 5px; float: left; display: block; width: 40px; height: 30px; overflow: hidden; cursor: pointer; font-size: 50em; text-indent: -9000px; } #arrows ul #left a {background: transparent url(../images/next.png) no-repeat;} #arrows ul #right a{background: transparent url(../images/back.png) no-repeat;} #home { float:left; margin: 0; padding: 0; color:#185c76; font-size:75%; font-family: Tahoma, Arial, Verdana, Helvetica; background: #0b0b09 url(../images/bg-strip.gif); } #home .container-bg { margin: 0 auto; height:780px; background: transparent url(../images/bg-footer.gif) repeat-x bottom; } #home .container { display:block; margin-left:190px; width: 906px; } #about {float:left; margin: 0; padding: 0; color:#185c76; font-size:75%; font-family: Tahoma, Arial, Verdana, Helvetica; background: #ebc41e url(../images/bg-strip-about.jpg); } #what {float:left; margin: 0; padding: 0; color:#185c76; font-size:75%; font-family: Tahoma, Arial, Verdana, Helvetica; background: #448d0d url(../images/bg-strip-what.jpg); } #work {float:left; margin: 0; padding: 0; color:#0b85a0; font-size:75%; font-family: Tahoma, Arial, Verdana, Helvetica; background: #448d0d url(../images/bg-strip-work.jpg); } #contact {float:left; margin: 0; padding: 0; color:#edad00; font-size:75%; font-family: Tahoma, Arial, Verdana, Helvetica; background: #448d0d url(../images/bg-strip-contact.jpg); } #thanks {float:left; margin: 0; padding: 0; color:#edad00; font-size:75%; font-family: Tahoma, Arial, Verdana, Helvetica; background: #448d0d url(../images/bg-strip-contact.jpg); } .container-backpage { float:left; margin-left:20px; width:912px; } * html .container-backpage { float:left; width:1050px; } p, td , div {color:#fff; line-height:18px;} /* LINKS - DEFAULT COLORS ARE SET IN BASE.CSS, CHANGE THESE COLORS AS NEEDED. *******************************************************************************/ a:link, a:visited { color: #f9f6f6; text-decoration:none; font-weight:bold; } a:hover { color: #fff; text-decoration:underline; } /* HEADER *******************************************************************************/ #header { padding: 0px; height: 100px; width: 800px; } #header #hdr { margin: 0px auto; width: 597px; margin-top:20px; } #header #hdr-2 { float: right; width: 516px; margin-right:100px; margin-top:10px; } #hdr .header-home { display:block; background: url(../images/hi-im-joy-reyes.png) no-repeat bottom; height: 51px; width: 597px; } #hdr-2 .header-home { display:block; background: url(../images/i-design.png) no-repeat bottom; height: 31px; width: 675px; } #hdr .header-home span, #hdr-2 .header-home span { display:none; } #header-about { float:left; margin-left:30px; background: url(../images/about-header-bg.png) no-repeat top; width: 792px; height:80px; } #header-what { float:left; margin-left:30px; background: url(../images/what-header-bg.png) no-repeat top; width: 792px; height:80px; } #header-work{ float:left; margin-left:30px; background: url(../images/work-header-bg.png) no-repeat top; width: 792px; height:80px; } #header-thanks, #header-contact { float:left; margin-left:30px; background: url(../images/contact-header-bg.png) no-repeat top; width: 792px; height:80px; } * html #header-about, * html #header-what, * html #header-work, * html #header-contact, * html #header-thanks {} #topbar{ position:absolute; border: 1px solid black; padding: 2px; background-color: lightyellow; width: 620px; visibility: hidden; z-index: 100; } .logo {float:left; width:120px; height:173px; } .logo .link-home { display:block; background: url(../images/joyreyes-about.png) no-repeat; width:120px; height:173px; } .logo span {display:none; } .section-container-left {width:120px; float:left; } .section-container-right {width:792px; margin-left:-20px; margin-top:40px; float:left; } * html .section-container-right {width:792px; margin-left:-120px; float:left; } /*SLIDING *********************************************************************************/ #navigation { position:relative; float:left; left:100px; width:200px; } #hide { position:absolute; top:30px; left:-190px; z-index:2; } div#sliding-navigation { position:relative; float:left; left:-10px; margin: 0; padding: 0; } div#sliding-navigation ul { list-style: none; font-size: .75em; margin: 30px 0; padding: 0; } div#sliding-navigation li a { display: block; width: 150px; padding: 5px 18px; margin: 0; margin-bottom: 5px; } #navigation-top { position:relative; float:left; left:0px; width:200px; z-index:2; } #sliding-navigation-top { position:absolute; top:-20px;} div#sliding-navigation-top { list-style: none; font-size: .75em; } div#sliding-navigation-top ul { margin:0; padding:0; list-style:none; } div#sliding-navigation-top li a { display: block; margin: 0; margin-bottom: 5px; text-decoration: none; } div#sliding-navigation li span, div#sliding-navigation-top li span {display:none;} div#sliding-navigation li.main-menu1 a { background: url(../images/menus/bio-home-off.png) no-repeat; width:150px; height:85px; } div#sliding-navigation-top li.main-menu1 a { margin-left:50px; background: url(../images/menus/bio.png) no-repeat; width:104px; height:64px; } div#sliding-navigation li.main-menu2 a { background: url(../images/menus/what-i-do-home.png) no-repeat; width:332px; height:164px; margin-top:-50px; } div#sliding-navigation-top li.main-menu2 a { background: url(../images/menus/what-i-do.png) no-repeat; width:189px; height:106px; } div#sliding-navigation li.main-menu3 a { background: url(../images/menus/my-work-home.png) no-repeat; width:332px; height:124px; margin-top:-30px; } div#sliding-navigation-top li.main-menu3 a { background: url(../images/menus/my-work.png) no-repeat; width:210px; height:81px; } div#sliding-navigation li.main-menu4 a { background: url(../images/menus/contact-home.png) no-repeat; width:285px; height:94px; margin-top:-30px; } div#sliding-navigation-top li.main-menu4 a { background: url(../images/menus/contact.png) no-repeat; width:170px; height:63px; } div#sliding-navigation li.main-menu5 a { background: url(../images/menus/blog-home.png) no-repeat; width:178px; height:114px; margin-top:-30px; margin-left:20px; } div#sliding-navigation-top li.main-menu5 a { background: url(../images/menus/blog.png) no-repeat; width:111px; height:75px; } div#sliding-navigation li.main-menu1 a:hover { margin-left:20px; background: url(../images/menus/bio-home-off.png) no-repeat; width:150px; height:85px; } div#sliding-navigation-top li.main-menu1 a:hover { margin-left:70px; background: url(../images/menus/bio.png) no-repeat; width:104px; height:64px; } div#sliding-navigation li.main-menu2 a:hover { margin-left:20px; background: url(../images/menus/what-i-do-home.png) no-repeat; width:332px; height:164px; } div#sliding-navigation-top li.main-menu2 a:hover { margin-left:20px; background: url(../images/menus/what-i-do.png) no-repeat; width:189px; height:106px; } div#sliding-navigation li.main-menu3 a:hover { margin-left:20px; background: url(../images/menus/my-work-home.png) no-repeat; width:332px; height:124px; } div#sliding-navigation-top li.main-menu3 a:hover { margin-left:20px; background: url(../images/menus/my-work.png) no-repeat; width:210px; height:81px; } div#sliding-navigation li.main-menu4 a:hover { margin-left:20px; background: url(../images/menus/contact-home.png) no-repeat; width:285px; height:94px; } div#sliding-navigation-top li.main-menu4 a:hover { margin-left:20px; background: url(../images/menus/contact.png) no-repeat; width:170px; height:63px; } div#sliding-navigation li.main-menu5 a:hover { margin-left:40px; background: url(../images/menus/blog-home.png) no-repeat; width:178px; height:114px; text-decoration:none; } div#sliding-navigation-top li.main-menu5 a:hover { margin-left:20px; background: url(../images/menus/blog.png) no-repeat; width:111px; height:75px; } /* BUTTONS *******************************************************************************/ .buttons {position:absolute; width:200px; top:15px; left:590px; z-index:3;} .buttons-back {width:70px; float:left;} .buttons-next { width:70px; float:right; } * html .buttons {position:relative; float:left; width:200px; top:25px; left:500px; } /* CONTENT AREA *******************************************************************************/ .content { margin:0 auto; display:block; padding:10px 5px 0px 5px; } #about .content { float:left; margin-left:30px; display:block; width:792px; min-height:368px; height: auto; padding:0px; background: transparent url(../images/about-bg.gif) repeat-y; } #what .content { float:left; margin-left:30px; display:block; width:792px; min-height:368px; height: auto; padding:0px; background: transparent url(../images/what-bg.gif) repeat-y; } #work .content { float:left; margin-left:30px; display:block; width:792px; min-height:668px; height: auto; padding:0px; background: transparent url(../images/work-bg.gif) repeat-y; } #contact .content, #thanks .content { float:left; margin-left:30px; display:block; width:792px; min-height:368px; height: auto; padding:0px; background: transparent url(../images/contact-bg.gif) repeat-y; } * html #about .content, * html #what .content, * html #contact .content, * html #thanks .content {height: 368px; } * html #work .content {height: 668px; } /* MAIN *******************************************************************************/ .main { display: block; text-align:left; padding:0px 10px; } .box1 { float:left; margin:0 auto; width: 454px; padding:0px 5px 10px 5px; } .box2 {float:left; display:block; width:312px; margin-top:100px; } #info { background: url(../images/trans-box.png) no-repeat; width:197px; height:145px; margin-left:40px; padding:15px 15px; color:#ccc; font-size:0.9em; text-align:justify; } #twitter_div {background: url(../images/twitter-box.png) no-repeat; width:250px; height:211px; margin-top:10px; padding:10px 45px 10px 30px; } ul#twitter_update_list li {margin-bottom:10px;} .tweets { margin:0px 15px; padding:20px; color:#ccc; font-size:0.9em; } .tweets a, .twitter-link a {color:#ffffcc; text-decoration:underline; } .tweets a:hover, .twitter-link a:hover {color:#fff;} .follow .follow-lnk {display:block; width:190px; height:30px; } .follow span {display:none; } /* BACKPAGE MAIN ******************************************************************/ .main {font-family:Arial, Verdana, Helvetica; font-size:1em; text-align:justify; } #about .main { position:relative; float:left;text-align:left; padding:0px 35px 20px 85px; width:672px; min-height:701px; height: auto;background: transparent url(../images/about-bot.gif) no-repeat bottom; } #what .main { position:relative; float:left;text-align:left; padding:0px 35px 20px 85px; width:672px; min-height:701px; height: auto;background: transparent url(../images/what-bot.gif) no-repeat bottom; } #work .main { position:relative; float:left;text-align:left; padding:0px 35px 20px 115px; width:642px; min-height:801px; height: auto;background: transparent url(../images/work-bot.gif) no-repeat bottom; } #contact .main, #thanks .main { position:relative; float:left;text-align:left; padding:0px 35px 20px 85px; width:672px; min-height:601px; height: auto;background: transparent url(../images/contact-bot.gif) no-repeat bottom; } * html #about .main, * html #what .main, * html #contact .main, * html #thanks .main {height: 701px; } * html #work .main {height: 801px; } .services {float:left; width:280px; margin-right:30px;} /* HEADINGS ******************************************************************************/ h1 { font-size: 200%; color:#fff; font-family: Arial, Verdana, Helvetica; padding-bottom:6px;margin-bottom:4px;} h1 .title { font-size: 180%; color:#fff; font-family: Arial, Verdana, Helvetica; padding-bottom:4px;margin-bottom:2px;} h2 { font-size: 140%; color:#f1d530;} h3 { font-size: 100%; margin-bottom:2px;} h4 { font-size: 120%; color:#ffc; } img, img a {border:0px;} /*SIFR*/ /* DO NOT ADJUST THESE STYLES */ .sIFR-flash + div[adblocktab=true] { display: none !important; } .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; } .sIFR-replaced, .sIFR-ignore { visibility: visible !important; } .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none; } /* YOU CAN ADJUST, ADD OR REMOVE FROM THESE STYLES - Decoy styles are used to hide the browser text before it is replaced */ .sifr-active h1, .sifr-active h2 .sifr-active h1 .title{ visibility: hidden; line-height:1em; } .sIFR-active h1, .sIFR-active h2 { width:420px; color:#fff; } /*MISC ******************************************************************************/ * html #header-work, * html #header-about, * html #header-contact, * html #header-thanks, * html #header-what, #hdr .header-home, #hdr-2 .header-home, div#sliding-navigation li.main-menu1 a, div#sliding-navigation-top li.main-menu1 a, div#sliding-navigation li.main-menu1 a:hover, div#sliding-navigation-top li.main-menu1 a:hover, div#sliding-navigation li.main-menu2 a, div#sliding-navigation-top li.main-menu2 a, div#sliding-navigation li.main-menu2 a:hover, div#sliding-navigation-top li.main-menu2 a:hover, div#sliding-navigation li.main-menu3 a, div#sliding-navigation-top li.main-menu3 a, div#sliding-navigation li.main-menu3 a:hover, div#sliding-navigation-top li.main-menu3 a:hover, div#sliding-navigation li.main-menu4 a, div#sliding-navigation-top li.main-menu4 a, div#sliding-navigation li.main-menu4 a:hover, div#sliding-navigation-top li.main-menu4 a:hover, div#sliding-navigation li.main-menu5 a, div#sliding-navigation-top li.main-menu5 a, div#sliding-navigation li.main-menu5 a:hover, div#sliding-navigation-top li.main-menu5 a:hover, #info, #twitter_div, #hide, .png, .logo .link-home, #nextBtn a, #nextBtn2 a, #prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a, .primaryAction, .resetButton { behavior: url(src/iepngfix.htc); } .right {float:right; width:100px; margin:0 5px;} .clear {clear:both; height:20px; } /*slideshow*/ #slider{ margin-left:10px; } #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0 auto; padding:0; list-style:none; } #slider li, #slider2 li{ /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:610px; height:641px; overflow:hidden; } #slider li span, #slider2 li span { font-weight:bold; color:#000; font-size:90%; text-align:center; margin:0 auto; height:45px; padding-top:3px; padding-bottom:3px;clear:both; width:610px; } p#controls, p#controls2{ margin:0; position:relative; } #prevBtn, #nextBtn, #prevBtn2, #nextBtn2{ display:block; margin:0; overflow:hidden; text-indent:-8000px; width:36px; height:32px; position:absolute; left:-32px; top:-380px; } #nextBtn, #nextBtn2{ left:620px; } #prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{ display:block; width:36px; height:32px; background:url(../images/btn-prev.png) no-repeat 0 0; } #nextBtn a, #nextBtn2 a{ background:url(../images/btn-next.png) no-repeat 0 0; }