Tylko ja w ccs-ie zwykłego diva header niestety nie widzę. Tak wygląda mój css:
/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #000000;
text-shadow: none;
}
::selection {
background: #000000;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ===== Styles ==================================================
========================================================================== */
body {
font-size: 14px;
background-attachment: fixed;
background-color: #000;
background-image: url("../images/backgrounds/background_02.jpg");
background-position: center top;
background-repeat: no-repeat;
font-family: Arial, sans;
}
* { transition: all 0.3s ease-out; }
a {
color:#fff;
text-decoration: none;
transition: all 0.3s ease-out;
}
a:hover {
color:#fff;
}
h2, h3 {
color:#fff;
}
#page {
margin:0 5%;
width: 90%;
}
.wrapper {
width: 100%;
margin: 0;
}
.main-container {
background:url('../images/bg_pattern_dark.png') left top repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/*
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.6), 0 1px 5px rgba(0, 0, 0, 0.2), 0 0 0 10px rgba(0, 0, 0, 0.2);
*/
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2);
}
nav {
float:left;
width:100%;
border-bottom:1px solid #100F0F;
overflow:hidden;
position:relative;
background:url('../images/bg_pattern_dark.png') left top repeat;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#top-menu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
padding: 20px 0 15px;
}
#top-menu li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#top-menu li:last-child {
border:none;
}
#top-menu a {
display:block;
margin:0 0 0 0px;
padding:5px 20px;
color:#79796A;
text-decoration:none;
line-height:1.3em;
text-transform: uppercase;
font-size: 14px;
margin: 0 10px;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.9);
}
#top-menu li.current-menu-item a,
#top-menu a:hover {
color:#FFFFFF;
border-radius: 3px;
}
#top-menu li a {
position: relative;
z-index: 2;
}
#responsive-top-menu {
display: none;
}
#menu-button {
display: none;
vertical-align: bottom;
text-align: center;
text-transform: uppercase;
color: #fff;
padding: 20px;
margin: 0;
opacity: .7;
cursor: pointer;
transition: all .2s linear;
border-radius: 2px;
background:#000;
}
#menu-button.selected,
#menu-button:active {
opacity: 1;
display: block;
background-color: #CCC;
}
.main {
color:#ACAC9D;
padding: 40px 10% 50px;
border-top: 1px solid #2F2E2D;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
clear: both;
-webkit-box-shadow: inset 0px 0px 50px -20px #000000;
moz-box-shadow: inset 0px 0px 50px -20px #000000;
box-shadow: inset 0px 0px 50px -20px #000000;
}
.main h1 {
font-size: 2.1em;
color:#FFFFFF;
font-weight: normal;
margin: 0 0 1em 0;
padding:0 0 0.5em 0;
border-bottom:1px solid #353526;
}
.header-container {
position: relative;
}
.header-container .vcard {
background: url("../images/arrow_down.png") right 50% no-repeat;
color:#fff;
padding-right: 20px;
position: absolute;
right: 0;
bottom: 10px;
}
.footer-container {
position: relative;
}
.footer-container footer {
color: #AAAAAA;
padding: 20px 0;
font-size:11px;
text-align: center;
text-shadow: 1px 1px 0px #000000;
clear: both;
}
h1.title {
}
/* ===============
HOMEPAGE
=============== */
#intro {
font-size:40px;
color: #fff;
}
#intro strong {
font-weight: bold;
color:#0092C4;
}
#intro span {
color:#0092C4;
}
#intro p {
margin: 0;
}
.bio-image {
width:150px;
float: left;
margin-right: 70px;
position: relative;
margin-left: -20px;
text-shadow:none;
}
.bio-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:6px solid #fff;
max-width: 100%;
width: 100%;
background-color: #FFFFFF;
}
.bio-image:after {
content:'';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #FFFFFF;
position: absolute;
top:45%;
right: -20px;
text-shadow:none;
}
#bio {
clear: both;
margin-top: 30px;
}
#bio ul {
list-style: none;
margin: 0 auto;
padding: 0;
width:auto;
}
#bio ul li {
float: left;
margin: 0 2%;
padding:15px 0;
width:46%;
list-style: none;
border-bottom:1px solid #353526;
}
#bio ul li:first-child {
border-top:none;
}
#bio ul li:nth-child(2n+1) {
text-align: right;
}
/* ===============
Social Links
=============== */
#social-icons {
position: absolute;
bottom: 70px;
right: -50px;
}
#social-links {
margin:0;
padding:0;
}
#social-links li {
display: block;
text-indent: -9999px;
width: 32px;
height: 32px;
margin: 5px;
padding: 0;
}
#social-links li a {
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color: #000000;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#social-links li a:hover {
background-color: #0092C4;
}
ul#social-links li a.facebook { background-image: url("../images/icons/facebook.png") }
ul#social-links li a.twitter { background-image: url("../images/icons/twitter.png") }
ul#social-links li a.google { background-image: url("../images/icons/google.png") }
ul#social-links li a.dribbble { background-image: url("../images/icons/dribbble.png") }
ul#social-links li a.vimeo { background-image: url("../images/icons/vimeo.png") }
ul#social-links li a.skype { background-image: url("../images/icons/skype.png") }
ul#social-links li a.rss { background-image: url("../images/icons/rss.png") }
ul#social-links li a.linkedin { background-image: url("../images/icons/linkedin.png") }
ul#social-links li a.pinterest { background-image: url("../images/icons/pinterest.png") }
/* ===============
RESUME
=============== */
.box {
border-bottom:1px solid #353526;
padding:0 0 20px 0;
}
.box:last-child {
border-bottom: none;
}
.box h2 {
margin-top: 0;
font-weight: normal;
}
.col_half {
width: 0%;
}
.first,
.last,
.col_half:nth-child(2n+1) {
clear: both;
}
.last {
clear: right;
margin-right: 0 !important;
}
.col_half p{
margin-top: -50;
}
.bio-header {
margin-bottom: 0px;
clear: both;
}
.bio-header .bio-image {
width:120px;
float: right;
margin: 0 0 0 20px;
}
.bio-header .bio-image:after {
content:'';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #FFFFFF;
border-left: 0;
position: absolute;
top:45%;
left: -7px;
text-shadow:none;
box-shadow:none;
}
.bio-header .bio-phone,
.bio-header .bio-email {
text-align: right;
display: block;
color:#0092C4;
}
.bio-header .bio-info {
margin-top: 50px;
}
.main h1.bio-title {
margin-bottom: 0;
padding-bottom: 0;
font-size: 3.5em;
color:#fff;
border:none;
}
.bio-location {
display: block;
margin-bottom: 20px;
}
.job-period {
text-transform: uppercase;
color:#0092C4;
font-size: 11px;
}
.job-title, .job-education-title {
margin-bottom: 10px;
margin-top: 0;
color: #fff;
font-weight: normal;
}
.job-url {
font-size: 11px;
}
.job-skill-scale {
background: url("../images/scale.png") 0 0 no-repeat;
width: 137px;
height: 12px;
display: block;
}
.job-skill-number {
background-image: url("../images/scale.png");
background-position: 0 -12px;
background-repeat: no-repeat;
width: 137px;
height: 12px;
display: block;
}
.job-skill-number.skill-1 {width:14px;}
.job-skill-number.skill-2 {width:28px;}
.job-skill-number.skill-3 {width:42px;}
.job-skill-number.skill-4 {width:56px;}
.job-skill-number.skill-5 {width:70px;}
.job-skill-number.skill-6 {width:84px;}
.job-skill-number.skill-7 {width:98px;}
.job-skill-number.skill-8 {width:112px;}
.job-skill-number.skill-9 {width:126px;}
.job-skill-number.skill-10 {width:140px;}
/* ===============
SHOWCASE
=============== */
.filterable {
display: block;
padding:20px 0 0 0;
margin: 0 0 20px 0;
list-style: none;
}
.filterable li {
float: left;
margin-right: 25px;
display: block;
}
.filterable li a {
background: #615951;
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
display: block;
height: auto;
margin: 0;
padding: 5px;
font-size: 12px;
text-align: center;
text-decoration: none;
width: 100%;
text-shadow:none;
}
.filterable li a:hover {
background-color: #000;
}
.filterable li.active a {
background: #FF8000;
color: #FFFFFF;
}
.showcase-image img {
max-width:100%;
width: 100%;
}
#gallery {
clear:both;
}
ul.gallery {
margin:0px;
padding:0px;
height: 100%;
list-style: none;
}
ul.gallery li {
height: 160px;
list-style: none;
}
.view {
background: #000000 url('../images/bg_pattern_dark.png') center center repeat;
border: 0px solid #FFFFFF;
cursor: default;
float: left;
margin: 1%;
margin-bottom: 10px;
overflow: hidden;
position: relative;
text-align: center;
width: 31%;
text-shadow:none;
color:#fff;
}
.view .mask, .view .content {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.view img {
display: block;
position: relative;
max-width: 100%;
width: 100%;
min-height: 160px;
}
.view h2 {
background: rgba(0, 0, 0, 0.8);
color: #FFFFFF;
font-size: 14px;
margin: 10px 0 0;
padding: 10px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.view p {
color: #FFFFFF;
font-size: 12px;
padding: 10px 20px 20px;
position: relative;
text-align: center;
}
.view a.info {
background: #000000;
box-shadow: none;
color: #FFFFFF;
display: inline-block;
padding: 0;
text-decoration: none;
text-transform: uppercase;
background-color: #000;
height: 40px;
-moz-border-radius:100%;
-webkit-border-radius: 100%;
border-radius:100%;
width: 40px;
font-size: 30px;
line-height: 34px;
}
.view a.info:hover {
background: #FFFFFF;
color: #000000;
}
.view img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view .mask {
background-color: rgba(140, 140, 140, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view h2 {
border-bottom: 0px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 20px 10px 20px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view:hover h2,.view:hover p,.view:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.emm-paginate, .navigation {
display: block;
margin: 20px 0;
}
.emm-title,
.emm-page,
.emm-next,
.emm-prev {
display: block;
float: left;
margin-right: 5px;
padding:5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #000;
}
.emm-title {
display: none;
}
.emm-page {
}
.emm-title:hover,
.emm-page:hover,
.emm-next:hover,
.emm-prev:hover {
background: #615951;
}
/* ===============
BLOG
=============== */
.hentry {
display: table;
margin-bottom:30px;
clear: both;
}
h2.post-title {
margin-top: 0;
}
.meta {
font-size: 12px;
}
.blog-thumb {
padding: 0px;
float: left;
margin: 5px 25px 10px 0;
max-width: 100%;
height:auto;
-webkit-border-radius: 5pxx;
-moz-border-radius: 5px;
border-radius: 5px;
border:0px solid #fff;
}
.alignleft,
img.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright,
img.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter,
img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
blockquote.left {
float: left;
margin-left: 0;
margin-right: 20px;
text-align: right;
width: 33%;
}
blockquote.right {
float: right;
margin-left: 20px;
margin-right: 0;
text-align: left;
width: 33%;
}
.wp-caption {
text-align: center;
margin-bottom: 1.5em;
}
.wp-caption img {
border: 0 none;
margin: 0;
padding: 0;
}
.wp-caption p.wp-caption-text {
margin: 0;
}
.wp-smiley {
max-height: 1em;
margin:0 !important;
}
.column-left {
float:left;
width: 65%;
margin-right: 5%;
}
.column-right {
float: left;
width:30%;
}
.side_widget {
margin-bottom: 10px;
padding-bottom:10px;
border-bottom:1px solid #353526;
}
.side_widget ul {
padding-left:0;
list-style: none;
}
.side_widget li {
margin-bottom: 10px;
}
.widget_search {
border:none;
}
.widget_search #searchsubmit {
display: none;
}
.widget_search .screen-reader-text {
display: none;
}
.widget_search #s {
width:100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #EFEFEF url("../images/ico_search.png") 96% 50% no-repeat;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
}
.widget_site5framework_twitter_widget h3.widget-title {
background: url("../images/ico_twitter_blue.png") 96% 50% no-repeat;
}
/* ===============
COMMENTS
=============== */
#comments {
clear: both;
}
#commentform ul, #comment-nav ul {
list-style:none;
padding:0;
}
#commentform ul li {
clear: both;
margin-bottom:20px;
}
#commentform input {
width: 70%;
}
#commentform .submitbutton {
width: auto;
}
#commentform label {
display: block;
font-size: 14px;
margin-bottom: 5px;
}
#commentform textarea {
resize:vertical;
max-height:300px;
min-height:200px;
width:80%;
}
#comments h3, #comment-form-title h3 {
font-size: 30px;
font-weight: normal;
margin-bottom:0px;
}
#cancel-comment-reply p {
font-size: 12px;
font-style: normal;
margin-top: 0;
text-transform: uppercase;
}
ol.commentlist {
margin-top: 10px;
margin-bottom:20px;
padding-left: 0;
}
ul.children {
padding-left: 0;
}
.commentlist ol li {
border-bottom:1px solid #ddd;
}
.commentlist li {
position: relative;
clear: both;
list-style-type: none;
padding: 11px 10px;
border-color: #333;
border-width:0 0 1px 0;
border-style: solid;
}
.commentlist li[class*=depth-] {
padding-left: 20px;
margin-top: 17px;
}
.commentlist li.depth-1 {
margin-top: 1px;
}
.commentlist li:not(.depth-1) {
margin-right: -10px;
}
.commentlist li:last-child {}
.commentlist header {
min-height: 30px;
border:none;
}
nav#comment-nav {
line-height: 12px;
}
.commentlist .vcard {
margin-left: 40px;
}
.commentlist .vcard cite.fn {
font-weight: 700;
font-style: normal;
}
.commentlist .vcard time {
font-size: 11px;
float: none;
background:none;
width: auto;
margin-top: auto;
text-transform:uppercase
}
.commentlist .vcard time a {
color: #999;
text-decoration: none;
}
.commentlist .vcard time a:hover {
text-decoration: underline;
}
.commentlist .vcard img.avatar {
position: absolute;
left: 0;
padding: 2px;
border: 1px solid #cecece;
background: #fff;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.commentlist li .comment_content {
margin-left: 40px;
}
.commentlist li .comment_content p { margin: 15px 0; }
.commentlist li ul { margin: 0 0 0 40px; }
.commentlist li ul.children li { border-width:1px 0 0 0; padding-bottom:4px;}
.commentlist .comment-reply-link {margin-left:40px;text-decoration: none; font-size: 11px; text-transform:uppercase}
.commentlist a.comment-reply-link:hover { opacity: 1; }
.commentscount { padding-left:28px; height:30px; display:inline-block; }
.respond-form form[method=post] {margin:30px 0; }
.respond-form ol li form#commentform[method=post] li { margin-bottom:0}
.respond-form form[method=post] li { list-style-type: none; clear: both; margin-bottom: 20px; padding: 0}
.respond-form form[method=post] li label, .respond-form form[method=post] li small {cursor:pointer; text-transform:uppercase; float:none;}
.respond-form input[type=text]:focus, .respond-form input[type=email]:focus, .respond-form input[type=url]:focus, .respond-form textarea:focus { outline:none;}
.respond-form input[type=text], .respond-form input[type=email], .respond-form input[type=url] { width:95%; height:30px; border: none; padding: 1px 6px; line-height: 24px; }
#allowed_tags { margin: 24px 10px 11px 0; }
/*.respond-form textarea, .respond-form input[type=text], .respond-form input[type=email], .respond-form input[type=url] {background:#f2f2f2; border-radius: 10px; border: 1px solid #f2f2f2; box-shadow: 1px 1px 2px #DDDDDD inset;} */
/*.respond-form textarea { resize: none; width: 500px; padding: 10px 5px; line-height: 24px; height:190px; } */
.respond-form input:invalid, .respond-form textarea:invalid { outline: none;}
.nocomments { margin: 0 20px 17px; }
.commentbutton {background:url(library/images/postcomment.png) 0 0px no-repeat; width:162px; height:34px; text-indent:-9999px; border:none; margin-left:135px;}
/* ===============
CONTACT
=============== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
background: #666666 url('../images/bg_pattern_light.png') left top repeat;
border:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding:10px;
}
textarea {
resize:vertical;
max-height:300px;
min-height:200px;
}
.form-row {
clear: both;
margin-bottom: 10px;
}
.input label {
display: block;
font-size: 14px;
margin-bottom: 5px;
}
.input input {
width: 80%;
}
.input textarea {
width: 94%;
height: 200px;
}
input:focus,
textarea:focus {
-webkit-box-shadow: 0px 0px 5px 0 #FFFFFF;
moz-box-shadow: 0px 0px 5px 0 #FFFFFF;
box-shadow: 0px 0px 5px 0 #FFFFFF;
}
input[type="submit"] {
border:none;
display: inline-block;
margin: 0;
padding: 10px 20px;
background: #FF8000;
color: #ffffff;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 5px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
position: relative;
z-index: 2;
}
input[type="submit"]:hover { background: #D23F00 }
.thanks {
color: #fff;
background: url('../lib/contactform/ok.png') no-repeat left;
padding-left:20px;
display: none;
}
label sup {
color:#E3006A;
}
.error {
color: #fff;
background: none;
padding:0;
display: none;
color:#E3006A;
font-size: 12px;
}
/* ===============
ALL: IE Fixes
=============== */
.ie7 .title {
padding-top: 20px;
}
.lt-ie9 #page {
width: 960px;
margin: 0 auto;
}
/* ==========================================================================
Media Queries
========================================================================== */
/*-------------------------------------------*/
/* #Wide Screen*/
/*-------------------------------------------*/
@media only screen and (min-width: 959px) {
#page {
width: 960px;
margin: 0 auto;
}
#top-menu {
display: block ;
}
}
/*-------------------------------------------*/
/* #Tablet (Portrait)*/
/*-------------------------------------------*/
@media only screen and (max-width: 959px) {
#intro p {
font-size: 30px;
}
#top-menu {
display: block;
}
#intro .bio-image,
.bio-header .bio-image {
width:120px;
}
#bio ul {
width: 100%;
}
#####
#intro .bio-image,
.bio-header .bio-image {
float: left;
margin: 0 40px 0 0;
width: 100px;
}
.bio-header .bio-info {
margin-top: 40px;
}
.bio-header .bio-phone, .bio-header .bio-email {
text-align: left;
}
.bio-header .bio-image:after,
#intro .bio-image:after {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #FFFFFF;
border-right: 0;
position: absolute;
top:42%;
left:auto;
right: -20px;
text-shadow:none;
}
#social-icons {
position: static;
margin-top: 10px;
}
#social-links {
position: static;
}
#social-links li {
float: left;
position: static;
}
}
/*-------------------------------------------*/
/* Mobile Landscape Size to Tablet Portrait (devices and browsers)
/*-------------------------------------------*/
@media only screen and (max-width: 767px) {
#top-menu {
display: block;
}
#top-menu a {
padding:5px;
font-size: 14px;
}
.view {
width: 48%;
}
#intro p {
}
###
#bio ul {
width: 100%;
}
#bio ul li {
float:none;
width: auto;
margin: 0;
}
#bio ul li:nth-child(2n+1) {
text-align: left;
}
#intro p {
font-size: 25px;
}
}
/*-------------------------------------------*/
/* #MOBILE 320px (Portrait)*/
/*-------------------------------------------*/
@media only screen and (max-width: 480px), screen and (max-device-width: 480px) {
body,
#bio ul li {
font-size: 13px;
}
nav {
}
#menu-button {
display: block;
}
#top-menu ul {
position: static;
float: none;
display: none ;
padding-top: 0;
padding-bottom: 0;
}
#top-menu a {
padding:15px ;
margin: 0;
display: block;
font-size: 14px;
}
#top-menu a:hover {
background: #333;
}
#top-menu a:active {
background: #000;
}
#top-menu li:first-child a {
margin-left: 0;
}
#top-menu li:last-child a {
margin-right: 0;
}
#top-menu li {
display: block;
float: none;
position: static;
padding:0 0;
border-bottom:1px solid #353526;
}
#responsive-top-menu {
display: block;
width: 100%;
margin:20px 0;
padding:10px;
}
.main {
padding:20px 10%;
}
.bio-header .bio-image,
#intro .bio-image {
float: none;
margin:0 auto 20px;
width: 100px;
}
.bio-header .bio-image:after,
#intro .bio-image:after {
border:none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #FFFFFF;
content: "";
top:98%;
right:0;
height: 0;
position: absolute;
left: 45%;
text-shadow: none;
bottom: -10px;
width: 0;
}
#intro p {
font-size:20px;
text-align: center;
}
#bio ul {
width: 100%;
}
#bio ul li {
float:none;
width: auto;
margin: 0;
}
#bio ul li:nth-child(2n+1) {
text-align: left;
}
h1.bio-title {
font-size: 3em;
}
h1.bio-title, .bio-location {
text-align: center;
display: block;
}
.bio-header .bio-phone, .bio-header .bio-email {
text-align: center;
display: block;
}
.bio-header .bio-info {
margin-top: 0px;
}
.view {
width: 100%;
margin: 0 0 2% 0;
}
####
#social-icons {
position: static;
margin-top: 10px;
}
#social-links {
position: static;
}
#social-links li {
float: left;
position: static;
}
.column-right,
.column-left {
float: none;
display:block;
width: 100%;
margin:0 0 20px 0;
}
h2.post-title {
display: block;
clear: both;
}
}
/* ==========================================================================
Isotope Filtering
========================================================================== */
/ ****Isotope Filtering**** /
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/ ****Isotope CSS3 transitions**** /
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/ ****disabling Isotope CSS3 transitions**** /
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* ==========================================================================
Helper classes
========================================================================== */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 100%;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix1:before,
.clearfix1:after {
content: "";
display: table;
}
.clearfix1:after {
clear: both;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow:none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}