/*

Theme Name: Grid Portfolio Responsive

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

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

Version: 3.0

Author: Marios Lublinski

Author URI: http://www.dessign.net

Tags: 2 column theme, white, clean



*/



/* Global */



* { margin: 0; padding: 0; }

body { background-color: #edeeee; color: #303030; font-size: 12px; font-family: arial, georgia, verdana; }

#main_container { width: 968px; background-color: #fff; margin: 0 auto; }

.clear { clear: both; }

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

h3 { font-size: 11px; color:#525252; }

.left { float: left; }

.right { float: right; }

a { color: #525252; text-decoration: none; }

a:hover { text-decoration:underline; }

img { border: none; }



/* Header */



#menu_container { width: 938px; padding: 20px 15px 20px 20px; border-bottom: 1px solid #eee; }

#menu_container ul { list-style-type: none; }

#menu_container ul li { float: left; margin: 0 10px; font-size: 11px; }

#menu_container .left_list { float: left; text-transform: uppercase; font-weight: bold;}

#menu_container .right_list { float: right; }

#menu_container .right_list li { margin: 0 5px; }



#header_container { width: 953px; padding: 20px 0px 20px 30px; border-bottom: 1px solid #eee; }

.logo { float: left; }

#header_container .right_text { float: right; background-color:#afafaf; font-size: 15px; color: #fff; padding: 5px; font-weight: normal; }



#header_category_container { width: 910px; background-color: #fff; padding: 1px 29px; color: #fff; margin-top: 5px; margin-bottom: 5px; }

#header_category_container ul { list-style-type: none; }

#header_category_container ul li { float: left; margin-right: 20px; font-size: 15px; font-weight: normal; }

#header_category_container ul li a { color: #fff; }





#featured_home_top { width: 910px; padding: 1px 29px;}

#featured_home_top .home_top_box { width: 284px; float: left; margin-right: 25px; }

#featured_home_top .home_top_box img { width: 284px; height: 176px; }

#featured_home_top .last { margin-right: 0px; }



/** Content **/



#content { width: 968px; float: left; margin-top: 15px; }



#content .featured_box { width: 250px; float: left; margin-right: 50px; color:#afafaf; }

#content .featured_box img { width: 240px; height: 250px; }

#content .featured_box p { font-size: 11px; color:#afafaf; }

#content .last { margin-right: 0px; }

#content .first { margin-left: 61px; }



#content .single { padding-left: 29px; width: 920px; }
#content .category_intro { padding-left: 29px; padding-right: 29px; margin-bottom: 30px }

#content .single h1 { font-size: 26px; padding-bottom:10px; }



#content .post_divider { width: 100%; height: 2px; border-bottom: 1px solid #eee; margin: 30px 0; }

.nav_container { width: 880px; margin: 15px 0; padding: 0 10px; }





/** Footer **/



#footer { width: 958px; padding: 5px 5px; text-align: right; border-top: 1px solid #eee; margin-top: 5px; color:#afafaf; }



/* for tablet */



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



#main_container { width: 728px; }

#menu_container { width: 698px; padding: 20px 15px; border-bottom: 1px solid #eee; }



#header_container { width: 713px; padding: 20px 0px 20px 15px; border-bottom: 1px solid #eee; }

#header_category_container { width: 670px; padding: 1px 29px; }



#featured_home_top { width: 670px; padding: 1px 29px;}

#content { width: 728px; float: left; margin-top: 15px; }

.tablet_clear { clear: both; }

.home_posts .clear { clear: none; }

.post_divider { display: none; }

.tablet_post_divider { width: 100%; height: 2px; border-bottom: 1px solid #eee; margin: 30px 0; }



.nav_container { width: auto; margin: 15px 0; padding: 0 10px; }



#content .featured_box { margin-left: 61px; }

#content .tab_right { float: right; margin-right: 45px; margin-left: 0; }



#content .single { padding-left: 29px; width: 670px; }

#content .single .single_content img { max-width: 670px; height: inherit; }



#sidebar { display: none; }



#footer { width: 718px; padding: 5px 5px; }



}







/* for mobile */



@media screen and (max-width: 480px) {



#main_container { width: 320px; }

#menu_container { width: 290px; padding: 20px 15px; border-bottom: 1px solid #eee; }



#header_container { width: 300px; padding: 20px 10px 20px 10px; border-bottom: 1px solid #eee; }

.logo { max-width: 300px; height: inherit; }

#header_category_container { width: 300px; padding: 1px 10px; }



#featured_home_top { width: 300px; padding: 1px 10px;}

#content { width: 320px; float: none; margin-top: 15px; margin: 0 auto; }

.right_list { display: none; }



#featured_home_top .home_top_box { width: 284px; float: none; margin: 0 auto; }

#featured_home_top .home_top_box img { width: 284px; height: 176px; }



#content .featured_box { width: 250px; float: none; margin: 0 auto 25px; }

#content .featured_box img { width: 240px; height: 250px; }

#content .first { margin-left: auto; }



#content .post_divider { display: none; }



#content .single { padding: 0; width: 300px; margin: 0 auto; float: none; }

#content .single .single_content img { max-width: 300px; height: inherit; }

#commentform textarea { width: 280px; }



.nav_container { width: auto; margin: 15px 0; padding: 0 10px; }



#footer { display: none; }



}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.commentlist {
	list-style: none;  
	margin-top: 50px;
}
 
 
.commentlist ul {
	list-style: none;
}
 
.comment-body {
	background-color: #F4F4F4;
	-moz-border-radius: 6px;        /* Funktioniert logischerweise nur im Firefox und Webkit-Browsern(Safari, Chrome) */
	-webkit-border-radius: 6px;
	margin-bottom: 20px;
	padding: 15px;
	margin-left: 70px;
	position: relative; /* sorgt dafür, dass das Gravatar-Bild sich bei position:absolute relativ zu seinem comment-body verhält. */
}
 
.comment-body p {
	margin: 5px 0 35px 0;
}
 
.comment-meta {
	display: none; /* Datum des Kommentars ausblenden */
}
 
.bypostauthor .comment-body {
	/* Kommetare des Autors z.B. farblich hervorheben */
}
 
.children {
	margin-left: 70px; /* Anworten werden 70px eingerügt */
}
 
.vcard img {
	background-image: url(img/comments_bg.jpg); /* Grafik mit dem kleinen Pfeil */
	background-repeat: no-repeat; 
	background-position: 60px 15px; /* Pfeil rechts neben der Grafik positionieren */
	padding-right: 50px; /* Platz nach rechts für die Hintergrundgrafik schaffen und Abstand zur Box schaffen */
	position: absolute; /* Gravatar aus dem comments-body herauslösen.. */
	left: -70px; /* und links neben ihm positionieren */
	top: 0;
}
.reply {
	background-color: #E0E0E0;
	width: 60px;
	padding: 2px 6px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	position: relative;
	top: -18px;
	left: 7px;
	float: right;
}
 
.reply a {
	color: black;
	border: none;
}
 
.reply:hover {
	background-color: #C11010;
}
 
.reply:hover a {
	color: white;
	background-color: #C11010;
}

p.nocomments, h3.comments {
	clear: both;
	padding-top: 40px;
	display:none;
}

#respond {
	clear:both;
	padding-top:20px;
}

.g-recaptcha {
	float: right;
    padding-bottom: 24px;
}