/*

Theme Name: Gatefold Theme

Theme URI: http://www.dessign.net/gatefoldtheme/

Description: Responsive Gatefold Theme

Version: 2.0

Author: Marios Lublinski

Author URI: http://www.dessign.net

Tags: 4 column theme, clean, portfolio

*/



/* Global */

* { margin: 0; padding: 0; }

body { font-family:verdana, georgia; font-size: 11px; background-color: #ccc; }

#main_container { width: 909px; margin: 10px auto; background-color: #fff; padding: 10px 40px; }

h1,h2,h3,h4,h5,p { margin: 10px 0; }

img { border: none; }

a { color: #333;}

a:hover { text-decoration:underline; color:#333; }

.left { float: left; }

.right { float: right; }

.clear { clear: both; }



/* Header */

#header { padding: 20px 0; font-size: 11px; font-family: verdana; font-weight: bold; }

#header a { color: #666; text-decoration: none; }

#header a:hover { text-decoration:none; color: #000; }

.logo { float: left; border: none; }

.social_menu_cont { float: right; width: 90px; margin-right: 10px; }

.social_menu_cont ul { list-style-type: none; }

.social_menu_cont ul li { margin-bottom: 3px; }



.cat_menu_cont { width: 380px; float: right; }

.cat_menu_cont .current_page_item a, .cat_menu_cont .current-menu-item a { text-decoration:none; color: #000 !important; }

.cat_menu_cont ul { list-style-type: none; }

.cat_menu_cont ul li { width: 180px; float: left; margin-right: 10px; margin-bottom: 3px; }



.header_menu_cont { float: right; width: 155px; margin-right: 10px; }

.header_menu_cont .current_page_item a, .header_menu_cont .current-menu-item a { text-decoration:none; color: #000 !important; }

.header_menu_cont ul { list-style-type: none; }

.header_menu_cont ul li { margin-bottom: 3px; }



/* Content */



#slider_container { width: 909px; height: 283px; overflow: hidden; position: relative; }

/*#slider_container img { width: 909px; height: 283px; }*/

.slide_img { width: 909px !important; height: 283px !important; }

.home_featured_text { padding: 15px 5px 20px; color: #666; background: url('images/lines-divider.png') repeat-x; background-position: bottom center; }



a.home_post_box { display: block; width: 215px; padding: 4px; float: left; margin-right: 5px; margin-top: 20px; text-decoration: none; color: #333; }

a.home_post_box:hover { background-color: #eeeeee; }

a.home_post_box img { border: none; width: 215px; height: 95px; }

a.home_post_box h3 { font-size: 12px; margin-bottom: 5px; color: #333; }

a.home_post_box p { margin-top: 0; color: #666; }

.last_home_post_box { margin-right: 0 !important; }



.blog_box { padding: 15px 0; border-bottom: 1px solid #E6E6E6; }

.blog_box img { float: left; margin-right: 15px; width: 535px; height: 210px; }

.blog_box h3 { font-size: 12px; margin-top: 0; }

.blog_box h3 a { color: #333; text-decoration: none; }

.blog_box h3 a:hover { text-decoration: none; color: #666; }



.nav_container { padding: 15px 0; }

.nav_container a { color: #333; }



.single_box { padding: 15px 0; }

#single_left { float: left; width: 630px; }

.single_box h1 { font-size: 12px; color:#333;}



#commentform a { color: #333; }

#commentform input[type=submit] { background-color: #333; border: none; color: #fff; padding: 8px 10px; }



/* Sidebar */



#sidebar { float: right; width: 220px; margin-top: 30px; }



a.side_post_box { display: block; width: 215px; padding: 4px; margin-bottom: 20px; text-decoration: none; color: #333; }

a.side_post_box:hover { background-color: #eeeeee; }

a.side_post_box img { border: none; width: 215px; height: 95px; }

a.side_post_box h3 { font-size: 12px; margin-bottom: 5px; color: #333; }

a.side_post_box p { margin-top: 0; color: #666; }



/* Footer */



#footer { padding-top: 35px; background: url('images/lines-divider.png') repeat-x; background-position: top center; margin-top: 30px; }

.footer_box { width: 210px; float: left; margin-right: 20px; }

.footer_box h3 { font-size: 12px; margin-bottom: 15px; color: #333; }

.footer_box ul { list-style-type: none; color: #000; }

.footer_box ul li { margin-bottom: 5px; }

.footer_box ul li a { color: #000; text-decoration: none; }

.footer_box ul li a:hover { text-decoration: none; color: #666; }

.footer_box_last { margin-left: 20px; margin-right: 0; width: 185px; }



.footer_copyright { padding: 5px 0; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; text-align: right; margin: 20px 0; }

.footer_copyright a { color: #333; text-decoration: none; }

.footer_copyright a:hover { text-decoration: underline; }











#slideshow {

    position:relative;

    height:283px;

    width: 909px;

}



#slideshow img { width: 909px; height: 283px; }



#slideshow a {

    position:absolute;

    top:0;

    left:0;

    z-index:8;

}



#slideshow a.active {

    z-index:10;

}



#slideshow a.last-active {

    z-index:9;

}





#slider_container img.slide_prev { position: absolute; top: 130px; left: 15px; z-index: 999; width: 19px !important; height: 24px !important; display: block; }

#slider_container img.slide_next { position: absolute; top: 130px; left: 875px; z-index: 999; width: 19px !important; height: 24px !important; display: block; }







/* for mobile */

@media screen and (max-width: 480px) {



#main_container { width: 320px; padding: 10px 0px; }

#menu_container { display: none; }

/*.home_post_cont { margin-right: auto; margin-left: auto; float: none; clear: both; }*/

#slider_container { display: none; }



.cat_menu_cont { width: 110px; float: right; margin-right: 40px; }

.cat_menu_cont ul li { float: none; margin-right: 0px; margin-bottom: 3px; width: 120px; }



.header_menu_cont { float: left; width: 110px; margin-left: 40px; }

.header_menu_cont ul li { margin-bottom: 3px; }





#footer { display: none; }

#commentform textarea { width: 220px; }

#sidebar { display: none; }

#single_left { float: none; width: 228px; margin-left: auto; margin-right: auto; }

#single_left img { width: 228px; height:inherit; }



.blog_box { float: none; width: 228px; margin-left: auto; margin-right: auto; }

.blog_box img { width: 228px; height:inherit; float: none; margin: 0 0 10px 0; }



.nav_container { width: 228px; margin-left: auto; margin-right: auto; }



a.home_post_box { display: block; width: 255px; padding: 4px; float: none; margin: 20px auto 0 auto; }

a.home_post_box img { border: none; width: 255px; height: 110px; }

.last_home_post_box { margin-right: auto !important; }



/*.home_post_box { margin-bottom: 20px; width: 258px; margin-right: auto; margin-left: auto; float: none; }*/



.home_featured_text { display: none; }

.social_menu_cont { display: none; }



.logo { float: none; margin: 0 auto 15px; clear: both; display: block; }

.logo_link { clear: both; margin: 0 auto 0px; }



}







/* for tablet */

@media only screen and (min-width: 768px) and (max-width: 959px) {



#main_container { width: 728px; padding: 10px 0;  }

#slider_container { width: 728px; height: 223px; }

#slider_container .slider-wrapper #slider img.slide_img { width: 728px !important; height: 223px !important; }



#single_left { width: 500px; }

#single_left .single_content img { max-width: 500px; height: inherit; }

.nivoSlider { width:728px; /* Change this to your images width */ }

#sidebar { width: 200px; float: right; margin-top: 20px; }



a.side_post_box { display: block; width: 192px; padding: 4px; margin-bottom: 20px; text-decoration: none; color: #333; }

a.side_post_box img { border: none; width: 192px; height: 86px; }



#slideshow { height: 223px; width: 728px; }



#slider_container {

height: 223px; width: 728px;

}



body #slider_container #slideshow img { width: 728px !important; height: 223px !important; }

#slider_container img.slide_prev { top: 100px; }

#slider_container img.slide_next { left: 694px; top: 100px; }





a.home_post_box { width: 170px; }

a.home_post_box:hover { background-color: #eeeeee; }

a.home_post_box img { border: none; width: 170px; height: 75px; }



.footer_box { width: 154px; }

.cat_menu_cont { width: 190px; }



}