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

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before
	td:nth-of-type(2):before
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Porn Name"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

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

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before
	td:nth-of-type(2):before
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Porn Name"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}



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

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before
	td:nth-of-type(2):before
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Porn Name"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}