/* 

STYLE SHEET FOR iPhoneTiny.com - 2010 remix
Created by Craig Grannell
for www.snubcommunications.com

Table of contents
-------------------
	1. page defaults
	2. masthead
	3. sidebar
	4. main content
	5. footer
	6. adaptive overrides
-------------------

With thanks to: 
Aaron Gustafson, http://easy-designs.net/ (adaptive resize method)

-------------------

*/

/* ---- 1. defaults  ---- */

* {
		padding: 0;
		margin: 0;
		text-rendering: optimizeLegibility;
		}

a img {
		border: 0;
		}

body {
		background: #595b72 url(images/page-background.gif) repeat-x;
		font: 20px/30px Helvetica, Arial, sans-serif;
		color: #000000;
		}

#wrapper {
		width: 960px;
		margin: 0 auto;
		box-shadow: 0 0 40px #000000;
			-webkit-box-shadow: 0 0 40px #000000;
			-moz-box-shadow: 0 0 40px #000000;
		background: #ececec url(images/stroke.gif) 316px 0 repeat-y;
		}

/* ---- 2. masthead  ---- */

#masthead {
		height: 60px;
		background: url(images/masthead-background.gif) repeat-x;
		position: relative;
		}

#logo {
		position: absolute;
		left: 0; 
		top: 0;
		width: 59px;
		height: 49px;
		background: url(images/ipt-icon.png);
		}

#logo:hover {
		background: url(images/ipt-icon.png) 0 -49px;
		}

#logo a {
		display: block;
		width: 59px;
		height: 49px;
		}

#logo a span {
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
		}

h1 {
		color: #ffffff;
		line-height: 50px;
		width: 33%;
		text-align: center;
		font-size: 20px;
		font-weight: normal;
		}

#social-links {
		position: absolute;
		top: 0;
		right: 0;
		padding-right: 12px;
		}

#social-links ul {
		list-style: none;
		}

#social-links li {
		float: left;
		width: 25px;
		margin-left: 8px;
		margin-top: 12px;
		}

#social-links li:hover {
		margin-top: 10px;
		}

/* ---- 3. sidebar  ---- */

#sidebar {
		float: left;
		width: 33%;
		}

#search {
		background: url(images/search-background.png) repeat-x;
		height: 40px;
		padding: 23px 0 16px;
		border-bottom: 1px solid #767676;
		}

#search form {
		position: relative;
		width: 300px;
		margin: 0 auto;
		}

#searchField {/*255 x 30*/
		background: url(images/search-field.png);
		border: none;
		height: 30px;
		line-height: 30px;
		margin-right: 10px;
		position: absolute;
		left: 0; 
		top: 1px;
		font-size: 16px;
		padding-left: 30px;
		width: 225px;
		}

#searchSubmit {
		position: absolute;
		right: 0;
		}

#extras, #ratings {
		padding: 30px 20px 9px;
		color: #464646;
		font-size: 12px;
		line-height: 20px;
		border-bottom: 1px solid #767676;
		}

#ratings {
		margin-bottom: 20px;
		}
		
#extras p, #ratings p, #ratings ul {
		margin-bottom: 20px;
		}

#ratings ul {
		list-style: none;
		}

#ratings li {
		margin-bottom: 20px;
		}

#ratings ul strong {
		font-size: 20px;
		font-weight: bold;
		margin-right: 10px;
		}

#sidebar a {
		color: #464646;
		}

#sidebar a:hover {
		color: #000000;
		}

/* ---- 4. main content  ---- */

#content {
		float: left;
		width: 67%;
		background: #ffffff url(images/stroke.gif) 0 0 repeat-y;
		}

h2, h3 {
		font-size: 20px;
		padding: 20px;
		margin: 0;
		border-bottom: 1px solid #dddddd;
		margin-left: 1px;
		}

h3 {
		margin: 0 -20px 20px -19px;
		}

.singlePage p {
		margin-bottom: 20px;
		}

.singlePage ul {
		list-style: none;
		}
		
.linedList li {
		padding-bottom: 9px;
		border-bottom: 1px dotted #aaaaaa;
		margin-bottom: 10px;
		}

.postContainer {
		padding: 20px 20px 19px 20px;
		border-bottom: 1px solid #dddddd;
		margin-left: 1px;
		}

.metaContents {
		font-size: 14px;
		color: #898989;
		}

.postContainer a {
		color: #6285ac;
		font-weight: bold;
		}

.postContainer a:hover {
		color: #000000;
		}

#postNavigation {
		position: relative;
		height: 40px;
		background: #eeeeee url(images/stroke.gif) 0 0 repeat-y;
		line-height: 40px;
		}

#previousLink {
		position: absolute;
		left: 20px;
		}

#nextLink {
		position: absolute;
		right: 20px;
		}

#postNavigation a {
		color: #464646;
		}

#postNavigation a:hover {
		color: #000000;
		}

/* ---- 5. footer  ---- */

#footer {
		clear: both;
		background: #000000;
		padding: 20px;
		color: #ffffff;
		font-size: 15px;
		text-align: center;
		}

#footer a {
		color: #ffffff;
		}

#footer a:hover {
		color: #dddddd;
		}

/* ---- 6. adaptive overrides ---- */

/* Browser thin */
@media (min-device-width:1024px) and (max-width:989px),
	(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait),
	screen and (max-device-width: 480px),
	screen and (max-width: 480px) {
	#wrapper {
			width: 768px; background: #ffffff; 
			}
	h1 {width: 100%;}
	#sidebar, #content {float: none; width: 100%;}
	#search {width: 100%; padding: 17px 0 6px;}
	#extras, #ratings {display: none;}
	#content {background: none;}
	.postContainer, h2 {padding: 20px; margin-left: 0;}
	#postNavigation {background: #eeeeee;}	
	h3 {margin-left: -20px;}
		}

/* iPad landscape */
@media screen and (max-device-width:480px),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape) {
       
	#wrapper {
			width: 1024px; 
			box-shadow: 0 0 0 #000000;
			-webkit-box-shadow: 0 0 0 #000000;
			background: #ececec url(images/stroke.gif) 337px 0 repeat-y !important;

			}
		}

/* iPad portrait */

@media screen and (max-device-width:480px),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {

	#wrapper {
			width: 768px; background: #ffffff !important; 
			box-shadow: 0 0 0 #000000;
			-webkit-box-shadow: 0 0 0 #000000;
			}
	
		}

/* all iPhone/v thin browser */
@media 	screen and (max-device-width: 480px),
		screen and (max-width: 480px) {
	background: #ffffff !important;	
	.postContainer, h2 {font-size: 17px; padding: 6px 9px;}
	#footer {font-size: 12px; font-weight: bold;}
	#postNavigation {background: #eeeeee;}
	h3 {font-size: 17px; padding: 6px 9px; margin: 0 -9px 9px;}
		}

/* iPhone landscape */
@media (min-device-width:1024px) and (max-width:509px), 
(max-device-width:480px) and (orientation:landscape) {
	#wrapper {width: 480px; background: #ffffff;}
		}

/* iPhone portrait */
@media (min-device-width:1024px) and (max-width:509px), 
(max-device-width:320px) and (orientation:portrait) {
	#wrapper {width: 320px; background: #ffffff;}
		}