/* 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;}
.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; }
/* 3: Grey Theme */
.grey { border: 3px solid #fff; padding: 0px 0px; background: #fff; }
.grey li > h2 { background-repeat:repeat;
font: normal 18px 'DroidSerifRegular', Arial, sans-serif; color: #fff; line-height: 2.4em; text-shadow: 0 -1px 0 #333; }
.grey li > h2 span {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; background-color: #7D0000; background-repeat:repeat; }
/* number ++++++++++++++++++++++++++++++++++++++++++++ */
.grey li > h2 b { color: #FFF; font-size: 20px; background-repeat:repeat; }
.grey li > h2 b:hover, .grey li > h2 :hover { color: #ffcc00; }
/* page background ++++++++++++++++++++++++++++++++++++++++++++ */
.grey li > div { background-color: #F9F9F9; height: 418px; border: 1px solid #ededed; }
/* 2. TYPOGRAPHY
........................................................................................................................................ */
/* A: FONT REPLACEMENT */
@font-face {
font-family: 'DroidSansRegular';
src: url('font/DroidSans-webfont.eot');
src: url('font/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('font/DroidSans-webfont.woff') format('woff'),
url('font/DroidSans-webfont.ttf') format('truetype'),
url('font/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSansBold';
src: url('font/DroidSans-Bold-webfont.eot');
src: url('font/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/DroidSans-Bold-webfont.woff') format('woff'),
url('font/DroidSans-Bold-webfont.ttf') format('truetype'),
url('font/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerifRegular';
src: url('font/DroidSerif-Regular-webfont.eot');
src: url('font/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/DroidSerif-Regular-webfont.woff') format('woff'),
url('font/DroidSerif-Regular-webfont.ttf') format('truetype'),
url('font/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerifItalic';
src: url('font/DroidSerif-Italic-webfont.eot');
src: url('font/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
url('font/DroidSerif-Italic-webfont.woff') format('woff'),
url('font/DroidSerif-Italic-webfont.ttf') format('truetype'),
url('font/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BallparkWeiner';
src: url('font/ballpark_weiner-webfont.eot');
src: url('font/ballpark_weiner-webfont.eot?#iefix') format('embedded-opentype'),
url('font/ballpark_weiner-webfont.woff') format('woff'),
url('font/ballpark_weiner-webfont.ttf') format('truetype'),
url('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: left; text-shadow: 0px 1px 0px #fcfcfc; margin: 0px 0px; }
/* what you do */
.title {text-transform: uppercase; font: normal 11px 'DroidSansRegular', Arial, sans-serif; color: #222; text-align: left; margin: 0px 0px 35px 0px; }
/* INTRO */
/* page headings */
h3 { font: normal 22px 'DroidSerifRegular', Arial, sans-serif; color: #333;
background: url(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(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 { padding-top: 75px;margin: 25px auto; width: 1000px; text-align: center; }
/* vcard container */
.figure { display: block; width: 550px; height: 360px; text-align: left; margin: 25px 30px 25px 30px;}
/* 2: LEFT & RIGHT COLUMNS */
.content-left { float: left; display: block; height: 260px; width: 250px; margin: 5px 5px; }
.content-right { float: right; display: block; height: 260px; width: 250px; margin: 5px 20px; }
/* 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; }
.clear2 { background: url(images/line.png) bottom repeat-x; padding: 0px 0px 0px 0px; height:1px; margin:-40px 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; }
.clear2 { height: 65px; }
/* twitter */
.tweet, .query { background-image: url(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 10px 'DroidSerifRegular', Arial, sans-serif; display: none; color: #444; }
input { outline: none; display: block; }
#form_name, #form_email, textarea { font: normal 10px 'DroidSansRegular', Arial, sans-serif; margin: -38px 0px 20px 70px; padding: 5px;
width: 180px;border: 0px solid #ccc; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.label { font: normal 10px 'DroidSansRegular', Arial, sans-serif; margin-top: 10px; color: #666; }
textarea { font: normal 12px 'DroidSansRegular', Arial, sans-serif; width: 180px; height: 127px; padding: 5px; margin: -37px 0px 4px 70px; }
#form_submit { font: normal 11px 'DroidSansBold', Arial, sans-serif; letter-spacing: 1px; outline: 0; padding: 0px 5px;
background: transparent url(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(images/form-gradient.gif) repeat-x 0px -2px; border: #ccc #edede #fff;
border-style: solid; border-width: 1px; color: #666; }
/* 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: 250px; height: 65px; margin-bottom: 15px;}
/* hide direction arrows */
.gmnoprint {display:none; }
/* extras */
.clear { height:5px; margin: 0px 0px; }
.clear3 { margin: 0px 0px; height: 16px; }
.clear4 { height:65px; margin: 0px 0px; }
.clear5 { height:19px; margin: 0px 0px; }
.copyright{ font: normal 11px 'DroidSansRegular', Arial, sans-serif; color: #222; text-align: center; margin: 30px 0px 0px 0px; }
/* -- for demo -- */
.style {
margin:8px auto;
-moz-border-radius: 5px 5px;
-webkit-border-radius: 5px;
background:#ccc;padding-top:10px;
height:38px;width:360px;
border:1px solid #bbb;
text-align:center;
}.style2 {
border:1px solid #bebebe;
text-align:center;
}
.style ul { display:inline;list-style:none; margin:0; padding:0;}
.style li { display:inline;list-style:none;}
.bg1 { background: url(bg/dark_scratch.jpg) repeat; background-color: #ccc; background-position:top center;}
.bg2 { background: url(bg/grey_scratch.jpg) repeat; background-color: #ccc; background-position:top center; }
.bg3 { background: url(bg/big_grid.jpg) repeat; background-color: #ccc; }
.bg4 { background: url(bg/grid.jpg) repeat; background-color: #ccc; }
.bg5 { background: url(bg/dark_grid.jpg) repeat; background-color: #ccc; }
.bg6 { background: url(bg/med_grid.jpg) repeat; background-color: #ccc; }
.bg7 { background: url(bg/small_grid.jpg) repeat; background-color: #ccc; }
.bg8 { background: url(bg/check.jpg) repeat; background-color: #ccc; }
.bg9 { background: url(bg/mosaic.jpg) repeat; background-color: #ccc; }
.bg10 { background: url(bg/stripe3.jpg) repeat; background-color: #ccc; }
.myDiv { color: #000; text-align: center; font-family: verdana, arial, sans-serif;}
.myDiv { float: left; width: 18em; padding: 20px; margin: 1em; background: #6af; }
/* -- Mein Zeuch :) -- */
.lang_switcher {width:200px;height:64px;position:absolute;top:25px;padding-left:770px;}
#de_switcher {width:64px;height:64px;background: url(images/flag_rotate-03.png) repeat scroll center center transparent;float:left;}
#de_switcher:hover {background: url(images/flag_rotate-03.png) repeat scroll 2px 2px transparent;}
#en_switcher {width:64px;height:64px;background: url(images/flag_rotate-02.png) repeat scroll center center transparent;float:left;}
#en_switcher:hover {background: url(images/flag_rotate-02.png) repeat scroll 2px 2px transparent;}
#pl_switcher {width:64px;height:64px;background: url(images/flag_rotate-16.png) repeat scroll center center transparent;float:left;}
#pl_switcher:hover {background: url(images/flag_rotate-16.png) repeat scroll 2px 2px transparent;}
#logo {width:377px;height:63px;background: url(images/logo.png) no-repeat scroll 0 0;position:absolute;top:25px;padding-left:770px;}