/* Theme Name: Carlos Cabrera Theme URI: http://www.carloscabrera.com.ar Description: Carlos Cabrera art. Version: 2.0 Author: Javier Cabrera Author URI: http://www.emastudios.com/ */ /*////////////// GENERAL STYLES */ body { margin: 0; padding: 0; } html, body { height: 100%; min-height: 100%; } .float_left { float: left; } .float_right { float: right; } .clear { clear: both; line-height: 0; height: 0; } /* NAV STYLES */ #menu_wrap { width: 100%; padding: 12px 0; font-family: Arial, sans-serif; font-weight: bold; } #homepage #menu_wrap, #work #menu_wrap { background: url("../img/nav_home_back.png") repeat left top; } #rest #menu_wrap { background: #333; } #work #menu_wrap { position: relative; z-index: 100000; top: 0; } #homepage #menu_wrap { position: absolute; top: 0; left:0; z-index:1000000; } /*////////////// REST OF THE SITE STYLES */ #rest { background: #f5f5f5; } #rest #content_wrap { padding-top: 30px; } #rest .fadeThis { float:left; position:relative; display:block; height: 60px; width: 242px; background:url("../img/logo_on_off_rest.jpg") 0 0 no-repeat; margin-left:10px;} #rest .fadeThis * { display: none; } #rest .fadeThis span.hover { position: absolute; top: 0; left: 0; display: block; height: 60px; width: 242px; background:url("../img/logo_on_off_rest.jpg") 0 -64px no-repeat; cursor:pointer; } #download_green .fadeThis { float:left; position:relative; display:block; margin: 3px 0; height: 33px; width: 146px; background:url("../img/tutorials/download_on_off.gif") 0 0 no-repeat; } #download_green .fadeThis * { display: none; } #download_green .fadeThis span.hover { position: absolute; top: 0; left: 0; display: block; height: 33px; width: 146px; background:url("../img/tutorials/download_on_off.gif") 0 bottom no-repeat; cursor:pointer; } #download_blue .fadeThis { float:left; position:relative; display:block; margin: 3px 0; height: 33px; width: 146px; background:url("../img/tutorials/download_on_off.gif") 0 0 no-repeat; } #download_blue .fadeThis * { display: none; } #download_blue .fadeThis span.hover { position: absolute; top: 0; left: 0; display: block; height: 33px; width: 146px; background:url("../img/tutorials/download_on_off.gif") 0 -33px no-repeat; cursor:pointer; } /*////////////// ADSENSE */ p.adsense_line { text-align:center; padding:10px 0; } /* TITLE */ #rest h1 { background: #3671A1; color: #fff; padding: 4px 8px; display: block; font-size: 58px; font-weight: normal; font-family: Arial, sans-serif; letter-spacing: -1px; float: left; margin: 10px 15px 0 2px;} #rest #subtitle { font-family: Georgia, sans-serif; font-weight: normal; font-size: 17px; margin: 0; padding: 0 50px 0 0; line-height: 24px; color: #3671A1; } .store h1 { background: #ff0000 !important; } .store #subtitle { color: #666 !important; } /* ROUND BORDER WHITE BACKGROUND CONTENT */ #top_content { background: url("../img/round_top.gif") no-repeat left top; width: 100%; height: 20px; margin-top: 20px; } #center_content { background: url("../img/round_middle.gif") repeat-y left top; padding: 10px 75px 0px 25px; } #bottom_content { background: url("../img/round_bottom.gif") no-repeat left top; width: 100%; height: 40px; margin-bottom: 20px; } #center_content p { margin: 0; } /* HOW TO (MAC & PC) */ #center_content div.float_left { width: 43%; margin-right: 40px; font-size: 13px; font-family: Arial, sans-serif; color: #333; } #center_content div.float_left strong { display: block; } #center_content div.float_left img { padding: 0 20px 40px 0; } p#rss_tutorials { background: #eee; padding: 8px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center; font-family: Arial, sans-serif; color: #333; font-size: 13px; } p#rss_tutorials a { color: #333; background: url("../img/rss_small.gif") no-repeat left center; padding-left: 18px; } p#rss_tutorials a:hover, p#rss_tutorials a:visited { color: #000; } p#rss_tutorials a:active { color: #ff0000; } /* TUTORIALS */ #tutorials { margin-top: 30px; } #tutorials .float_right { width: 175px; } #tutorials div.float_left { width: 630px; margin: 0; padding-right: 20px; } #tutorials p.image img { margin: 0; padding: 0 8px 0 0; float: left; border: none; } #tutorials h2 { margin: 0; padding: 0; text-transform: uppercase; color: #ff0000; } #tutorials h3 { margin: 0; padding:0; text-transform: uppercase; color: #3671A1; font-size: 26px; letter-spacing: -1px; line-height: 28px; } #tutorials p.desc { font-family: Georgia, sans-serif; font-size: 16px; margin: 4px 0 8px 0; line-height: 21px; } #tutorials .apple, #tutorials .pc { background: url("../img/tutorials/download_back.gif") no-repeat left top; height: 100px; width: 150px; padding: 12px 17px 12px 12px; position: relative; text-align: center; } #tutorials h4 { padding: 0; margin: 0; color: #333; font-family: Helvetica, sans-serif; font-size: 14px; } #tutorials .details { font-family: "Lucida Grande", sans-serif; font-size: 13px; color: #333; width: 74px; } #tutorials .apple img, #tutorials .pc img { border: none; margin: 3px 0; } #tutorials .fade div { margin-top: -39px; margin-left: 2px; display: none; width: 60px; height: 39px; } #tutorials hr { margin: 20px 0; border-left: none; border-right: none; border-bottom: none; border-top: 1px solid #ccc; } /*////////////// HOMEPAGE STYLES */ /* LOGO */ .fadeThis { float:left; position:relative; display:block; height: 60px; width: 242px; background:url("../img/logo_on_off_home.jpg") 0 0 no-repeat; margin-left:10px; } .fadeThis * { display: none; } .fadeThis span.hover { position: absolute; top: 0; left: 0; display: block; height: 60px; width: 242px; background:url("../img/logo_on_off_home.jpg") 0 -64px no-repeat; cursor:pointer; } #menu_wrap #navigation { margin-left: 20px; } /*we move the menu from the logo place*/ #rotate { z-index: 0; width: 100%; height: 750px; position: absolute; left: 0 !important; top: 0; } #bottom-trans { background: url("../img/bottom-trans.png") repeat-x left top; width:100%; position:absolute; z-index: 100; height:280px; top:510px; left:0; border: none; } /* MENU */ #menu { width: 950px; margin: 0 0 0 5px; min-width: 980px; padding: 0 10px 0 0; position: relative; } #menu_wrap p { margin: 0; padding: 0; font-size: 12px; color: #fff; padding: 0 0 2px 0; } #menu_wrap ul { margin: 0; padding: 0 25px 0 0; list-style-type: none; } #menu_wrap ul li { display: inline; } #menu_wrap ul#nav li a { float: left; width: 70px; height: 0; padding-top: 38px; overflow: hidden; margin-right: 4px; } #menu_wrap ul#nav_email li a { float: left; width: 298px; height: 0; padding-top: 38px; overflow: hidden; } /* HOMEPAGE NAV */ #homepage ul#nav li a { background: url("../img/nav_home.gif") no-repeat left top; } #homepage ul#nav_email li a { background: url("../img/nav_email_home.gif") no-repeat left top; } /* REST NAV */ #rest ul#nav li a { background: url("../img/nav_rest.gif") no-repeat left top; } #rest ul#nav_email li a { background: url("../img/nav_email_tutorial.gif") no-repeat left top; } /* WORK NAV */ #work ul#nav li a { background: url("../img/nav_home.gif") no-repeat left top; } #work ul#nav_email li a { background: url("../img/nav_email_home.gif") no-repeat left top; } /* MENU OUTLINES (FIREFOX AND OTHERS) */ #menu_wrap ul#nav li a:active, #menu_wrap ul#nav_email li a:active, #menu_wrap ul#nav li a:focus, #menu_wrap ul#nav_email li a:focus { outline: 0; } /* MENU LINKS (INACTIVE)*/ #menu_wrap ul#nav li#home a { background-position: 0 0; } #menu_wrap ul#nav li#work a { background-position: -70px 0; width: 69px; } #menu_wrap ul#nav li#tuto a { background-position: -140px 0; width: 105px; } #menu_wrap ul#nav li#store a { background-position: -245px 0; } #menu_wrap ul#nav_email li a { background-position: 0 0; } /* MENU LINKS (HOVER)*/ #menu_wrap ul#nav li#home a:hover { background-position: 0 -39px; } #menu_wrap ul#nav li#work a:hover { background-position: -70px -39px; } #menu_wrap ul#nav li#tuto a:hover { background-position: -140px -39px; width: 105px; } #menu_wrap ul#nav li#store a:hover { background-position: -245px -39px; } #menu_wrap ul#nav_email li a:hover { background-position: 0 -39px; } /* MENU LINKS (ACTIVE)*/ #menu_wrap ul#nav li#home a:active { background-position: 0 -78px; } #menu_wrap ul#nav li#work a:active { background-position: -70px -78px; } #menu_wrap ul#nav li#tuto a:active { background-position: -140px -78px; width: 105px; } #menu_wrap ul#nav li#store a:active { background-position: -245px -78px; } #menu_wrap ul#nav_email li a:active { background-position: 0 -78px; } /* MENU LINKS (CURRENT) */ #menu_wrap ul#nav li#home a.current { background-position: 0 -117px; } #menu_wrap ul#nav li#work a.current { background-position: -70px -117px; } #menu_wrap ul#nav li#tuto a.current { background-position: -140px -117px; width: 105px; } #menu_wrap ul#nav li#store a.current { background-position: -245px -117px; } /*////////////// HOME CONTENT */ #homepage { background: #000; } #content_wrap { width: 950px; margin: 0 0 0 20px; min-width: 950px; position: relative; z-index:10000; } #homepage #content_wrap { margin-top: 150px; padding-bottom: 20px; } /* TITLES */ #homepage h1 { margin: 0; } #homepage h1 br.clear { line-height: 86px;} #homepage p#words img { margin-bottom: 12px; margin-right:12px; } /* WRITING STYLES */ #homepage #content_wrap p { margin: 0 0 4px 2px; padding: 0; } /* BUBBLE STYLES*/ #content_wrap .bubbleInfo { position: relative; } #content_wrap .popup { position: absolute; margin-left: 240px; display: none; /* keeps the popup hidden if no JS available */ } #content_wrap .popup { background: url("../img/payment_bubble.gif") no-repeat left top; width: 240px; height: 200px; padding: 20px 0 0 20px; } #content_wrap .popup p { width: 180px; font-family: Arial, sans-serif; color: #666; font-size: 13px; } #content_wrap .popup span { color: #CC6600; font-weight: bold; } /* NEWS (TWITTER LOVES TO PLAY NICE!) */ #news { margin: 50px 0 0 0; padding: 2px; } .roundnews { background: url("../img/news_back.gif") repeat-x left bottom; height: 30px; padding: 5px 10px 0 10px; line-height: 10px; font-size: 16px; letter-spacing: -1px; font-family: Arial, sans-serif;} .roundnews h3 { background: #333; color: #fff; padding: 8px 5px 2px 8px; width: 155px; height: 20px; display: block; float: left; margin: 6px 10px 0 3px; } .roundnews p { padding: 12px 0 0 0 !important; color: #444; font-size: 14px; letter-spacing: 0px; } #news img { float: right; border: none; margin-top: -18px; margin-right: 4px;} #news ul { margin: 4px 0 0 0; padding: 0; list-style-type: none; } #news li { margin: 0; padding: 0; color: #444; font-size: 15px; margin-top: -6px; letter-spacing: 0;} #news li a { color: #000; text-decoration:none; font-weight:bold; } #news li a:hover { color:#ff0000; } #tweet div { margin-top: -5px; } #tweet span { background:#277cd3; color:#fff; padding: 4px 2px; letter-spacing:0; font-size: 13px; font-weight: bold; } #tweet span a, #tweet span a:visited { color:#fff; } #tweet a:hover { text-decoration: none; } /* HOT BUTTONS (BECAUSE IF IT WHERE HOTTER, IT WOULD BURN THIS CSS FILE!) */ #hotbuttons { margin-top: 25px; margin-bottom: 40px; } #hotbuttons img { border: none; } #hotbuttons .float_left { width: 316px; } #hotbuttons .center img { margin-left: 14px; } #hotbuttons .right { text-align: right; } /*////////////// WORK STYLES */ #flashcontent { min-height: 1000px; height:1150px; } html { height: 100%; } #work { min-height: 1000px; background: #181818; } #flash_wrap { min-height: 1000px; } #flash_container { width: 100%; min-height: 1000px; } /*////////////// STORE STYLES */ #store_float { background: url("../img/store/store_front.gif") no-repeat left top; margin-top: 20px; padding: 7px 0 0 10px; height:550px; min-height: 550px; } p#store_controls { width:250px; margin: 0 0 0 200px; font-family: Helvetica, sans-serif; font-weight:bold; } p#store_controls a, p#store_controls a:visited { color: #fff; text-decoration:none; margin-right:10px; } p#store_controls a:hover { color: yellow; text-decoration: underline; } #store_tutorial { margin: 0px 0 0 0; } #store_tutorial .centered { text-align:center } #store_tutorial img { text-align:center; border:none; } #store_tutorial .zazzle { border-top:1px solid #ccc; margin-top:50px; } .store #center_content { padding-bottom: 10px; } #store_tutorial h2 { font-size:3.4em; font-weight:bold; font-family: Helvetica, sans-serif; color:#FF3300; text-align:center; letter-spacing:-1px; margin:20px 0 0 0; padding:0; } #store_tutorial h3 { font-size:1.6em; font-weight:normal; font-family:Georgia, sans-serif; color:#555; margin: 0 0 25px 0; padding:0 0 25px 0; border-bottom: 1px solid #ccc; text-align:center; } #store_tutorial strong { color:#000; font-weight:normal; } /*////////////// FOOTER STYLES */ #footer { color: #fff; font-family: Helvetica, sans-serif; font-size: 13px; border-top: 1px solid #333; padding: 8px 0 10px 0; line-height: 15px; } #footer a { color: #ccc; } #footer a:hover { color: yellow; text-decoration: none; } #footer img { float: left; padding-right: 8px; } #rest #footer { border-top: 1px solid #ccc; color: #333; padding: 0 0 10px 0; } #rest #footer a { color: red; } #rest #footer a:hover { color: black; text-decoration: none; } #rest #footer .float_left { width:65%; } #rest #footer .float_right { width:280px; border-left:1px solid #ccc; padding-left:15px; font-family:Georgia, sans-serif; font-size:17px; line-height:20px; } #rest #footer .float_right a { color:green; } #rest #footer p, #work #footer p, #homepage #footer p { margin:0; padding:10px 0 10px 0; } #work #footer, #homepage #footer { width: 95%; margin-left: 10px; padding: 0 0 10px 0; margin-top:20px; } #work #footer .float_left, #homepage #footer .float_left { width: 65%; } #work #footer .float_right, #homepage #footer .float_right { width:280px; border-left:1px solid #333; padding-left:15px; font-family: Georgia, sans-serif; font-size:17px; line-height:20px; } #work #footer .float_right a, #homepage #footer .float_right a { color:yellow; } /*////////////// FINISH: you have reached the end of the CSS file, and the end of the universe as we know it. Shame on you! */