/*

Theme Name: Ideograph Theme

Theme URI: http://www.dessign.net/ideographtheme/

Description: Responsive Ideograph Theme for WordPress is stylish, customizable, simple, and readable. Perfect for any illustrator or graphic designer. 

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-size: 12px; font-family: verdana, arial, georgia; color: #898989; background: url('images/white-bg-wide.png') #f5f5f5 repeat-y; background-position: top center; }

h1,h2,h3,h4,h5,p { margin: 10px 0; }

img { border: none; }

.left { float: left; }

.right { float: right; }

.clear { clear: both; }

a { color: #333;}

a:hover { text-decoration:underline; color:#333; }

#main_container { width: 927px; margin: 0 auto; padding: 0 25px; }



/* Header */

#header { padding: 10px 0 25px; }

.logo { float: left; }

.social_cont { float: right; }

.social_cont img { float: left; margin-left: 10px; }



#menu_container { padding: 10px 0; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; }

#menu_container ul { float: left; list-style-type: none; border-right: 1px dotted #ccc; }

#menu_container ul li { float: left; }

#menu_container ul li a { color: #000; padding: 3px; margin: 0 15px; display: block; text-decoration: none; }

#menu_container ul li a:hover { color: #fff; background-color: #6b164e; }

#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { color: #fff; background-color: #000; }

#menu_container ul.cat_list { border-right: none; }



/* Content */

#slider img { width: 309x; height: 514px; }

#content { padding: 20px 0 10px; }

#slider_container { float: left; width: 309px; }

#single_left { float: left; width: 670px; }



.home_medium_post_box { float: left; margin-left: 10px; margin-bottom: 10px; overflow: hidden; }

.home_medium_post_box img { width: 299px; height: 165px; }

.hover_caption_caption { padding: 0 !important; }

.hover_title { font-size: 13px; color: #fff; }

.hover_desc { font-size: 11px; margin-top: 10px; color: #9c9c9c; }

.hover_cont { padding: 10px; }



.home_medium_post_first { margin-left: 0 !important; }

.cat_list_cont .home_medium_post_box { margin-left: 15px; }



.home_small_posts_cont { padding: 15px 0 0; border-top: 1px solid #ccc; }



.home_small_post_box { float: left; margin-right: 10px; }

.home_small_post_box img { width: 224px; height: 124px; }

.home_small_post_box_last { margin-right: 0; }

.single_title { text-align: center; padding: 50px 10px 0 10px; font-size: 13px; color: #fff; }



.blog_post_box { margin-bottom: 15px; color: #1b1b1b; }

.blog_post_box h3 { margin-top: 0; font-size: 14px; color: #1b1b1b; }

.blog_post_box h3 a { text-decoration: none; color: #1b1b1b; }

.blog_post_box h3 a:hover { text-decoration: underline; }

.blog_post_box img { float: left; margin-right: 10px; width: 368px; height: 203px;  }



.single_post_box h3 { margin-top: 0; font-size: 14px; color: #1b1b1b; }

.single_post_box h1 { margin-top: 0; /*font-size: 14px;*/ color: #1b1b1b; }

.single_post_box { margin-bottom: 15px; color: #1b1b1b; }



.blog_nav_cont { padding: 15px 0; }

.blog_nav_cont a { color: #898989; text-decoration: none; }



    .hover_caption {

      /* If you can count of CSS3 support: */

      background-color: rgba(0, 0, 0, 0.7);

  

      /* Or use a transparent image if you need to support bad browsers: */

      /*background-image: url(images/hover_caption_bg.png);*/

  

      /* NOTE: If you're img elements have paddings or margins you'll need to

      match them here to get things lined up properly. */

    }

  

#commentform input[type=submit] { background-color: #000; border: none; color: #fff; padding: 8px 10px; }

#commentform a { color: #000; }



.commentlist a { color: #000; }  



/* Sidebar */

#sidebar { float: right; width: 224px; }

.side_box { margin-bottom: 15px; }

.side_box img { width: 224px; height: 124px; }



/* Footer */

#footer { margin-top: 15px; border-top: 1px dotted #ccc; padding-top: 20px; }

.footer_box { float: left; width: 280px; padding-right: 15px; margin-right: 15px; border-right: 1px solid #ccc; font-size: 10px; color: #898989; }

.footer_box h3 { margin-top: 0; margin-bottom: 15px; font-size: 12px; color: #403f3f; }

.footer_box ul { list-style-type: none; }

.footer_box ul li { margin-bottom: 5px; }

.footer_box a { color: #898989; text-decoration: none; }

.footer_box a:hover { text-decoration: underline; }



.footer_box_last { margin-right: 0; padding-right: 0; border-right: none; }



.footer_copyright { margin: 15px 0; padding: 10px 0; text-align: right; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; font-size: 10px; }

.footer_copyright a { color: #898989; text-decoration: none; }

.footer_copyright a:hover { text-decoration: underline; }







/* 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; }

.logo { float: none; }



#commentform textarea { width: 220px; }

#sidebar { display: none; }

#single_left { float: none; width: 275px; margin-left: auto; margin-right: auto; }

#single_left .single_left_cont img { width: 275px; height:inherit; }



/*.blog_post_box { margin: 0 auto 25px; padding-bottom: 25px; border-bottom: 1px solid #CFCFC9; width: 275px; }

.blog_post_box img { float: none; margin-right: 0px; margin-bottom: 10px; width: 275px; height:inherit; }*/



.blog_post_box { margin: 0 auto 15px; color: #1b1b1b; width: 275px; }

.blog_post_box img { float: none; margin-right: 0px; margin-bottom: 10px; width: 275px; height: inherit;  }



.home_medium_post_box { float: none; margin: 0 auto 10px; width: 275px; height: 155px; }

.home_medium_post_box img { width: 275px; height: 155px; }

.home_medium_post_first { margin-left: auto !important; }

.cat_list_cont .home_medium_post_box { margin-left: auto; }



.home_small_posts_cont { display: none; }



/*.home_post_box { display: block; width: 275px; float: none; margin: 0 auto 15px auto; }

.home_post_box img { width: 275px; height: 185px; }

.home_post_box_last { margin-right: auto !important; }*/



.social_cont { display: none; }

#menu_container { border-top: none; border-bottom: none; }

#menu_container ul { float: left; border-right: none; width: 115px; margin-left: 23px; }

#menu_container ul li { float: none; margin-bottom: 3px; }

#menu_container ul li a { margin: 0 0px; }



#menu_container ul.cat_list { margin-left: 43px; }





#footer { display: none; }



}







/* for tablet */

@media only screen and (min-width: 768px) and (max-width: 959px) {



#main_container { width: 728px; padding: 10px 0;  }

.search_box { display: none; }



#menu_container ul li a { margin: 0 12px; }



/*

#slider_container { width: 728px; height: 223px; }



#slideshow {

    position:relative;

    width: 728px;

    height:223px;

}



#slideshow img { width: 728px; height: 223px; }*/



#single_left { width: 500px; }

#single_left .single_left_cont img { max-width: 500px; height: inherit; }

#sidebar { width: 200px;  }

.side_box img { width: 200px; height: 112px; }



.side_post_box { width: 200px; }

.side_post_box img { max-width: 200px; height: inherit; }



#slider_container { width: 244px; }

#slider img { height: 425px; width: 244px; }

#slider_container { float: left; width: 244px; }





.home_medium_post_box { width: 232px; height: 135px; }

.home_medium_post_box img { width: 232px; height: 135px; }



.blog_post_box img { float: none; margin-right: 0; margin-bottom: 10px;  }





.home_small_post_box img { width: 174px; height: 99px; }



.footer_box { width: 220px; }



/*#slideshow { height: 273px; width: 728px; }



#slider_container {

height: 273px; width: 728px;

}



body #slider_container #slideshow img { width: 728px !important; height: 273px !important; }

#slider_container img.slide_prev { top: 125px; }

#slider_container img.slide_next { left: 694px; top: 125px; }*/



/*

.home_post_box { float: left; width: 200px; margin-right: 23px; }

.home_post_box img { width: 200px; height: 146px; }



.home_post_box_last { margin-right: 0; }*/



/*

.footer_box { width: 227px; float: left; margin-right: 23px; color: #282828; }

.footer_box_last { margin-right: 0; }*/



}