/* Theme Name: Tangelo Theme URI: http://itangelo.com Description: Custom Theme for Tangelo Version: 1.0 Author: Tangelo Author URI: http://itangelo.com Tags: simple, red, black, white */ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*----------------------------------------- TANGELO ---------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Reset Styles -----------------------------------------------------------*/ 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, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:transparent;} ol, ul {list-style:none;} h1, h2, h3, h4, h5, h6, li {line-height:100%;} blockquote, q {quotes:none;} table {border-collapse:collapse; border-spacing:0;} input, textarea, button {font-family:inherit; font-size:1em;} /*- End Reset Styles -------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- General Styles ---------------------------------------------------------*/ body {font:100% 'Helvetica Neue', Helvetica, Arial, sans-serif; background:#FFF;} .wrap {width:940px; margin:0 auto;} /*- Float Clears -*/ .wrap, #menu ul, #slideNav, #sectionInfo, .aboutItem, .service, .person, #contactForm p, #extras {overflow:hidden;} /*- Hidden Text -*/ #logo h1 a, #slideNav a {display:block; font-size:0; text-indent:-9999em;} /*- Links -*/ a {text-decoration:none;} /*- Accesible labels -*/ .accesible, #search button {position:absolute; top:0; left:-9999em; z-index:1; width:0; height:0; overflow:hidden;} /*- Rounded Corners -*/ #contactUs a, .more, #twitterMsg {border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;} #retweet {border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;} #blogFeed #feedTime a {border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;} /*- Top Anchor -*/ .topAnchor {color:#F43E42; padding-left:12px; background:url(images/arrows/top-arrow.gif) no-repeat 0 0;} .topAnchor:hover {color:#000; text-decoration:underline; background-position:0 -341px;} /*- Section subtitles -*/ .subTitle {float:left; width:295px; padding:30px 0 0 25px; font-weight:normal; font-size:1.1em; background:url(images/dots/dot-black-big.gif) no-repeat 0 31px;} /*- End General Styles -----------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Header -----------------------------------------------------------------*/ #header {padding:25px 0 0;} /*- Logo -*/ #logo {float:left; margin-right:150px;} #logo h1 {} #logo h1 a {width:184px; height:38px; background:url(images/bgs/logo.gif) no-repeat 0 0;} /*- Menu -*/ #menu {float:left; width:408px; margin-top:5px;} #menu ul {padding:0 10px; background:#EEE;} #menu li {float:left; font-size:0.85em; margin-right:10px;} #menu .current_page_item a {color:#EF3E42; background:#FFF;} #menu a {display:block; padding:7px 10px; color:#000; font-weight:bold;} #menu a:hover {color:#FFF; background:#EF3E42;} /*- Search -*/ #search {float:right; width:210px; padding:8px 0 0;} #search input {float:right; width:130px; font-size:0.7em; color:#F43E42; padding:2px 6px; outline:0;} /*- Phone -*/ #phone {float:right;} #phone p {font-weight:bold; padding:8px 0;} /*- End Header -------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Main Content -----------------------------------------------------------*/ #main {} .home #main {background:url(images/bgs/main.gif) no-repeat -17px 54px;} /*- For Inner Pages -*/ #sectionInfo {padding:30px 0; border-bottom:1px solid #1A1A1A;} #sectionInfo h2, #sectionInfo p, #sectionInfo ul {float:left; width:320px; clear:left;} /*- Title and Description -*/ #sectionInfo h2, #sectionInfo p {font-size:1.1em;} #sectionInfo h2 {font-weight:normal;} #sectionInfo p {color:#EF3E42; padding-top:15px;} /*- Content List -*/ #sectionInfo ul {width:220px; clear:none; margin-top:-20px; } #sectionInfo li {font-size:0.8em; border-bottom:1px solid #000;} #sectionInfo li a {display:block; padding:6px 0 4px 30px; color:#000; background:url(images/arrows/left-arrow-black.gif) no-repeat 5px 7px;} #sectionInfo li a:hover {color:#EF3E42;} /*- End Main Content -------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- PAGE: HOME -------------------------------------------------------------*/ /*-------------------------------*/ /* TAGLINE */ /*-------------------------------*/ #tagline {width:500px; padding:85px 0 0 333px;} #tagline h2 {font-size:3.3em; letter-spacing:-0.05em; color:#F43E42;} #tagline h2 strong {color:#333;} /*-------------------------------*/ /* SLIDER */ /*-------------------------------*/ #slideshow {width:612px; margin-top:40px; position:relative;} /*- JS -*/ .slideMe {position:relative;} .slideMe .wrapper {overflow:hidden; position:absolute; top:0; left:0;} .slideMe .wrapper ul {width:32700px; position:absolute; top:0; left:0;} .slideMe .wrapper ul li {float:left;} .arrow, #start-stop {display:none;} /*- Iphone Slide -*/ #iphone {width:260px; height:460px !important; margin-right:20px; background:url(images/bgs/iphone.png) no-repeat 0 0; position:absolute; left:0; top:-260px; z-index:1;} #iphone .wrapper {left:31px; top:73px;} #iphone .wrapper, #iphone .wrapper li, #iphone .wrapper img {display:block; width:198px; height:290px;} #iphone .screenshot .wrapper {top:0; left:0;} /*- Apps -*/ #apps {width:250px; height:150px; margin:0 60px 0 335px;} #apps .wrapper ul {width:2000px;} #apps .wrapper, #apps .wrapper li {width:550px; height:150px;} #apps li {position:relative;} #apps h3 {color:#F43E42; padding-bottom:8px;} #apps p {font-size:0.8em; line-height:140%; color:#666; padding:0 140px 5px 0;} #apps p a {color:#666; text-decoration:underline; font-style:italic;} #apps p a:hover {color:#333;} #apps img {position:absolute; top:0; right:0; z-index:1;} /*- Circular buttons -*/ #slideNav {width:655px; padding:20px 0 0 65px; margin:20px 0 20px 270px; border-top:1px solid #DADADA;} #slideNav a {float:left; width:14px; height:14px; margin-right:5px; background:url(images/buttons/nav.png) no-repeat 0 0;} #slideNav a.navCurrent {background-position:0 -14px;} /*-------------------------------*/ /* CONTACT US */ /*-------------------------------*/ #contactUs {margin-left:320px; clear:both;} #contactUs a {float:left; width:360px; color:#FFF; margin-top:7px; background:#CD2E30 url(images/buttons/red-gradient.png) repeat-x 0 0; border:1px solid #EF3E42;} #contactUs a:hover {background:#F06569 url(images/buttons/red-gradient-hover.png) repeat-x 0 0;} #contactUs a em {font-style:normal; padding:8px 10px 7px 60px; float:left; background:url(images/buttons/envelope.png) no-repeat 10px 6px;} #contactUs a span {float:right; padding:8px 30px 7px 10px;} #contactUs strong {float:right; font-size:1.6em; font-weight:normal; padding:7px 25px;} /*-------------------------------*/ /* SERVICES */ /*-------------------------------*/ #homeServices {clear:both; padding:10px 0 0; min-height:250px; position:relative;} #homeServices li {clear:both;} #homeServices li h3 {width:276px; padding:12px 12px 10px 32px; font-weight:normal; color:#999; cursor:pointer;} #homeServices li h3:hover {color:#EF3E42; background:url(images/dots/dot-red-big.gif) no-repeat 10px center;} #homeServices li div {width:580px; padding:20px 20px 35px; min-height:210px; font-size:1.5em; line-height:130%; position:absolute; top:10px; right:0; z-index:1; color:#FFF; background:#EF3E42;} #homeServices li .more {float:left; color:#EF3E42; font-size:0.7em; margin-top:10px; width:270px; background:#1C1C1C url(images/buttons/black-gradient.png) repeat-x 0 0; border:1px solid #333;} #homeServices li .more:hover {background:#4C4C4D url(images/buttons/black-gradient-hover.png) repeat-x 0 0;} #homeServices li .more strong {display:block; padding:4px 10px 4px 55px; background:url(images/buttons/tick.png) no-repeat 10px 6px;} /*- Selected Item -*/ #homeServices .selected {} #homeServices .selected h3 {color:#FFF !important; background:#EF3E42 url(images/dots/dot-white-big.gif) no-repeat 10px center !important;} /*-------------------------------*/ /* EXTRAS */ /*-------------------------------*/ #extras {clear:both; margin:50px 0 0; border-top:1px solid #000;} #extras h4 {color:#F43E42; padding:20px 20px 10px; background:url(images/dots/dot-red-small.gif) no-repeat 0 24px;} /*- Twitter Updates -*/ #twitterUpdates {float:left; width:320px;} #twitterUpdates p {font-size:0.8em;} /*- Message -*/ #twitterMsg {font-style:italic; color:#486D72; padding:20px 40px 20px 20px; background:#DDEEF6; position:relative;} #twitterMsg a {color:#224466; text-decoration:underline;} #twitterMsg a:hover {color:#000;} #twitterMsg .twitter-timestamp {display:block; padding-top:10px; color:#666;} #twitterMsg #retweet {display:block; font-size:0.8em; font-weight:bold; font-style:normal; text-decoration:none; text-transform:uppercase; color:#333; text-shadow:1px 1px #FFEA62; padding:5px; line-height:100%; background:#FFAA22 url(images/twitter/btn.png) repeat-x 0 0; border:1px solid #FFAA22; position:absolute; bottom:17px; right:17px; z-index:1;} #twitterMsg #retweet:hover {color:#000;} #twitterHidden {display:none;} /*- Follow Link -*/ #twitterFollow {text-align:right; padding:14px 0; background:url(images/twitter/bird.gif) no-repeat 0 0;} #twitterFollow a {color:#333; text-decoration:underline;} #twitterFollow a:hover {color:#000;} /*- Blog Feed -*/ #blogFeed {float:right; width:600px;} #blogFeed ul {padding-left:20px;} #blogFeed h5 {font-size:0.9em;} #blogFeed h5 a {color:#333;} #blogFeed h5 a:hover {color:#000; text-decoration:underline;} #blogFeed #feedTime {font-size:0.7em; color:#999; padding:3px 0 10px;} #blogFeed #feedTime a {color:#FFF; background:#CCC; padding:1px 5px; margin-left:3px; font-weight:bold;} #blogFeed #feedTime a:hover {background:#F43E42;} #blogFeed #feedExcerpt {font-size:0.8em; font-style:italic; color:#333; line-height:130%;} #blogFeed #feedExcerpt p {display:none;} #blogFeed #feedExcerpt a {color:#F43E42;} #blogFeed #readMore {font-weight:bold; font-size:0.8em; font-style:italic; text-align:right; padding:19px 25px 0 0;} #blogFeed #readMore a {color:#F43E42; text-decoration:underline;} #blogFeed #readMore a:hover {color:#000;} /*- End PAGE: HOME ---------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- PAGE: SERVICES (LIST) --------------------------------------------------*/ .service {clear:both;} .service.last .serviceData {border:0;} .sBrief, .sExtended {float:left; width:430px;} .serviceData {float:left; width:620px; line-height:140%; padding:30px 0 40px; border-bottom:1px solid #EF3E42;} /*- Excerpt -*/ .sBrief { color:#EF3E42; font-size:1.1em; padding-left:30px; background:url(images/arrows/left-arrow-red.gif) no-repeat 0 3px;} /*- Content -*/ .sExtended {clear:both; font-size:0.8em; margin:15px 30px 0;} .sExtended p {padding-bottom:10px;} /*- Applied to -*/ .sApplication {float:right; width:120px; font-size:0.8em; color:#EF3E42; line-height:120%; padding-top:3px;} .sApplication em {display:block; padding:0 0 25px 12px; font-style:normal; background:url(images/dots/dot-red-small.gif) no-repeat 0 3px;} /*- End PAGE: SERVICES (LIST) ----------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- PAGE: CLIENT (LIST) ----------------------------------------------------*/ .client {float:left; width:175px; padding:30px 30px 0;} .client h3 {text-align:center;} .client span {display:block; padding-top:15px; font-size:0.8em; font-weight:normal;} .client a {color:#EF3E42;} .client a:hover span {color:#000; text-decoration:underline;} /*- End PAGE: CLIENT (LIST) ------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- PAGE: CLIENT (SINGLE) --------------------------------------------------*/ /*- Data -*/ #projectData {float:left; width:320px; padding-top:72px; font-size:0.8em;} #projectData li {padding:0 0 10px 12px; color:#E4232F; background:url(images/dots/dot-red-small.gif) no-repeat 0 3px;} #projectData span {color:#000;} #projectData a {font-weight:bold; color:#E4232F;} #projectData a:hover {color:#000; text-decoration:underline;} /*- Information -*/ #projectInfo {float:right; width:620px; padding:30px 0 0; position:relative;} #projectInfo h3 {font-size:1.3em; padding-bottom:20px;} #projectInfo h4, #projectInfo h5 {font-weight:normal; width:500px;} #projectInfo h4 {font-size:0.95em; line-height:120%; padding-bottom:25px;} #projectInfo h5 {color:#E4232F; font-size:0.9em; padding:15px 0; margin-top:15px; border-top:1px solid #000;} #projectInfo p, #projectInfo li {font-size:0.8em; line-height:140%; width:500px;} #projectInfo ul li {padding:0 0 10px 12px; background:url(images/dots/dot-black-small.gif) no-repeat 0 6px;} #projectInfo ul li ul {padding:5px 0 0;} #projectInfo ul li ul li {font-size:1em; width:auto; margin-left:40px; background:url(images/dots/dot-red-small.gif) no-repeat 0 6px;} /*- Gallery -*/ #projectGallery .gallery {width:320px; padding-top:10px;} #projectGallery .gallery-item {float:left; margin:0 10px 10px 0;} #projectGallery .gallery-item a {display:block; border:1px solid #DDD;} #projectGallery .gallery-item a:hover {border-color:#999;} /*- Iphone -*/ .single-clients #projectGallery #iphone {position:relative; top:auto; left:auto; margin-top:20px;} .single-clients #projectGallery #iphone ul li {padding:0;} .single-clients #projectGallery #iphone ul li.screenshot {background:none;} .single-clients #projectGallery #iphone ul li.screenshot .wrapper {left:31px; top:73px;} /*- End PAGE: CLIENT (SINGLE) ----------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- PAGE: ABOUT ------------------------------------------------------------*/ .aboutItem {} .aboutItem.last .pageContent {border:0;} .pageContent {float:left; width:620px; padding:0 0 40px; border-bottom:1px solid #EF3E42;} /*--------------------------*/ /* ABOUT US */ /*--------------------------*/ #aboutUs {} #aboutUs .pageContent {padding-top:30px;} #aboutUs p {padding-bottom:15px; width:450px; font-size:0.8em;} /*--------------------------*/ /* STAFF */ /*--------------------------*/ .person {line-height:140%; padding:30px 0 10px; border-bottom:1px solid #000;} .person.last {border:0;} /*- Name -*/ .person h4 {font-weight:normal; padding-bottom:15px; cursor:pointer;} .person h4 span {color:#EF3E42;} .person h4 em {font-style:normal; font-size:0.8em;} /*- Info -*/ .personInfo {float:left; width:450px; font-size:0.8em;} .personInfo p {padding-bottom:15px;} /*- Data -*/ .personData {float:right; width:150px; font-size:0.8em;} .personData ul {padding-bottom:20px;} .personData li {padding:0 0 10px 15px; background:url(images/bgs/plus.gif) no-repeat 0 4px;} .personData a {color:#EF3E42;} .personData a:hover {color:#000; text-decoration:underline;} /*- End PAGE: ABOUT --------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- PAGE: CONTACT ----------------------------------------------------------*/ .page-id-6 {} .page-id-6 #sectionInfo, #contactInfo {float:left; border:0; width:320px;} #contactInfo {clear:left;} #contactInfo p {font-size:0.8em; padding-bottom:15px;} #contactInfo a {color:#F43E42;} #contactInfo a:hover {color:#000; text-decoration:underline;} #contactForm {float:right; width:580px; padding-top:30px;} #contactForm p {clear:both; padding-bottom:20px;} #contactForm label {float:left; width:110px; padding-top:5px; font-size:0.8em; font-weight:bold;} #contactForm input, #contactForm textarea {width:250px; float:left; font-size:0.8em; padding:5px; border:1px solid #000;} #contactForm span.wpcf7-not-valid-tip {display:block; position:static; clear:both; color:#C00; border:0; padding:0 0 0 110px;} #contactForm div.wpcf7-response-output {font-size:0.8em; width:250px; margin:0 0 0 110px;} #contactForm #sendForm {padding-left:110px;} #contactForm #sendForm input {font-size:1.1em; width:auto; padding:0 0 0 23px; cursor:pointer; border:0; background:url(images/arrows/left-arrow-black-2.gif) no-repeat 0 7px;} /*- End PAGE: CONTACT ------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- PAGE: SEARCH -----------------------------------------------------------*/ .search .pageContent {padding-top:30px;} .searchResult .subTitle a {color:#EF3E42;} .searchResult .subTitle a:hover {color:#000; text-decoration:underline;} .searchResult.last .pageContent {border:0;} .search .pageContent h4, .search .pageContent h5, .search .pageContent li, .search .pageContent p {font-size:0.8em; padding-bottom:15px;} /*- End PAGE: SEARCH -------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*- Footer -----------------------------------------------------------------*/ #footer {clear:both; padding:25px 0 50px; margin-top:60px; background:#FFF; border-top:2px solid #1A1A1A;} #footer .fBox {float:left; width:450px;} #footer h4 {color:#1A1A1A; font-size:0.95em; padding-bottom:25px;} #footer p, #footer li {font-size:0.75em; line-height:140%;} #footer p {float:left; width:200px; padding:0 25px 0 0;} #footer li {margin:0 10px 4px 13px; list-style:disc; color:#F43E42;} #footer a {color:#F43E42;} #footer a:hover {color:#000; text-decoration:underline;} /*- End Footer -------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-------------------------------------- END TANGELO --------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ /*-----------------------------------------------------------------------------------------------*/ #topBar { background: #EF3E42; left: 0px; padding: 10px 0px; /*position: fixed;*/ top: 0px; width: 100%; margin-bottom: 0px; /*z-index: 3;*/ } #topBar h1 { float: left; } #topBar h1 a { /*background: url(http://www.itangelo.com/wp-content/themes/tangelo/images/TSH_logo.png) no-repeat 0px 0px; height: 35px; width: 265px;*/ overflow: hidden; /*text-indent: -9000px;*/ display: block; font-size: 1em; } .clear {clear: both;} #topBar p { float: left; font-size: 1em; font-weight: bold; color: white; text-shadow: #24757E 0px -1px; margin: 5px 10px 7px 0; } #topBar p span{ text-shadow:none; font-size: 0.8em; font-weight: normal; color: #222; } #topBar p strong{ text-shadow:none; font-size: 1em; color: #222; } #topBar p a.btn { font-size: 0.9em; text-decoration: none; text-shadow: #000 0px -1px; color: white; font-weight: bold; letter-spacing: 0.02em; padding: 5px 15px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#333333)); -webkit-box-shadow: black 0px 0px 3px; box-shadow: black 0px 0px 3px; margin: 0 15px; border-bottom-left-radius: 12px 12px; border-bottom-left-radius: 12px 12px; border-bottom-right-radius: 12px 12px; border-bottom-right-radius: 12px 12px; border-top-left-radius: 12px 12px; border-top-left-radius: 12px 12px; border-top-right-radius: 12px 12px; border-top-right-radius: 12px 12px; }