/* Title: Rype Arts Main Style Sheet Version: 1.0 Author: Rype Arts email: info@rypearts.com website: http://rypearts.com */ /* reset */ * { margin:0; padding:0; } /* @group Typography */ body { color:#414042; font-family:'Arial','Helvetica',sans-serif; line-height:1.4; } p, li { font-size:10pt; } p { margin:15px 0; line-height:1.5; } p.intro { font-weight:bold; } ul, ol { margin:10px 0 20px; } li { color:#000; margin:5px 0; } a { color:#85ad35; } h1, h2, h3, h4, h5, h6 { font-family:Helvetica, Arial, sans-serif; } h4 { } ul, ol { padding-left:40px; } span.bold2 { font-weight:bold; } p.name_title { margin-top:0; font-size:8pt; color:#b7b7b7; } p.services-home { text-align:left; padding:0 20px 10px; margin-bottom:20px; } #services p { margin-top:0; padding-bottom:10px; } #services h4 { color:#a4c155; font-size:11pt; } #port_nav p { margin-top:5px; margin-bottom:20px; } /* @end */ /* @group Layout */ #Main, #Port-sub { width:100%; } #Main .inside, #Port-sub .inside { clear:both; height:100%; margin:0 auto; position:relative; width:940px; } #Main .block, #Port-sub .block { float:left; border-right:1px solid #dfdfdf; } #Main .block-port, #Port-sub .block-port { float:left; } #home #Main .block.end, #sub #Main .block.end, #portfolio #Main .block.end, #portfolio #Port-sub .block.end { margin-right:0 !important;margin-left:0 !important; border-right:none; } /* @end */ /* @group Header */ #Header { background:#fff url('images/stripLogoColor.jpg') repeat-x left top; height:120px; } #Header .inside { height:100%; } #Header #Logo { position:absolute; top:30px; left:0; } #Header #Logo a img { border:none; } /* @end */ /* @group Main Navigation */ #Navigation { position:absolute; right:0;background:url("images/header-bg.png") repeat scroll 0 0 transparent; padding-left:35px; padding-top:40px; height:100%;} #Navigation li { float:left; display:block; padding:0 25px; font-size:12pt; } #Navigation li a { color:#79777a; display:block; padding:5px 0; text-decoration:none; } #Navigation li a.current { color:#85ad35; border-bottom:3px solid #ebebeb; } #Navigation li a:hover { color:#85ad35; } p.port-explore { background:url(images/link.jpg) no-repeat left 3px; padding-left:25px; } /* @end */ /* @group Banners */ #home #Banner, #home #Banner-404 { background:transparent url('images/banner_repeat.png') repeat-x left top; height:270px; } #home #Banner .inside { background:#28AAA7 url('images/banner_character.png') no-repeat right top; height:270px; top:0px; } #home #Banner-404 .inside { background:transparent url('images/banner_404.png') no-repeat right top; left:-70px; top:-79px; height:80%; padding:150px 70px 0; } #Banner-404 a { color:white; } #home #Banner h2, #home #Banner-404 h2 { position:relative; left:70px; top:35px; width:500px; font:normal 20px Helvetica, Arial, sans-serif; display:none; } #home #Banner h2 strong, #home #Banner-404 h2 strong { color:#fff; font-weight:bold; font-size:30px; letter-spacing:-1px; } #home #Banner h2 span, #home #Banner-404 h2 span { padding-bottom:5px; } #home #Banner p, #home #Banner-404 p { /* position:relative; margin-right:100px; */ left:70px; top:35px; font-style:normal; font-size:13px; color:#eeeeee; } #sub #Banner { background:transparent url('images/banner_repeat_sub.png') repeat-x left top; height:115px; } #sub #Banner .inside { background:transparent url('images/banner_sub.png') no-repeat left top; padding:0 70px; } #sub #Banner h2 { color:#fff; font:normal 25pt Helvetica, Arial, sans-serif; padding-top:38px; } #sub #Banner h2 strong { color:#404041; } #portfolio #Banner { background:transparent url('images/banner_repeat_sub.png') repeat-x left top; height:115px; } #portfolio #Banner .inside { background:transparent url('images/banner_portfolio.png') no-repeat left top; height:100%; padding:56px 70px 0; top:-56px; } #portfolio #Banner h2 { color:#fff; font:normal 25pt Helvetica, Arial, sans-serif; padding-top:38px; } #portfolio #Banner h2 strong { color:#404041; } #Banner_contact { background:transparent url('images/banner_repeat_sub.png') repeat-x left top; height:115px; } #Banner_contact .inside { background:transparent url(images/banner_contact.png) no-repeat left top; height:100%; padding:56px 70px 0; top:-56px; } #Banner_contact h2 { color:#fff; font:normal 25pt Helvetica, Arial, sans-serif; padding-top:38px; } #Banner_contact h2 strong { color:#404041; } #Banner_about { background:transparent url('images/banner_repeat_sub.png') repeat-x left top; height:115px; } #Banner_about .inside { background:transparent url(images/banner_about.png) no-repeat left top; height:100%; padding:56px 70px 0; top:-56px; } #Banner_about h2 { color:#fff; font:normal 25pt Helvetica, Arial, sans-serif; padding-top:38px; } #Banner_about h2 strong { color:#404041; } #Banner_services { background:transparent url('images/banner_repeat_sub.png') repeat-x left top; height:115px; } #Banner_services .inside { background:transparent url(images/banner_services.png) no-repeat left top; height:100%; padding:56px 70px 0; top:-56px; } #Banner_services h2 { color:#fff; font:normal 25pt Helvetica, Arial, sans-serif; padding-top:38px; } #Banner_services h2 strong { color:#404041; } span.banner_smaller { font-size:22px; color:#414042; padding-left:10px; } /* @end */ /* @group Content */ #Content h3 span { border-bottom:1px solid #d5d7d8; padding-bottom:5px; border-style:none; } #Content h3 strong { color:#85ad35; font-weight:bold; } #Content blockquote { background:transparent url(images/cite1.jpg) no-repeat left top; display:block; float:right; padding:0 0 0 45px; font-style:italic; margin-bottom:20px; color:gray; } #Content blockquote .void { background:transparent url('images/blockquote_top.png') no-repeat left top; padding:10px 0 0; } #Content blockquote p { margin:0; background:url(images/cite2.jpg) no-repeat right bottom; padding-right:45px; } #Content .checkmarks_small ul { padding-left:20px; margin-bottom:40px; } #Content { margin-top:5px; overflow:hidden; } #home #Content .block { width:225px; margin-right:5px; margin-left:5px;/* margin-left:2%; padding-right:2%; */ } #Quote p { color:#8e8e8e; font-style:italic; margin:0 35px; } p.design-items { color:#b7b7b7; text-align:center; font-size:12px; } #Quote { height:90px; width:400px; position:absolute; bottom:0; right:0; } #Quote a.button { background:transparent url('images/get_a_quote.png') no-repeat left top; display:block; float:left; height:34px; margin:0 10px; overflow:hidden; text-indent:-9999px; width:133px; } #sub #Content .block { width:57%; margin-right:5%; padding-right:2%; } #sub #Content .end { width:33%; margin:0; } #Content h3 { font-weight:normal; font-size:20px; margin-bottom:20px; } #Content .checkmarks_small li { color:#b0b0b0; background:url(images/check_small.png) no-repeat left center; list-style-type:none; padding-left:20px; } h3.related { padding-top:25px; } /* @end */ /* @group Sidebar */ #Main ul.checkmarks li { margin:15px 0 30px; list-style-type:none; color:#414042; } ul.checkmarks { margin-left:0; padding-left:0; } #Main ul.checkmarks li em { font-style:normal; font-weight:bold; text-transform:uppercase; color:#85ad35; } li.ismart-learn { padding-left:100px; background:url(images/ismartlearn.gif) no-repeat 20px top; } li.ill-work { padding-left:100px; background:url(images/illustration-icon.png) no-repeat 15px top; } li.web-design { padding-left:100px; background:url(images/web-design-icon.png) no-repeat left top; } li.print-design { padding-left:100px; background:url(images/print-design-icon.png) no-repeat 5px top; } li.about-quote { padding-left:100px; } li.about-quote p { font-weight:bold; } #Main ul.docs { padding-left:30px; } #Main ul.docs li { color:#414042; list-style-image:url(images/doc.png); margin:15px 0; } #Main ul.docs li em { font-style:normal; font-weight:bold; text-transform:uppercase; color:#85ad35; } h3.web-design { background:url(images/web-design-icon.png) no-repeat center top; padding-top:80px; text-align:center; } h3.print-design { background:url(images/print-design-icon.png) no-repeat center top; padding-top:80px; text-align:center; } h3.ill-work { background:url(images/illustration-icon.png) no-repeat center top; padding-top:80px; text-align:center; } h3.ismart-learn { background:url(images/ismartlearn.gif) no-repeat center top; padding-top:80px; text-align:center; } h4.cite { clear:both; text-align:right; } .cite em { font-weight:bold; font-size:110%; color:#85ad35; } .cite { text-align:left; clear:both; font-size:70%; padding-left:48px; color:#b7b7b7; } div#services { padding-top:40px; border-top:2px dotted #d8d8d8; margin-top:40px; } h3.contat-block { margin-top:40px; padding-top:40px; border-top:2px dotted #d8d8d8; } ul.checkmarks_small { padding-left:20px; margin-top:20px; } /* @end */ /* @group Footer */ #Footer { background:#262728 url('images/footer_repeat.png') repeat-x left top; color:#878787; padding-top:90px; padding-bottom:50px; overflow:hidden; border-style:none; } #Footer .block { margin-right:2%; width:23%; border-style:none; } #Footer h4 { color:#aecf66; font:normal 13pt Helvetica, Arial, sans-serif; } #Footer a { color:#878787; } #Footer a:hover { color:white; } #Footer ul { padding-left:0; } #Footer ul li { list-style-type:none; } #Footer ul li a { color:#fff; } li.twitter a { width:84px; text-indent:-9999px; background:url(images/twitter.png) no-repeat 0 0; display:block; overflow:hidden; height:17px; margin-bottom:15px; margin-top:20px; } li.twitter a:hover { background:url(images/twitter.png) no-repeat 0 -17px; width:84px; height:17px; } li.linkedin a { width:86px; text-indent:-9999px; background:url(images/linkedin.png) no-repeat 0 0; display:block; overflow:hidden; height:19px; margin-bottom:15px; } li.linkedin a:hover { background:url(images/linkedin.png) no-repeat 0 -19px; width:86px; height:19px; } li.behance a { width:151px; text-indent:-9999px; background:url(images/behance.png) no-repeat 0 0; display:block; overflow:hidden; height:12px; } li.behance a:hover { background:url(images/behance.png) no-repeat 0 -12px; width:151px; height:12px; } /* @end */ /* @group Portfolio */ #portfolio #Content .block { width:100%; } #portfolio #Content .end { width:27%; float:right; margin:0; } #portfolio #Content .block_int { width:640px; margin-right:4%; float:left; } #portfolio #Content .block_end_int { width:27%; float:right; margin:0; } #portfolio #Content h3 { margin-bottom:20px; margin-left:0; margin-right:0; color:#404041; clear:both; } ul.portfolio_nav { padding-left:0; margin-top:0; margin-bottom:40px; display:inline; width:100%; } .portfolio_nav li { float:left; list-style-type:none; display:block; padding-right:10px; margin-right:11px; } .portfolio_nav li a.current { background:url(images/check.png) no-repeat left top; float:left; padding-left:25px; text-decoration:none; } .portfolio_nav li a { text-decoration:none; } .portfolio_nav li h5 { font-size:17px; font-weight:normal; font-style:normal; } ul.port_list { list-style:none; margin:0 0 2px; padding-left:0; clear:both; } ul.port_list { margin-bottom:0 !important; } ul.port_list li { width:210px; float:left; margin:30px 25px 0 0; } .port_list .port_thumb { } .port_list img, .port_list a:link img { margin-bottom:4px; float:left; padding:5px; background-color:#eaeaea; border:1px solid #c8c8c8; } .port_list a { color:gray; font-style:normal; font-weight:normal; text-decoration:none; } .port_list a:hover img { background-color:#ddf0ae; } .port_list a:hover { color:#85ad35; font-style:normal; font-weight:normal; text-decoration:none; } li.port_thumb p { font-size:11px; margin-top:0; color:#a3a3a3; } /* aed067 - actual green 28AEF7 */ span.bold { font-weight:bold; color:#28AEF7; margin-left:5px; } span.bold1 { font-weight:bold; color:#a8AEF7; margin-left:5px; } #portfolio #Content #tabs { overflow:hidden; } #tab-panes { background-color:#e8e8e8; border:1px solid #c5c6c8; height:514px; overflow:hidden; } #tabs.js-enabled #tab-panes { overflow:visible; } #tab-panes img { padding:7px; } #tabs #tab-panels { border:1px solid #c5c6c8; border-top:0; overflow:hidden; background:url(images/tab_repeat.jpg) repeat-x; } #tab-panels ul { list-style:none; margin:0; padding-left:20px; float:right; } #tab-panels li { float:left; margin:0; } #tab-panels li a { border-left:1px solid #c5c6c8; color:#888a8c; display:block; padding:5px 0; text-align:center; text-decoration:none; width:30px; font-weight:bold; } #tab-panels li a:hover, #tab-panels li.current a { color:#85ad35; } #tab-panels h5 { background:url('images/accordion_closed.jpg') no-repeat right 55%; color:#8d9092; float:right; font-size:10pt; line-height:29px; padding-right:20px; } #Content #port_nav h3 { color:#404041; margin:0 0 10px; } #port_nav ul { padding-left:20px; margin-bottom:10px; } #port_nav li { list-style:none; color:#a3a3a3; padding-left:20px; background:url(images/check_small.jpg) no-repeat left 3px; padding-bottom:5px; } #port_nav h4 { font-weight:bold; font-size:10.5pt; color:#85ad35; } #port_nav li a { padding-bottom:5px; } #port_nav li a:hover { color:#404041; } /* @end */ /* @group About */ h3.meet_about { margin-top:40px; padding-top:30px; border-top:2px dotted #d8d8d8; } #ryan { background:url(images/ryan.png) no-repeat left top; padding-left:120px; margin-bottom:30px; padding-right:2px; } #ryan p { font-size:9pt; } #ryan h4 { font-size:11pt; color:#a4c155; } #carmen { background:url(images/carmen.png) no-repeat left top; padding-left:120px; margin-bottom:30px; padding-right:20px; } #carmen p { font-size:9pt; } #carmen h4 { font-size:11pt; color:#a4c155; } .pullout { color:#85ad35; font-size:100%; line-height:120%; font-style:italic; font-weight:bold; } strong { font-size:110%; } #testimonials .testimonial { display:none; } #testimonials .active { display:block; } #testimonials .buttons { margin:5px 45px; overflow:hidden; } #testimonials .buttons a { background:url('images/prev_next.png') no-repeat center center; display:block; float:left; height:26px; text-indent:-9999px; overflow:hidden; width:28px; } #testimonials .buttons .prevButton { background-position:0 0; } #testimonials .buttons .nextButton { background-position:0 -26px; margin-left:8px; } /* @end */ /* @group Buttons */ #Main a.button-LearnMore, #Port-sub a.button-LearnMore { background:transparent url('images/button_LearnMore.png') no-repeat 0 0; display:block; height:26px; overflow:hidden; text-indent:-9999px; width:100px; } #Main a:hover.button-LearnMore, #Port-sub a:hover.button-LearnMore { background:transparent url('images/button_LearnMore.png') no-repeat 0 -26px; } #Main a.button-LaunchSite, #Port-sub a.button-LaunchSite { background:transparent url('images/button_LaunchSite.png') no-repeat left top; display:block; height:26px; overflow:hidden; text-indent:-9999px; width:100px; margin-bottom:80px; } #Main a.button-BackList, #Port-sub a.button-BackList { background:transparent url(images/button_back.png) no-repeat left top; display:block; height:26px; overflow:hidden; text-indent:-9999px; width:100px; margin-bottom:30px; margin-top:30px; } #Main a:hover.button-BackList, #Port-sub a:hover.button-BackList { background:transparent url(images/button_back.png) no-repeat 0 -26px; } #Main a.button-Web { background:transparent url(images/button_web.png) no-repeat 0 0; display:block; height:26px; overflow:hidden; text-indent:-9999px; width:186px; margin-bottom:30px; margin-left:5px; } #Main a:hover.button-Web { background:transparent url(images/button_web.png) no-repeat 0 -26px; } #Main a.button-Print { background:transparent url(images/button_print.png) no-repeat 0 0; display:block; height:26px; overflow:hidden; text-indent:-9999px; width:186px; margin-bottom:30px; margin-left:5px; } #Main a:hover.button-Print { background:transparent url(images/button_print.png) no-repeat 0 -26px; } #Main a.button-Illustration { background:transparent url(images/button_ill.png) no-repeat 0 0; display:block; height:26px; overflow:hidden; text-indent:-9999px; width:186px; margin-bottom:30px; margin-left:5px; } #Main a:hover.button-Illustration { background:transparent url(images/button_ill.png) no-repeat 0 -26px; } #Main a.button-Branding { background:transparent url(images/button_id.png) no-repeat 0 0; display:block; height:26px; overflow:hidden; text-indent:-9999px; width:186px; margin-bottom:30px; margin-left:5px; } #Main a:hover.button-Branding { background:transparent url(images/button_id.png) no-repeat 0 -26px; } #Main a.button-port-nav-brand { background:transparent url(images/port-nav-brand.png) no-repeat 0 0; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } #Main a:hover.button-port-nav-brand { background:transparent url(images/port-nav-brand.png) no-repeat 0 -31px; } #Main a.button-port-nav-brand-current { background:transparent url(images/port-nav-brand.png) no-repeat 0 -31px; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } #Main a.button-port-nav-ill { background:transparent url(images/port-nav-ill.png) no-repeat 0 0; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } #Main a:hover.button-port-nav-ill { background:transparent url(images/port-nav-ill.png) no-repeat 0 -31px; } #Main a.button-port-nav-ill-current { background:transparent url(images/port-nav-ill.png) no-repeat 0 -31px; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } #Main a.button-port-nav-web { background:transparent url(images/port-nav-web.png) no-repeat 0 0; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } #Main a:hover.button-port-nav-web { background:transparent url(images/port-nav-web.png) no-repeat 0 -31px; } #Main a.button-port-nav-web-current { background:transparent url(images/port-nav-web.png) no-repeat 0 -31px; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } #Main a.button-port-nav-print { background:transparent url(images/port-nav-print.png) no-repeat 0 0; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } #Main a:hover.button-port-nav-print { background:transparent url(images/port-nav-print.png) no-repeat 0 -31px; } #Main a.button-port-nav-print-current { background:transparent url(images/port-nav-print.png) no-repeat 0 -31px; display:block; height:32px; overflow:hidden; text-indent:-9999px; width:146px; } /* @end */ /* @group Process */ #Content .process { margin-right:2%; width:23%; float:left; } #Content .process_end { width:23%; float:left; } #Content .process_inside { clear:both; border-top:2px dotted #d8d8d8; padding-top:30px; margin-top:30px; } p.process_intro { color:#a3a3a3; margin-top:5px; } h4.process_1 { background:url(images/process_1.png) no-repeat left top; height:28px; padding-left:36px; padding-top:5px; color:#a4c155; font-size:16px; } h4.process_2 { background:url(images/process_2.png) no-repeat left top; height:28px; padding-left:36px; padding-top:5px; color:#a4c155; font-size:16px; } h4.process_3 { background:url(images/process_3.png) no-repeat left top; height:28px; padding-left:36px; padding-top:5px; color:#a4c155; font-size:16px; } h4.process_4 { background:url(images/process_4.png) no-repeat left top; height:28px; padding-left:36px; padding-top:5px; color:#a4c155; font-size:16px; } p.process_main_intro { color:#a3a3a3; margin-top:0; padding-left:30px; margin-bottom:21px; } h4.process_main_1 { background:url(images/process_1_small.png) no-repeat left top; height:20px; padding-left:30px; color:#85ad35; font-size:10pt; font-weight:bold; text-transform:uppercase; } h4.process_main_2 { background:url(images/process_2_small.png) no-repeat left top; height:20px; padding-left:30px; color:#85ad35; font-size:10pt; font-weight:bold; text-transform:uppercase; } h4.process_main_3 { background:url(images/process_3_small.png) no-repeat left top; height:20px; padding-left:30px; color:#85ad35; font-size:10pt; font-weight:bold; text-transform:uppercase; } h4.process_main_4 { background:url(images/process_4_small.png) no-repeat left top; height:20px; padding-left:30px; color:#85ad35; font-size:10pt; font-weight:bold; text-transform:uppercase; } /* @end */ /* @group Forms */ #contactform { background-color:#f8f8f8; padding:20px 30px 30px; border:1px solid #dedede; } #payPalForm { background-color:#f8f8f8; padding:30px; border:1px solid #dedede; } /* @end */ /*--Main Image Preview--*/ .main_image { width: 855px; height: 270px; float: left; background: #333; position: relative; overflow: hidden; color: #fff; } .main_image h2 { font-size: 2em; font-weight: normal; margin: 0 0 5px; padding: 10px; } .main_image p { font-size: 1.2em; padding: 10px; margin: 0; line-height: 1.6em; } .bblock small { padding: 0 0 0 20px; background: url(icon_calendar.gif) no-repeat 0 center; font-size: 1em; } .main_image .bblock small {margin-left: 10px;} .main_image .desc{ position: absolute; bottom: 0; left: 0; width: 100%; display: none; } .main_image .bblock{ width: 100%; background: #111; border-top: 1px solid #000; } .main_image a.collapse { background: url(images/bannerimages/btn_collapse.gif) no-repeat left top; height: 27px; width: 93px; text-indent: -99999px; position: absolute; top: -27px; right: 20px; } .main_image a.show {background-position: left bottom;} .image_thumb { float: left; width: 83px; background: #f0f0f0; border-right: 1px solid #fff; border-top: 1px solid #ccc; } .image_thumb img { border: 1px solid #ccc; padding: 2px; background: #fff; float: left; margin-left:4px; } .image_thumb ul { margin: 0; padding: 0; list-style: none; } .image_thumb ul li{ margin: 0; padding: 3px 10px; background: #f0f0f0 url(nav_a.gif) repeat-x; width: 60px; float: left; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; padding:4px 11px; border-right: 1px solid #ccc; } .image_thumb ul li.hover { background: #ddd; cursor: pointer; } .image_thumb ul li.active { background: #fff; cursor: default; } html .image_thumb ul li h2 { font-size: 1.5em; margin: 5px 0; padding: 0; } .image_thumb ul li .bblock { /*float: left; */ margin-left: 15px; padding: 0; /* width: 118px; */ } .image_thumb ul li p{display: none;width:1px !important} /* added by sundar a.mopen { background: #454545 !important; } */ /* products page */ .flist li { color:#565656; font-weight:bold; } h5 { font-weight:bold; } h2.subhead { font-size:220%; color:#8aa812; font-weightx:bold; padding-left:5px; padding-top:5px; } .islVideo { height: 40px; }