/* -------------------------------------------------- 
	design for 768px
/* -------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
body{overflow-x:hidden;}
.header{margin-top:0px;}
#portfolio{margin:0; padding:0;}
#portfolio li,  #portfolio li .square, #portfolio li img, #portfolio li .frame, #portfolio li .square, #portfolio li .clickarea, #portfolio li .bginfo{width:450px; height:338px;}
#portfolio li .corner{margin-top:161px;}
#portfolio li .title {margin-top:159px;}
.shadow{ display:none;}
#portfolio li .info{ padding:40px; width:390px; height:228px; overflow:auto;}
.main{width:512px;}
#content{width:450px;}
.grid_8{width:512px;}
#tagline, #social-icons{width:225px;}
.container_12 .grid_4{width:215px; }
.container_12 .one_third{width:135px;}
.container_12 .two_third{width:290px;}
#bloglist li .date,#bloglist li .by, #bloglist li .cat,
#blogread .date,#blogread .by, #blogread .cat { display:block; text-align:left; margin:0;}
#bloglist li .comment-count, #blogread .comment-count{display:none;}
}

/* -------------------------------------------------- 
	design for 480px
/* -------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
body{overflow-x:hidden;}
.header{margin-top:0px;}
#canvas{position:relative;}
#mainlogo{text-align:center;}
.sidebar{ display:block; padding-left:0;position:inherit; margin:0; width:420px;}
#slide-list{display:none;}
#wrapper{margin:0 auto; position:absolute; width:100%;}
#content, #footer{width:420px;}
.container_12 .grid_4, .container_12 .one_third, .container_12 .two_third{width:420px; margin-bottom:20px;}
.container_12{ width:420px; margin:0 auto;}
.main{width:420px; position:inherit; margin:0 auto; padding:0; border-left:none;}
.grid_8{width:420px;}
.header{margin-top:20px; margin-bottom:20px; padding:0; width:420px;}
#tagline{ display:none;}
#social-icons{ margin:10px 0 0 0; display:block; width:420px; text-align:center;}
#twitter{display:none;}
.selectnav{ display:block; width:100%; margin-bottom:60px; margin-top:20px;}
.mainmenu ul{display:none;}
.mainmenu select{padding:10px; border:solid 1px #eaeaea; margin:0 auto; width:100%;}
#bloglist li .date,#bloglist li .by, #bloglist li .cat,
#blogread .date,#blogread .by, #blogread .cat { display:block; text-align:left; margin:0;}
#bloglist li .comment-count, #blogread .comment-count{display:none;}
#widget-area{display:none;}
.category li a:hover,.category li.active a{color:#000; padding:0px 10px 0px 10px; margin:0;}	
.separator-b{background:none; visibility:hidden;}
}



		
/* -------------------------------------------------- 
	design for 320px
/* -------------------------------------------------- */
@media only screen and (max-width: 479px) {
body{overflow-x:hidden;}
#canvas{position:relative;}
#mainlogo{text-align:center;}
.sidebar{ display:block; padding-left:0;position:inherit; margin:0; width:280px;}
#slide-list{display:none;}
#wrapper{margin:0 auto; position:absolute; width:100%;}
#content, #footer{width:280px;}
.container_12 .grid_4, .container_12 .one_third, .container_12 .two_third{width:280px; margin-bottom:20px;}
.container_12{ width:280px; margin:0 auto;}
.main{width:280px; position:inherit; margin:0 auto; padding:0; border-left:none;}
.grid_8{width:280px;}
.header{margin-top:20px; margin-bottom:20px; padding:0; width:280px;}
#tagline{ display:none;}
#social-icons{ margin:10px 0 0 0; display:block; width:280px; text-align:center;}
#twitter{display:none;}
.selectnav{ display:block; width:100%; margin-bottom:60px; margin-top:20px;}
.mainmenu ul{display:none;}
.mainmenu select{padding:10px; border:solid 1px #eaeaea; margin:0 auto; width:100%;}
#bloglist li .date,#bloglist li .by, #bloglist li .cat,
#blogread .date,#blogread .by, #blogread .cat { display:block; text-align:left; margin:0;}
#bloglist li .comment-count, #blogread .comment-count{display:none;}
#widget-area{display:none;}
.category li a:hover,.category li.active a{color:#000; padding:0px 10px 0px 10px; margin:0;}	
.separator-b{background:none; visibility:hidden;}
.header{margin-top:20px;}

.pf_gallery.three-cols li{ width:280px;}
.pf_gallery.three-cols li img{width:280px;}
#blog-masonry .box{float:left; width:100%;}
}