/*----------------------------------------------------------------------------------------
Epical - Responsive
Description: Responsive Stylesheet
Author: ThemeWorkers
Author URI: http://www.themeworkers.com
Version: 1.3
------------------------------------------------------------------------------------------
Table of Contents:
1 Smaller than standard 960
2 Tablet Portrait Size to standard 960
3 All Mobile Sizes
4 Mobile Landscape Size to Tablet Portrait
5 Mobile Portrait Size to Mobile Landscape Size
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
/* 1 Smaller than standard 960 */
/*--------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {
/* Header ----------------------------------------------------*/
#top { height:auto; text-align:center; }
#logo, #logo a, #menu-container, #footer .one-fourth { width:100%; }
#hidden-area .inner, #header, .callout-box .detail, .callout-box .button { text-align:center; }
/* Post Content ----------------------------------------------*/
.post-thumb .overlay-view span { font-size:28px; letter-spacing:-1px; }
.clear-row { clear:both; }
#post-navigation.blog { float:none; margin:20px 0 10px 0; }
#post-navigation.blog a[rel="prev"] { float:left; }
#post-navigation.blog a[rel="next"] { float:right; }
#home-slider .flex-direction-nav, #to-top, .filter-portfolio .filter-span { display:none !important; }
/* Portfolio Template ----------------------------------------*/
.filter-portfolio { padding:0 8px; /* Left and right edges */ }
.filter-portfolio ul li a, .filter-portfolio ul li a.refresh.current { font-size:13px; }
/* Shortcodes ------------------------------------------------*/
.callout-box .detail, .callout-box .right { width:100%; float:none; }
.callout-box .button {
display:block;
position:relative;
top:0;
right:0;
margin-top:20px;
}
}
/*--------------------------------------------------------------------------------------*/
/* 2 Tablet Portrait Size to standard 960 */
/*--------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* Navigation ------------------------------------------------*/
#menu-container { margin:35px 0 0 0; }
#primary-nav ul li { display:inline-block; /* Center menu items */ float:none; }
#primary-nav ul li a { padding:14px 20px 14px 16px; }
#primary-nav ul li a,
#primary-nav ul li a:hover,
#primary-nav ul li.sfHover > a,
#primary-nav ul li.current-cat > a,
#primary-nav ul li.current_page_item > a,
#primary-nav ul li.current-menu-item > a,
#primary-nav ul li.current-menu-parent > a,
#primary-nav ul li.current-menu-ancestor > a { border:none !important; }
#primary-nav ul li:hover ul, #primary-nav ul li.sfHover ul { top:52px; }
/* Main Content ----------------------------------------------*/
#top, #header, .inner, #footer-widgets, #home-slider .flex-caption .caption-inner { width:640px; }
#main { width:410px; }
#sidebar { width:200px; }
.search-results .search-form #search-field, .search-no-results .search-form #search-field { width:584px; }
/* Post Content ----------------------------------------------*/
.entry-left, #commentform .form-label { width:130px; }
.entry-right { width:470px; }
.blog-sidebar .entry-left { display:none; }
.blog-sidebar .entry-meta { display:block; /* Display entry meta */ }
.blog-sidebar .entry-right { width:100%; }
#blog-navigation { padding:52px 0 0 170px; }
.blog-sidebar #blog-navigation { padding:52px 0 0 0; }
#post-navigation.blog a[rel="prev"] { margin-left:270px; }
#post-navigation.blog a[rel="next"] { margin-right:269px; }
#related-posts { margin:0 0 30px 170px; }
#related-posts ul { margin-left:-50px; }
#related-posts ul li { width:210px; margin:20px 0 0 50px; }
#related-posts .no-image { height:156px; }
.blog-sidebar #related-posts { margin:0 0 30px 0; }
.blog-sidebar #related-posts ul { margin-left:-20px; }
.blog-sidebar #related-posts ul li { width:195px; margin:20px 0 0 20px; }
.blog-sidebar #related-posts .no-image { height:145px; }
.blog-sidebar #related-posts .entry-date { text-align:left; }
/* Comments --------------------------------------------------*/
#comments .comment-title { margin:65px 0 45px 170px; }
.comment .avatar { left:64px; }
.comment .comment-content, .comment-navigation, #commentform .form-submit { margin-left:170px; }
#respond #reply-title { margin:0 0 31px 170px; }
.depth-1 #respond #reply-title { font-size:24px; line-height:32px; margin:0 0 40px 170px; padding-top:5px; }
/* Comment Form (5 levels) -----------------------------------*/
#commentform input[type="text"],
#commentform textarea,
.commentlist .depth-1 #commentform input[type="text"],
.commentlist .depth-1 #commentform textarea { width:436px; }
.commentlist .children .depth-2 #commentform input[type="text"], .commentlist .children .depth-2 #commentform textarea { width:366px; }
.commentlist .children .depth-3 #commentform input[type="text"], .commentlist .children .depth-3 #commentform textarea { width:296px; }
.commentlist .children .depth-4 #commentform input[type="text"], .commentlist .children .depth-4 #commentform textarea { width:226px; }
.commentlist .children .depth-4 #respond .cancel-comment-reply { display:none; }
/* Widgets ---------------------------------------------------*/
#sidebar .search-form #search-field, #footer .one-third .search-form #search-field { width:144px; }
.dribbble-list li, .dribbble-list li img, .flickr-list li, .flickr-list li img, .tw_widget_recent_work ul li { width:64px; height:64px; }
/* Homepage Template -----------------------------------------*/
#home-slider .flex-caption { max-width:640px; }
#home-slider .flex-caption .caption-inner { bottom:50px; }
#home-slider .flex-caption h1 { font:700 28px/36px 'Roboto'; letter-spacing:-1px; }
#home-slider .flex-caption h2 { font:300 18px/28px 'Roboto'; letter-spacing:0; }
/* Portfolio Template ----------------------------------------*/
.portfolio-container.col-third, .portfolio-container.col-fourth { margin:-20px -20px 0 0; }
.portfolio-project.col-third, .portfolio-shortcode .portfolio-project.col-fourth, #related-projects .portfolio-project.col-fourth { width:310px; height:310px; margin:20px 20px 0 0; }
.portfolio-project.col-fourth, .portfolio-shortcode .portfolio-project.col-third { width:200px; height:200px; margin:20px 20px 0 0; }
#related-projects .portfolio-project.col-fourth .project-info h2 { font:700 24px/32px 'Roboto'; }
#portfolio-left { width:400px; margin:0 30px 33px 0; }
#portfolio-right { width:210px; }
/* Contact Template ------------------------------------------*/
#map-container .inner { margin-left:-320px; }
#contact-form .col-half { width:310px; margin-right:20px; }
#contact-form input[type="text"], #contact-form textarea { width:276px; }
/* Shortcodes ------------------------------------------------*/
.pricing-column.fourth .pricing-header .price, .pricing-column.fifth .pricing-header .price { font-size:30px; }
.pricing-column.featured.fourth .pricing-header .price, .pricing-column.featured.fifth .pricing-header .price { font-size:32px; }
.recent-posts-container ul { margin:0 0 0 -20px; }
.recent-posts .blog-item { width:145px; margin:0 0 0 20px; }
.recent-posts .no-image { height:108px; }
.recent-posts .blog-item .post-thumb .overlay-view span { font-size:14px; }
.portfolio-shortcode .portfolio-project.col-third .project-info h2 { font:700 18px/26px 'Roboto'; letter-spacing:0; }
.portfolio-shortcode .portfolio-project.col-fourth .project-info h2 { font:700 24px/32px 'Roboto'; letter-spacing:-1px; }
.staff-member .staff-info h3 strong { display:block; }
.service-container.small h2 { padding-top:0; }
}
/*--------------------------------------------------------------------------------------*/
/* 3 All Mobile Sizes */
/*--------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
/* Navigation ------------------------------------------------*/
#menu-container { margin:35px 0; }
.select-menu, .mobile-select { display:block; /* Display responsive dropdown menu */ }
.select-menu {
width:300px;
height:40px;
position:relative;
margin:0 auto;
z-index:100;
opacity:0;
}
.mobile-select {
background-color:#30a4e7;
background-image:url(../images/bg-mobilemenu.png);
background-position:14px 14px;
background-repeat:no-repeat;
width:300px;
height:40px;
font-family:'Roboto';
font-weight:700;
color:#fff;
text-align:center;
line-height:40px;
position:absolute;
bottom:0;
z-index:0;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#primary-nav, #home-slider .flex-inner { display:none; }
/* Header ----------------------------------------------------*/
#header .page-title { font-size:38px; line-height:46px; letter-spacing:-1px; }
#header .page-tagline, #home-intro .home-tagline, #project-heading .entry-tagline { font-size:18px; line-height:30px; letter-spacing:0; }
/* Main Content ----------------------------------------------*/
#content, #related-projects { margin-bottom:70px; }
#sidebar { margin-top:40px; }
#main, #sidebar { float:none !important; }
.entry-left, .entry-right, .blog-sidebar .entry-right, #portfolio-left, #portfolio-right, #contact-form .col-half, #commentform .form-label { width:100%; }
.error-page-title { font:900 120px/150px 'Roboto'; }
.page-template-template-sitemap-php #content { margin-bottom:42px; }
/* Post Content ----------------------------------------------*/
.entry-left { display:none; }
.entry-meta { display:block; /* Display entry meta */ }
.entry-title, .entry-title a, #project-heading h1 { font-size:28px; line-height:36px; }
#related-posts { margin:0 0 30px 0; }
#blog-navigation { padding:52px 0 0 0; }
/* Comments --------------------------------------------------*/
#comments .comment-title { font-size:28px; margin:57px 0 45px 0; }
#comments .comment-title sup { font-size:20px; top:-8px; }
#comments #pinglist .comment-title { font-size:20px; }
.commentlist .children li { margin:0; }
.comment .comment-content { margin-left:100px; }
#respond { margin:53px 0 70px 0; }
#respond.closed { margin:53px 0 65px 0; }
#respond #reply-title, .depth-1 #respond #reply-title { font:700 20px/26px 'Roboto'; margin:0 0 31px 0; }
#commentform .form-label { text-align:left; display:block; margin:0; }
#commentform .form-submit, #pinglist, .comment-navigation { margin-left:0; }
/* Widgets ---------------------------------------------------*/
.dribbble-list, .flickr-list, .tw_widget_recent_work ul { margin:0 -2px -2px 0; }
.dribbble-list li, .flickr-list li, .tw_widget_recent_work ul li { margin:0 2px 2px 0; }
/* Footer ----------------------------------------------------*/
#footer-bottom .inner .left, #footer-bottom .inner .right { float:left; }
#callout-footer h2 { font:700 26px/34px 'Roboto'; }
/* Homepage Template -----------------------------------------*/
#home-intro .home-title { font:700 24px/32px 'Roboto'; }
/* Portfolio Template ----------------------------------------*/
.filter-portfolio ul li { margin:0 3px 8px 0; }
.portfolio-project.col-third { width:300px; height:300px; }
#portfolio-left { margin:0 0 33px 0; }
#project-meta ul { background:url(../images/bg-dots.png) 0 top repeat-x; }
/* Contact Template ------------------------------------------*/
#map-container { height:auto !important; }
#map-container .inner { position:relative; left:0; margin:40px auto 0 auto; }
#map_canvas { height:300px; }
#map-info .contact-container, #map-info .directions-container { padding:0; }
#map-info .directions-container { border-top:none; }
.contact-title { font:700 36px/44px 'Roboto'; }
#map-info {
position:relative;
top:0;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
/* Shortcodes ------------------------------------------------*/
.one-half,
.one-third,
.two-third,
.one-fourth,
.three-fourth,
.one-fifth,
.two-fifth,
.three-fifth,
.four-fifth,
.one-sixth,
.five-sixth { width:100%; margin:0 0 30px 0; }
.entry-content .pricing-table, .pricing-column.featured { margin-top:0; }
.pricing-table .pricing-column.half,
.pricing-table .pricing-column.third,
.pricing-table .pricing-column.fourth,
.pricing-table .pricing-column.fifth { width:100%; margin-bottom:20px; }
.pricing-table .pricing-column:last-child { margin-bottom:0; }
#related-posts ul li .entry-date, .recent-posts .blog-item .entry-date, .tw_widget_recent_posts .entry-date { text-align:left; }
.recent-posts-container ul { margin:0; }
.recent-posts .blog-item { margin:0 0 20px 0; }
.recent-posts .blog-item:last-child { margin:0; }
}
/*--------------------------------------------------------------------------------------*/
/* 4 Mobile Landscape Size to Tablet Portrait */
/*--------------------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* Navigation ------------------------------------------------*/
.mobile-select { left:60px; }
/* Main Content ----------------------------------------------*/
#top, #header, .inner, #main, #sidebar, #map-info, #footer-widgets, .recent-posts .blog-item { width:420px; }
.search-results .search-form #search-field,
.search-no-results .search-form #search-field,
#sidebar .search-form #search-field,
#footer .one-third .search-form #search-field,
#footer .one-fourth .search-form #search-field { width:364px; }
/* Post Content ----------------------------------------------*/
#post-navigation.blog a[rel="prev"] { margin-left:160px; }
#post-navigation.blog a[rel="next"] { margin-right:159px; }
.blog-sidebar #related-posts ul { margin-left:-20px; }
#related-posts ul li, .blog-sidebar #related-posts ul li { width:200px; margin:20px 0 0 20px; }
#related-posts .no-image, .blog-sidebar #related-posts .no-image { height:149px; }
/* Comments --------------------------------------------------*/
.comment .avatar { left:0; }
#commentform input[type="text"],
#commentform textarea,
.commentlist .depth-1 #commentform input[type="text"],
.commentlist .depth-1 #commentform textarea,
.commentlist .children .depth-2 #commentform input[type="text"],
.commentlist .children .depth-2 #commentform textarea,
.commentlist .children .depth-3 #commentform input[type="text"],
.commentlist .children .depth-3 #commentform textarea,
.commentlist .children .depth-4 #commentform input[type="text"],
.commentlist .children .depth-4 #commentform textarea,
#contact-form input[type="text"],
#contact-form textarea { width:386px; }
/* Portfolio Template ----------------------------------------*/
.portfolio-container.col-third, .portfolio-container.col-fourth { margin:-20px -20px 0 0; }
.portfolio-project.col-third, .portfolio-project.col-fourth { width:200px; height:200px; margin:20px 20px 0 0; }
.portfolio-project.col-third .project-info h2 { font:700 18px/26px 'Roboto'; letter-spacing:0; }
/* Shortcodes ------------------------------------------------*/
.portfolio-shortcode .portfolio-project.col-third { width:300px; height:300px; margin:20px 0 0 60px; }
.portfolio-shortcode .portfolio-project.col-third .project-info h2 { font:700 24px/32px 'Roboto'; letter-spacing:-1px; }
.recent-posts .no-image { height:312px; }
}
/*--------------------------------------------------------------------------------------*/
/* 5 Mobile Portrait Size to Mobile Landscape Size */
/*--------------------------------------------------------------------------------------*/
@media only screen and (max-width: 479px) {
/* Main Content ----------------------------------------------*/
#top, #header, .inner, #main, #sidebar, #map-info, #footer-widgets, #related-posts ul li, .blog-sidebar #related-posts ul li, .recent-posts .blog-item { width:300px; }
.search-results .search-form #search-field,
.search-no-results .search-form #search-field,
#sidebar .search-form #search-field,
#footer .one-third .search-form #search-field,
#footer .one-fourth .search-form #search-field { width:244px; }
/* Post Content ----------------------------------------------*/
#post-navigation.blog a[rel="prev"] { margin-left:100px; }
#post-navigation.blog a[rel="next"] { margin-right:99px; }
#related-posts .no-image,
.blog-sidebar #related-posts .no-image,
.recent-posts .no-image { height:223px; }
/* Comments --------------------------------------------------*/
.comment .avatar { display:none; }
.comment .comment-content { margin-left:30px; }
/* Comment Form (5 levels) -----------------------------------*/
#commentform input[type="text"],
#commentform textarea,
.commentlist .depth-1 #commentform input[type="text"],
.commentlist .depth-1 #commentform textarea,
.commentlist .children .depth-2 #commentform input[type="text"],
.commentlist .children .depth-2 #commentform textarea,
.commentlist .children .depth-3 #commentform input[type="text"],
.commentlist .children .depth-3 #commentform textarea,
.commentlist .children .depth-4 #commentform input[type="text"],
.commentlist .children .depth-4 #commentform textarea,
#contact-form input[type="text"],
#contact-form textarea { width:266px; }
/* Portfolio Template ----------------------------------------*/
.portfolio-container.col-third, .portfolio-container.col-fourth { margin:-20px 0 0 0; }
.portfolio-project.col-fourth { width:300px; height:300px; margin:20px 0 0 0; }
.portfolio-project.col-fourth .project-info h2 { font:700 24px/32px 'Roboto'; letter-spacing:-1px; }
}