/*
Theme Name: VCARD
Description: Designed by josweb.
Version: 1
Author: Jo
*/
/* TOC
........................................................................................................................................ */
01. ACCORDIAN
1. General
2. Rounded Corners
3. Grey Theme
02. TYPOGRAPHY & STYLING
a. Font Replacement
b. Headings & Links
c. Columns & Styling
03. PAGES
1. Skills
2. Social
3. Contact
4. Google Map
*/
/* 1. ACCORDIAN
........................................................................................................................................ */
/* 1: General */
.accordion { text-align: left; }
.accordion ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; }
.accordion li > h2 { font-weight: normal; margin: 0; z-index: 2;position: absolute; top: 0; left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg); -moz-transform-origin: right top; -o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg);
transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }
.accordion li > h2 span { display: block; padding-right: 8%;
text-align: right; height: 90%; margin-top: 5px;}
.accordion li > h2 b { display: inline-block; position: absolute; top: 10%;
top: 42%\9; left: 10%; left: 5%\9; text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg); -o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
.accordion li > h2:hover { cursor: pointer; color:#555;}
.accordion li > div { height: 100%; position: absolute; top:
0; z-index: 1; overflow: hidden; background: white; }
.accordion noscript p { padding: 10px; margin: 0; background: white; }
/* 2: Rounded Corners */
.rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
/* 2. TYPOGRAPHY
........................................................................................................................................ */
/* A: FONT REPLACEMENT */
@font-face {
font-family: 'DroidSansRegular';
src: url('/themes/gray_vcard/font/DroidSans-webfont.eot');
src: url('/themes/gray_vcard/font/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('/themes/gray_vcard/font/DroidSans-webfont.woff') format('woff'),
url('/themes/gray_vcard/font/DroidSans-webfont.ttf') format('truetype'),
url('/themes/gray_vcard/font/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSansBold';
src: url('/themes/gray_vcard/font/DroidSans-Bold-webfont.eot');
src: url('/themes/gray_vcard/font/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/themes/gray_vcard/font/DroidSans-Bold-webfont.woff') format('woff'),
url('/themes/gray_vcard/font/DroidSans-Bold-webfont.ttf') format('truetype'),
url('/themes/gray_vcard/font/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerifRegular';
src: url('/themes/gray_vcard/font/DroidSerif-Regular-webfont.eot');
src: url('/themes/gray_vcard/font/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/themes/gray_vcard/font/DroidSerif-Regular-webfont.woff') format('woff'),
url('/themes/gray_vcard/font/DroidSerif-Regular-webfont.ttf') format('truetype'),
url('/themes/gray_vcard/font/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerifItalic';
src: url('/themes/gray_vcard/font/DroidSerif-Italic-webfont.eot');
src: url('/themes/gray_vcard/font/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('/themes/gray_vcard/font/DroidSerif-Italic-webfont.woff') format('woff'),
url('/themes/gray_vcard/font/DroidSerif-Italic-webfont.ttf') format('truetype'),
url('/themes/gray_vcard/font/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BallparkWeiner';
src: url('/themes/gray_vcard/font/ballpark_weiner-webfont.eot');
src: url('/themes/gray_vcard/font/ballpark_weiner-webfont.eot?#iefix') format('embedded-opentype'),
url('/themes/gray_vcard/font/ballpark_weiner-webfont.woff') format('woff'),
url('/themes/gray_vcard/font/ballpark_weiner-webfont.ttf') format('truetype'),
url('/themes/gray_vcard/font/ballpark_weiner-webfont.svg#BallparkWeiner') format('svg');
font-weight: normal;
font-style: normal;
}
/* B: HEADING */
/* your name */
h1 { font: normal 42px 'BallparkWeiner', Arial, sans-serif; color: #222; text-align: center; text-shadow: 0px 1px 0px #fcfcfc; margin: 0px 0px; }
/* what you do */
.page-title {text-transform: uppercase; font: normal 11px 'DroidSansRegular', Arial, sans-serif; color: #222; text-align: center; margin: 0px 0px 10px 0px; }
/* INTRO */
/* page headings */
h3 { font: normal 22px 'DroidSerifRegular', Arial, sans-serif; color: #333;
background: url(/themes/gray_vcard/images/line.png) bottom repeat-x; padding: 0px 0px 5px 0px; margin: 0px 0px; }
/* italic headings */
.intro { font: normal 14px/1.6em 'DroidSerifItalic', Arial, sans-serif; color: #666; margin: 10px 0 20px 0;}
/* SUB HEADS */
h4 { font: 14px 'DroidSerifRegular', Arial, sans-serif; color: #333; letter-spacing: 0.01em;
background: url(/themes/gray_vcard/images/line.png) bottom repeat-x; padding: 3px 0px 5px 0px; margin: 0px 0 8px 0; }
h5 { font: 12px 'DroidSansBold', Arial, sans-serif; letter-spacing: 0.01em; color: #666; margin: 5px 0 2px 0 ;}
/* LINKS */
a { background-color: transparent; color: #777; outline: 0; text-decoration: none; }
a:hover { background-color: transparent; color: #666; outline: 0; text-decoration: none; }
p {margin : 0 0 15px 0;}
/* C. COLUMNS & STYLING */
/* 1: MAIN BOX */
/* layout container */
.container {margin: 0px auto; text-align: center; }
/* vcard container */
.figure {
display: block;
height: 900px;
text-align: left;
margin: 25px 0px 25px 30px;
overflow: auto;
}
div#timeline .step {
overflow: visible !important;
}
/* 2: LEFT & RIGHT COLUMNS */
.content-left { float: left; display: block; height: 250px; width: 310px; margin: 0px 0px; }
.content-right { float: right; display: block; height: 250px; width: 350px; margin: 0px 0px 0px 10px; }
/* 3:IMAGE STYLES */
.fll {padding: 4px; float: left; margin: 3px 10px 0px 0px; border: 1px solid #999; }
.flr { padding: 4px; float: right; margin: 0px 0px; }
/* 3. PAGES
........................................................................................................................................ */
/* 1: SKILLS */
.skill { font: 12px 'DroidSerifRegular', Arial, sans-serif; letter-spacing: 0.01em; color: #333; float:left; margin: 4px 0 0px 0 ;}
.star { margin: 0px 0px; float:right; }
.bull { margin: 2px 3px 30px 0px; float:left; }
.divider { background: url(/themes/gray_vcard/images/line.png) bottom repeat-x; padding: 23px 0px 0px 0px; height:2px; margin:0px 0px 12px 0px;}
/* left text box ++++++++++++++++++++++++++++++++++++++++++++ */
.skills_left_text { width: 270px; height: 300px; float: left; margin: -15px 0px 20px 20px; }
/* right text box ++++++++++++++++++++++++++++++++++++++++++++ */
.skills_right_text { width: 270px; height: 300px; float: right; margin: -15px 20px 20px 0px; }
/* quotes/ testimonials */
blockquote { font: normal 12px/18px 'DroidSerifItalic', Arial, sans-serif; color: #666; width: 270px; padding: 0px 0px; margin: 0px 0px; }
blockquote cite {font: normal 11px 'DroidSerifItalic', Arial, sans-serif; color: #888; float: right;}
/* 2: SOCIAL */
.social-content-left { float: left; display: block; height: 250px; width: 130px; margin: 30px 40px 0px 0px; }
.social-content-right { float: left; display: block; height: 250px; width: 130px; margin: 30px 0px; }
/* icons */
.icon { float:left; font-weight: normal; margin: -20px 0px 0px -65px; color: #555; padding:5px 0px 0px 0px;}
/* links */
.social { float:right; font: normal 12px 'DroidSansRegular', Arial, sans-serif; text-align: left; color: #888; }
.social a:hover { color: #888; text-decoration: none; }
.social-clear{ height: 65px; }
/* twitter */
.tweet, .query { background-image: url(/themes/gray_vcard/images/twitter_bg.png); background-repeat: no-repeat; width: 310px; height: 244px; }
.tweet .tweet_list, .query .tweet_list { list-style-type: none; padding: 22px 0px 0px 0px; margin: 0px 5px 10px 10px;
font: normal 12px/18px 'DroidSansRegular', Arial, sans-serif; color:#555; width: 290px; }
.tweet .tweet_list li { margin: 3px 10px 10px 8px; }
.tweet .tweet_list li a, .query .tweet_list li a { color: #888; text-decoration: none; }
.tweet_avatar img {float: right; margin: 0px 0px 0px 8px; vertical-align: middle; }
/* 3: CONTACT */
/* contact form */
.hide { font: normal 11px 'DroidSerifRegular', Arial, sans-serif; display: none; color: #444; }
input { outline: none; display: block; }
#form_name, #form_email, textarea { font: normal 13px 'DroidSansRegular', Arial, sans-serif; padding: 5px;
width: 220px;border: 0px solid #ccc; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.label { font: normal 12px 'DroidSansRegular', Arial, sans-serif; margin-top: 10px; color: #666; }
textarea { font: normal 12px 'DroidSansRegular', Arial, sans-serif; width: 220px; height: 127px; padding: 5px; }
#form_submit { font: normal 11px 'DroidSansBold', Arial, sans-serif; letter-spacing: 1px; outline: 0; padding: 0px 5px;
background: transparent url(/themes/gray_vcard/images/form_button.png) no-repeat 0px 0px; height: 32px; width: 80px; text-decoration: none; color: #fff; border: none; text-transform: uppercase; cursor: pointer; margin-left: 67px; }
#form_name, #form_email, textarea { background: #f9f9f9 url(/themes/gray_vcard/images/form-gradient.gif) repeat-x 0px -2px; border: #ccc #edede #fff;
border-style: solid; border-width: 1px; color: #666; }
#reset { font: normal 11px 'DroidSansRegular', Arial, sans-serif; outline: 0; padding: 0px 5px; height: 32px; width: 80px; text-decoration: none; float: right;
background-color:transparent;color: #555; border: none; cursor: pointer; margin: -30px 0px 0px 67px; }
/*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{ border : 0px;
}
/*for IE8 */
input[type="reset"]:focus, input[type="button"]:focus
, input[type="submit"]:focus, input[type="button"]:focus
{ outline : none;
}
/* contact links */
.contact {line-height:30px; font: 'DroidSansBold', Arial, sans-serif; color:#666; padding: 0px 0px; text-align: left; margin: 10px 0px 0px 0px; }
.contact a { color: #666; }
.contact a:hover { color: #888; }
.contact_icon { float: left; margin: 0px 15px 0px 0px;}
/* 4: GOOGLE MAP */
/* google map */
#map {border: 1px solid #ccc; width: 300px; height: 85px; margin-bottom: 15px;}
/* hide direction arrows */
.gmnoprint {display:none; }
/* extras */
.clear { height:16px; margin: 0px 0px; }
.copyright{ font: normal 11px 'DroidSansRegular', Arial, sans-serif; color: #222; text-align: center; margin: 30px 0px 0px 0px; }