html {
background: #eaeaea;
}
body {
font-family: "Helvetica",Arial,sans-serif; font-size: 16px;
margin: 0; padding: 0;
}
#bodyWrapper { /* I need this wrapper instead of giving width to just to have outside of it, and let footer be 100% of window */
max-width: 800px; min-width: 380px; padding: 0 30px; margin: 0 auto;
}
a { color: #2566d1; }
a.black_link { color: #333; text-decoration: none; font-style: italic; }
a.black_link:hover { text-decoration: underline; }
a.with_arrow:after {
content: ">";
background-color: #0891d3; color: white;
padding: 1px 5px; margin-left: 6px;
}
a.with_arrow_left:before {
content: "<";
background-color: #0891d3; color: white;
padding: 1px 5px; margin-right: 6px;
}
a img { border: none; }
.clearer {
clear: both;
height: 0; font-size: 0; margin: 0; padding: 0; border: none;
}
h1 {
font-size: 32px; font-weight: normal; text-align: center; color: #333;
padding-top: 20px; margin-top: 30px;
border-top: 1px dashed #ccc;
text-shadow: 0px 1px 1px #fff;
}
h1.mainTitle {
font-size: 30px; background-color: #e1e1e1; border: none;
padding: 22px 0; position: relative; margin: 0 0 35px;
}
.curvedShadow { position: relative; }
h1.mainTitle:after, h1.mainTitle:before,
.bodyLoaded .curvedShadow:after, .bodyLoaded .curvedShadow:before {
content: "";
position: absolute; z-index: -1;
top: 0; bottom: 14px; width: 40%; right: 12px;
box-shadow: 0 15px 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 15px 6px rgba(0,0,0, 0.3); -moz-box-shadow: 0 15px 6px rgba(0, 0, 0, 0.3);
transform: rotate(1.5deg); -webkit-transform: rotate(1.5deg); -moz-transform: rotate(1.5deg); -o-transform: rotate(1.5deg); -ms-transform: rotate(1.5deg);
}
h1.mainTitle:before, .bodyLoaded .curvedShadow:before {
left: 12px; right: auto;
transform: rotate(-1.5deg); -webkit-transform: rotate(-1.5deg); -moz-transform: rotate(-1.5deg); -o-transform: rotate(-1.5deg); -ms-transform: rotate(-1.5deg);
}
h1.mainTitle .subtitle {
display: block; font-size: 14px; font-style: italic;
padding-top: 6px;
}
h1.mainTitle a { color: #333; text-decoration: none; }
/*-----*/
.quote_box {
border: 1px solid #ccc; background-color: white;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
padding: 12px 28px 12px 25px;
position: relative;
}
.quote_box p {
margin: 0.7em 0; font-size: 15px; line-height: 1.4em;
}
.quote_box .arrow {
position: absolute; width: 10px; height: 10px;
background-color: white;
border-left: 1px solid #ccc; border-top: 1px solid #ccc;
left: -1px; top: -1px; /* if the browser doesn't support transforms, it'll blend in with the upper corner border */
-webkit-transform: translate(-5px, 30px) rotate(-45deg);
-moz-transform: translate(-5px, 30px) rotate(-45deg);
-ms-transform: translate(-5px, 30px) rotate(-45deg);
-o-transform: translate(-5px, 30px) rotate(-45deg);
transform: translate(-5px, 30px) rotate(-45deg);
}
.quote_box:after {
content: "";
position: absolute; z-index: -1;
top: 0; bottom: 14px; width: 80%; right: 12px;
box-shadow: 0 15px 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 15px 6px rgba(0,0,0, 0.3); -moz-box-shadow: 0 15px 6px rgba(0, 0, 0, 0.3);
transform: rotate(1deg); -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); -ms-transform: rotate(1deg);
}
/*----------------------------*/
/* Header */
header {
display: block; /* just in case for old browsers */
height: 80px;
padding: 55px 0 25px;
}
header #logo {
width: 350px; float: left; margin: 0 24px 10px 0;
text-shadow: 0px 1px 1px #fff;
}
header #logo a {
display: block;
text-decoration: none;
color: #088dd0; font-size: 50px;
}
header #logo span {
display: block;
font-size: 20px; text-align: left; color: #444; padding-left: 3px;
}
/*----*/
header nav {
width: 430px; float: left; width: auto; margin-right: -4px;
}
header nav ul {
margin: 0; padding: 12px 0 0 0; list-style-type: none;
position: relative; z-index: 10;
}
header nav ul li {
margin: 0 0 0 6px; float: left;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
header nav ul li a {
display: block; padding: 12px 7px;
text-decoration: none; color: black; font-size: 15px;
text-shadow: 0px 1px 1px #fff;
}
header nav ul li:hover { background-color: white; }
header nav ul li.selected { background-color: #088dd0; }
header nav ul li.selected a { color: white; text-shadow: none; cursor: default; }
/* Submenus */
header nav > ul li.portfolio > a { display:block; text-align: center; padding: 12px 14px; } /* make the portfolio button always wider, so that it doesn't grow horizontally on hover */
header nav ul li ul {
display: none; padding-top: 6px; margin-bottom: 4px;
background-color: white; /* force for when the parent ul is selected */
}
header nav ul li:hover ul { display: block; }
header nav ul li ul li {
float: none; margin: 0; padding-left: 9px;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
}
header nav ul li ul li a { font-size: 12px; padding: 6px 0; }
header nav ul li ul li:hover { background-color: #e5f3fa; }
header nav ul li.selected ul li a { color: black; } /* force for when the parent ul is selected */
/*----------------------------*/
/* Contact */
#contact {
max-width: 800px; margin: 0 auto;
}
#contact div.twitter, #contact div.email {
float: right; width: 315px;
}
#contact div.email { float: left; width: 425px; }
#contact div.icon {
float: left; width: 100px; height: 83px;
text-indent: -9000px;
}
#contact div.twitter div.icon { background: transparent url(/images/twitter.png) 8px 6px no-repeat; }
#contact div.email div.icon {
background: transparent url(/images/sprites.png) 0 -90px no-repeat;
}
#contact .quote_box {
float: left; width: 133px;
margin-top: 5px; padding: 20px 0 20px 15px;
font-size: 22px; text-align: left;
}
#contact div.email .quote_box { width: 282px; }
#contact .quote_box a { text-decoration: none; }
#contact .quote_box .arrow {
/* I just need to move this a bit up, but I can't do just that, I need to overwrite the whole transformation matrix */
-webkit-transform: translate(-5px, 30px) rotate(-45deg);
-moz-transform: translate(-5px, 30px) rotate(-45deg);
-ms-transform: translate(-5px, 30px) rotate(-45deg);
-o-transform: translate(-5px, 30px) rotate(-45deg);
transform: translate(-5px, 30px) rotate(-45deg);
}
/*----------------------------*/
/* Footer */
#mainContent {
padding-bottom: 60px;
}
.footer {
background-color: #113d6a;
text-align: center;
margin: 0; padding: 40px 30px 30px;
min-width: 380px;
}
/*----------------------------*/
/* Carousels */
.carousel {
position: relative; overflow: hidden;
}
.carousel .carousel_content { display: none; }
.carousel .first_carousel_content { display: block; } /* make sure the first of the contents will ALWAYS show, in a VERY cross-browser way */
.carousel .carousel_content img { width: 100%; } /* shrink with the container */
.orbit-wrapper {
margin-bottom: 60px;
position: relative;
}
.orbit-wrapper .timer { display: none; }
.orbit-wrapper .slider-nav span {
width: 52px; height: 52px; background: url(/images/sprites.png) -100px 0 no-repeat; margin-top: -26px;
}
.orbit-wrapper .slider-nav span.right { background-position: -100px -100px; right: -23px; }
.orbit-wrapper .slider-nav span.left { left: -23px; }
.orbit-wrapper .orbit-bullets {
left: 0; right: 0; height: 14px; bottom: -32px; margin: 0; padding: 0;
text-align: center;
}
.orbit-wrapper .orbit-bullets li {
display: inline-block;
background-color: #c3c3c3;
width: 14px; height: 14px;
float: none;
padding: 0; margin: 0 8px;
border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.4);
}
.orbit-wrapper .orbit-bullets li.active {
background-color: #3073b5;
box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset -3px -3px 5px rgba(0, 0, 0, 0.4);
}
/*----------------------------*/
/* Home */
#home_intro { margin: 0 0 50px; }
#home_intro h1 { margin-top: 0; }
#home_intro p { margin: 12px 0; }
#home_carousel {
margin: 20px 0 80px;
}
#home_carousel .orbit-caption {
text-align: left; font-size: 15px; font-style: italic;
padding: 15px 20px; width: auto; left: 0;
background: rgba( 5, 92, 136, 0.8);
}
#home_carousel .orbit-caption .title {
display: block;
font-size: 20px;
}
#home_carousel .orbit-caption .playButton,
#home_carousel .orbit-caption .detailsButton {
float: right;
margin: 7px 15px 0 10px;
color: white; font-style: normal;
text-decoration: none;
transition: all 200ms linear; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear;
}
#home_carousel .orbit-caption .playButton:after,
#home_carousel .orbit-caption .detailsButton:after {
content: ">";
font-family: "Courier";
background-color: #3cac00; font-size: 25px; color: white;
margin-left: 6px;
display: inline-block; padding: 0; width: 28px; height: 28px; text-align: center;
border-radius: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px;
position: relative; top: 4px;
}
#home_carousel .orbit-caption .detailsButton:after {
background-color: #0891d3;
border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
}
#home_carousel .orbit-caption .playButton:hover,
#home_carousel .orbit-caption .detailsButton:hover{
text-shadow: 0 0 10px #fff, 0 0 10px #fff;
}
/* Make the shadow more visible */
#home_carousel:before { transform: rotate(-2.5deg); -webkit-transform: rotate(-2.5deg); -moz-transform: rotate(-2.5deg); -o-transform: rotate(-2.5deg); -ms-transform: rotate(-2.5deg); }
#home_carousel:after { transform: rotate(2.5deg); -webkit-transform: rotate(2.5deg); -moz-transform: rotate(2.5deg); -o-transform: rotate(2.5deg); -ms-transform: rotate(2.5deg); }
#home_portfolio { margin: 20px 0 50px; }
/*----------------------------*/
/* References */
.reference { position: relative; }
.reference .author {
position: absolute; /* get the author out of the flow, so we can let the right part be 100% minus the margin */
width: 70px;
font-size: 11px;
text-align: center;
}
.reference .author .name { font-weight: bold; display: block; padding-bottom: 6px; margin: 0 -5px; }
.reference .author img {
width: 70px; height: 70px; /* Set size just in case */
display: block; margin: 0 0 5px 0;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
box-shadow: 1px 1px 2px #aaa;
}
.reference .referenceRight { /* I need this to have the quote and the project description aligned */
margin-left: 82px;
}
.reference .reference_project {
font-size: 13px; margin: 7px 25px 0 25px; font-style: italic;
}
body.home #references a.see_all {
float: right; font-size: 15px;
margin: 10px 10px 0 0;
position: relative; z-index: 10; /* be on top of the element we're superimposing with the negative margin */
}
body.references .reference { margin-top: 45px; }
/*----------------------------*/
/* Portfolio choose */
body.portfolio_choose #portfolio { margin-bottom: 60px; }
.portfolio_choose .portfolioType {
display: block; float: left; position: relative;
margin: 50px 10px 0 0; width: 390px; height: 330px;
background-color: #088dd0;
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
font-size: 19px; color: white;
text-shadow: 1px 1px 1px black; text-decoration: none; text-align: center;
transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear;
}
.portfolio_choose .portfolioType:hover { background-color: #46a1d0; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; }
.portfolio_choose .portfolioType span { display: block; }
.portfolio_choose .portfolioType span.title {
margin: 205px 0 5px 0;
font-size: 35px;
}
.portfolio_choose .portfolioType .portfolioIcon {
background: url(/images/portfolio_icons.png) 0 0 no-repeat;
display: block; position: absolute;
top: -50px; left: 30px; height: 230px; width: 330px;
}
.portfolio_choose .portfolio_gaming .portfolioIcon { background-position: 0 0; }
.portfolio_choose .portfolio_professional .portfolioIcon { background-position: -386px 0; }
.portfolio_choose .portfolioType span.desc { margin: 0 60px; }
/*----------------------------*/
/* Portfolio List */
body.portfolio_list .project {
padding: 30px 0 40px; min-width: 374px;
border-bottom: 1px dashed #ccc;
color: #333;
}
body.portfolio_list .project:last-child { border: none; }
body.portfolio_list .project .imgContainer {
border: 1px solid #ccc;
float: left; margin: 0 22px 16px 0; width: 374px; height: 217px;
position: relative;
}
body.portfolio_list .bodyLoaded .project .imgContainer:after {
content: ""; display: block;
position: absolute; z-index: 0;
top: 0; bottom: 12px; width: 80%; right: 10px;
box-shadow: 0 15px 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 15px 6px rgba(0,0,0, 0.3); -moz-box-shadow: 0 15px 6px rgba(0, 0, 0, 0.3);
transform: rotate(2deg); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg);
}
body.portfolio_list .project .imgContainer img {
position: relative; z-index: 2; /* be on top of the shadow, which can't be z-index -1 in this case, because each project may have a bg-color that would cover it */
}
body.portfolio_list .project h2 {
margin: 0 0 5px 0;
font-size: 18px; font-style: italic;
}
body.portfolio_list .project h2 a { text-decoration: none; color: #333; }
body.portfolio_list .project span.technology { font-size: 14px; font-style: italic; }
body.portfolio_list .project .desc { font-size: 16px; margin: 20px 0; line-height: 1.5em; }
body.portfolio_list .project .desc p { margin: 8px 0; }
body.portfolio_list .project a.details { font-size: 13px; text-decoration: none; font-style: italic; }
/*-------------------*/
/* Gaming Portfolio List */
body.portfolio_gaming {
background: #0a0a0a url(/images/gaming_bg.png?v=2) center -150px no-repeat;
}
body.portfolio_gaming header #logo a {
height: 48px;
text-indent: -9999px;
background: url(/images/gaming_bg.png?v=2) 0 10px no-repeat;
}
body.portfolio_gaming header #logo span {
font-family: "Courier"; font-size: 19px; color: #fff; text-shadow: 0px 1px 1px #000;
}
body.portfolio_gaming header nav ul li a { color: white; text-shadow: none; }
body.portfolio_gaming header nav ul li:hover a { color: black; }
body.portfolio_gaming header nav ul li.selected > a { color: white; }
body.portfolio_gaming h1.mainTitle {
max-width: 475px; min-width: 380px; height: 80px; margin: 0 auto;
background: transparent url(/images/gaming_bg.png?v=2) center 0 no-repeat;
padding: 10px 0;
}
body.portfolio_gaming h1.mainTitle .title { display: block; text-indent: -9999px; }
body.portfolio_gaming h1.mainTitle .subtitle {
padding-top: 13px;
font-family: "Courier"; font-size: 16px; font-style: normal;
color: #fff; text-shadow: 0px 1px 1px #000;
}
body.portfolio_gaming .project {
border-radius: 8px;
background-color: #d6d6d6;
padding: 25px 20px 28px; margin: 22px 0;
}
body.portfolio_gaming .project:last-child { /* I need to repeat this rule because if I have the 2 selectors in the previous one, IE8 ignores them both, due to the :last-child */
border-radius: 8px;
}
body.portfolio_gaming .project img {
border: 1px solid #888;
}
/*----------------------------*/
/* Portfolio Detail */
body.portfolio_detail h2,
body.portfolio_detail h3,
body.portfolio_detail span.technology {
color: #333; font-style: italic;
}
body.portfolio_detail h2 { margin: 20px 0 2px 0; font-size: 25px; }
body.portfolio_detail span.technology { font-size: 17px; }
body.portfolio_detail h3 { font-size: 22px; margin: 30px 0 15px; }
body.portfolio_gaming #project_detail_container {
background-color: #d7d7d7;
margin: 25px -40px -10px -40px;
padding: 5px 40px 40px; /* 1px top is for the h2 margin to work */
border-radius: 8px;
}
body.portfolio_detail .long_text_description ul { margin: 20px 0 30px; padding: 0 0 0 40px; }
body.portfolio_detail .long_text_description ul li { margin: 0 0 10px 0; font-size: 15px; line-height: 1.5em; }
body.portfolio_detail .long_text_description p {
margin: 0.7em 0; font-size: 15px; line-height: 1.5em;
}
body.portfolio_detail #highlights img.editors_choice {
display: block;
width: 150px;
border-radius: 5px;
}
body.portfolio_detail #home_carousel { z-index: 2; } /* be on top of the shadow, which can't be z-index -1 in this case, because each project may have a bg-color that would cover it */
body.portfolio_detail #home_carousel .carousel_content img { position: relative; z-index: 2; }
body.portfolio_detail #home_carousel:before,
body.portfolio_detail #home_carousel:after { z-index: 0; }
/*----------------------------*/
/* Speaking */
body.speaking .talk {
margin-top: 50px;
padding: 10px 0 0;
border-top: 1px dashed #ccc;
color: #333;
}
/*----------------------------*/
/* About Me */
#about nav ul { margin: 0; padding: 0 0 0 35px; list-style-type: none; }
#about nav li {
float: left;
margin: 0 3px; padding: 0; background-color: #a1a1a1;
border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px;
}
#about nav li a { display: block; padding: 10px 20px; font-size: 20px; color: white; text-decoration: none; }
#about nav li a:hover { text-decoration: underline; }
#about nav li.selected {
background: white;
border: 1px solid #ccc; border-bottom: none;
position: relative; margin-bottom: -1px; /* move down to cover the main content area border */
box-shadow: 2px -2px 2px #ddd; -webkit-box-shadow: 2px -2px 2px #ddd; -moz-box-shadow: 2px -2px 2px #ddd;
}
#about nav li.selected a {
color: black; cursor: default;
}
#about nav li.selected a:hover { text-decoration: none; }
#about #about_tab_content {
background: white; border: 1px solid #ccc;
padding: 20px 35px;
border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px;
line-height: 1.6em; color: #333;
}
#about #about_tab_content ul { padding-left: 25px; }
#about #about_tab_content ul li { padding: 5px 0; }
#cv { font-size: 14px; }
#cv h1 { border: none; margin-bottom: 10px; }
#cv h2 { margin-top: 40px; margin-bottom: 6px; }
#about #about_tab_content #cv ul { padding-left: 40px; margin: 0; }
#about #about_tab_content #cv li { padding: 0; }
#cv h3 .WorkExperiencePeriod {
display: block; font-size: 14px; font-weight: normal; color: #555; padding-top: 15px;
}
#cv h3.WorkExperience { border-top: 1px solid #ccc; }
#cv h3.WorkExperience.first { border-top: none; }
#cv h3.WorkExperience img.editors_choice {
width: 110px;
vertical-align: top;
margin-left: 15px;
border-radius: 6px;
}
#cv .WorkExperienceItem p.company_description {
font-style: italic;
margin-top: -10px;
}
#cv .reference_cv { margin: 20px 0 30px;}
#cv .reference_cv .referenceBody { line-height: 1.4em;}
#cv .reference_cv .referenceBody p { margin: 0.5em 0;}
#cv .reference_cv .author { font-weight: bold; font-size: 115%; }
#cv .reference_cv .reference_project { font-size: 85%; }
#cv p.contact_info {
margin-top: 0;
text-align: center;
}
#cv p.view_project_details a {
background: #088dd0; color: white; text-decoration: none;
padding: 5px 15px;
border-radius: 3px;
}
#cv p.view_project_details a:hover { background: #28adf0; }
#cv ul li p.view_project_details { margin: 4px 0 12px; }
/*--------------------------------------------------------------------------------*/
.pagebreak { page-break-before: always; }
@media print {
body.about.cv header,
body.about.cv div.footer,
body.about.cv h1.mainTitle,
body.about.cv #about_tabs
{ display: none; }
body.about.cv #bodyWrapper { width: auto; max-width: 999999px; padding: 0; margin: 0;}
body.about.cv #about #about_tab_content { border: none; padding: 0 20px; margin: 0; border-radius: 0; }
body.about.cv #cv { font-size: 12px; line-height: 1.4em; }
body.about.cv #cv h1 { margin-top: 0; }
body.about.cv #mainContent { padding: 0; }
body.about.cv #mainContent h2 { font-size: 16px; margin-top: 45px; }
body.about.cv #cv h3 .WorkExperiencePeriod { font-size: 12px; }
body.about.cv #cv h3.WorkExperience img.editors_choice { margin-top: -5px; }
body.about.cv #cv .reference_cv .author { font-size: 12px; }
body.about.cv .WorkExperienceItem { /* page-break-inside: avoid; */ }
body.about.cv .WorkExperienceItem p { page-break-inside: avoid; }
body.about.cv .LowPriority { display: none; }
body.about.cv a { color: #333; text-decoration: none; }
body.about.cv a.download_pdf { display: none; }
body.about.cv p.view_project_details { display: none; }
@page {
counter-increment: page;
counter-reset: page 1;
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
}
}
/*--------------------------------------------------------------------------------*/
@media screen and (max-width: 880px) {
/* The header needs fixed height for the dropdown menu to not push the rest of the content down
For smaller screens where the menu may fall down below the logo, auto height, and no dropdown */
header { height: auto; }
header nav ul li:hover ul { display: none; }
body.portfolio_gaming #project_detail_container {
margin-left: -25px; margin-right: -25px;
padding-left: 25px; padding-right: 25px;
}
/*----------------*/
#home_carousel .orbit-caption .title { font-size: 16px; font-weight: bold; }
#home_carousel .orbit-caption { font-size: 13px; }
/*----------------*/
/* Make the balloons way smaller, and their floating more fluid */
.footer { padding-top: 20px; }
.footer #contact { padding: 1px 0; } /* padding is just for a Firefox quirk. Without it, this doesn't respect the footer's top padding */
.footer #contact div.twitter,
.footer #contact div.email { width: auto; margin: 0; }
.footer #contact div.icon { width: 86px; margin-left: -10px; transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); }
.footer #contact div.quote_box { width: auto; padding: 12px; font-size: 18px; margin-top: 14px;}
.footer #contact .quote_box .arrow {
/* I just need to move this a bit up, but I can't do just that, I need to overwrite the whole transformation matrix */
-webkit-transform: translate(-5px, 20px) rotate(-45deg);
-moz-transform: translate(-5px, 20px) rotate(-45deg);
-ms-transform: translate(-5px, 20px) rotate(-45deg);
-o-transform: translate(-5px, 20px) rotate(-45deg);
transform: translate(-5px, 20px) rotate(-45deg);
}
}
@media screen and (max-width: 640px) {
/* make the tabs smaller and more to the left, to minimize the change they'll fall to a second line */
#about nav ul { padding-left: 10px; }
#about nav li a { font-size: 16px; font-weight: bold; }
/*----------------*/
#home_carousel .orbit-caption .title { font-size: 14px;}
#home_carousel .orbit-caption { font-size: 12px; }
#home_carousel .orbit-caption .playButton,
#home_carousel .orbit-caption .detailsButton { margin-left: 20px; }
/*----------------*/
/* One on top of the other, both left-aligned */
.footer #contact div.twitter,
.footer #contact div.email {
float: none;
}
.footer #contact div.email { margin-bottom: -20px; }
}