/*
Style Name: Pixeon
URL: http://www.pixeon.com.au/
Description: Theme for Pixeon, PicNet's online multimedia newsletter.
Author: Jason Ng
Author URI: http://www.picnet.com.au
*/

/* BEGIN CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */

/* Body */

html {
	font-family: Arial
	}
	
body {
	font-size:100%;
    line-height:1.125em;
	background-color:#f7f7f8;
	background-image: url('../images/backgroundslice.jpg');
	background-repeat: repeat-x
}

.wrapper {
	width:960px; 
	margin:0 auto;
	text-align:left
	}

#header {
	height:50px;
	margin-top:20px
	}

#tagline {
	width:283px;
	height:12px;
	background-image:url(../images/spritesheet.png);
	background-position:-106px 0px;
	display:inline;
	position:relative;
	float:left;
	margin:17px 0px 0px 30px;
	}

#menu {
	list-style-type: none;
	float:right;
	margin-top:10px;
	font-size:0.8em;
	}
	
#menu a {
	color:#fff
	}
	
#menu  li {
	display: inline;
	margin-left:30px
	}

#main_content {
	}

#feature {
	padding-left:30px;
	padding-top:30px;
	min-height:220px;
	background-image: url(../images/glow.png); 
	background-repeat:no-repeat
	}
	
.column50 img {
  display: block;
	margin:0 auto
	}

.panel, 
#header h1,
.column17,
.column25, 
.column33,
.column34,
.column50,
.column66,
.column75,
#about_picnet,
#about_pixeon,
#twitter,
#past_issues {
	display:inline;
	position:relative;
	float:left
	}

/* Basic Grid System */
	
.column17 {
	width:140px
	}
.column25 {
	width:220px;
	margin-right:20px
	}
.column33 {
	width:300px
	}
.column50 {
	width:460px
	}

.column66{
	width:640px
	}
	
.column34{
	width:320px
	}
	
.column75 {
	width:700px
	}
	
/* Panels */
	
#panels {
	clear:both;
	margin-top:20px
	}
	
.panel_1,
.panel_2,
.panel_3,
.panel_4,
.panel_5,
.panel_6,
.panel_7,
.panel_8,
.panel_9 {
	width:274px;
	height:273px;
	padding:20px;
	display:inline;
	position:relative;
	float:left
	}

.panel_2, .panel_8  {
	border-left:1px solid #f5f5f5;
	border-right:1px solid #f5f5f5;
 	
	}

.panel_4, .panel_6{
	border-top:1px solid #f5f5f5;
	border-bottom:1px solid #f5f5f5;	 	
	}
	
.panel_5 {
	border:1px solid #f5f5f5
	}


.panel_content {
	margin-top:20px
	}
	
.panel_content img {
	display:inline;
	float:left;
	position: relative;
	padding: 0px 20px 10px 0px
	}

.panel_content p{
	line-height:1.7em;
	color:#666;
	}	
	
.panel_meta , .panel_date {
	font-size:0.75em;
	text-transform:uppercase;
	color:#0079c1
	}
	
.panel_meta  {
	border-bottom:1px dotted #f5f5f5
	}

.panel_date  {
	color:#ccc
	}

#panels_top{
	width:960px;
	height:12px;
	background-image:url(../images/spritesheet.png);
	background-position:0 -40px;
	margin-top:20px
	}
#panels_body {
	width:944px;
	height:936px;
	background-image:url(../images/panelslice.png);
	background-repeat: repeat-y;
	padding: 0 8px
}
#panels_bottom {
	width:960px;
	height:12px;
	background-image:url(../images/spritesheet.png);
	background-position:0 -60px;
	margin-bottom:20px
	}

#footer {
	clear:both;
	font-size: 0.7em;
	}
	
#footer_top {
	width:960px;
	height:15px;
	background-image:url(../images/spritesheet.png);
	background-position:0 -74px;
	margin-top:20px
	}

#footer_body {
	padding:0px 20px;
	background-image:url(../images/footerslice.png);
	background-repeat: repeat-y;
	min-height:180px
	}

#footer_bottom{
	width:960px;
	height:15px;
	background-image:url(../images/spritesheet.png);
	background-position:0 -86px;
	margin-bottom:20px
	}
	
#subscribe_button {
	display:inline-block;
	width:108px;
	height:45px;
	margin-top:24px;
	margin-right:4px;
	background-image:url(../images/spritesheet.png);
	background-position:-295px -110px;
	cursor: pointer
	}

#subscribe_button:hover {
	background-position:-295px -158px;
	}
	
#subscribe_button:active {	
	background-position:-295px -157px;
	}
	
#linkedin_button {
	display:inline-block;
	width:45px;
	height:45px;
	margin-right:8px;
	margin-top:24px;
	background-image:url(../images/spritesheet.png);
	background-position:-405px -110px;
	cursor: pointer
	}

#linkedin_button:hover {
	background-position:-405px -158px;
	}
	
#linkedin_button:active {
	background-position:-405px -157px;
	}
	
#youtube_button {
	display:inline-block;
	width:45px;
	height:45px;
	margin-top:24px;
	background-image:url(../images/spritesheet.png);
	background-position:-457px -110px;
	cursor: pointer
	}

#youtube_button:hover {
	background-position:-457px -158px;
	}
	
#youtube_button:active {
	background-position:-457px -157px;
	}	

#past_issues {
	width:200px;
	padding-top:5px;
	margin-left:15px;
	margin-right:10px;
	}		

#about_picnet {
	width:180px;
	padding-top:5px;
	margin:0px 10px 0px 10px
	}
	
#about_pixeon {
	width:180px;
	padding-top:5px;
	margin-left:10px;
	margin-right:10px;
	text-align:justify
	}	
	
#twitter {
	width: 285px;
	height:185px;
	background-image:url(../images/spritesheet.png);
	background-position:0 -110px;
	margin:5px 0px 0px 10px;
	}
	
#twitter_update_list {
	width:240px;
	height:75px;
	margin:15px 0px 0px 20px;
	}

/* Text */

h1 {}

h2 {
	}

h3 {}

h4 {}

h5 {}

h6 {}

#header h1 {
	padding-left:28px;
}

#header h1 a {
	display:inline-block;
	width:106px;
	height:41px;
	background-image:url(../images/spritesheet.png);
	background-position:0 0;
	margin-bottom:20px;
	text-indent:-9999px
}

a, #feature h3{
	color:#0079c1;
	text-decoration:none
}

#feature h3 {
font-weight:normal;
font-size:0.75em;
text-transform:uppercase
}

#panels h2 {
	line-height:1.7em
}

#feature h2 {
	font-size:2.2em;
	font-weight:normal;
	color:#fff;
	margin:20px 0px;
	font-family: Georgia
	}
	
#feature  p {
	font-size:0.8em;
	line-height:1.8em;
	color:#fff
	}

a {
	color:#0079c1
	}	
	
a:hover {
	text-decoration: underline
	}

a:active {
	color:#13b5ea
}
	
p { 
	font-size:0.775em
	}
	
.window_top {
	width:324px;
	height:10px;
	background-image:url(../images/spritesheet.png);
	background-repeat: no-repeat;
	background-position: -636px -112px;
	}
	
.window_body {
	width:284px;
	padding:3px 20px 10px 20px;
	background-image:url(../images/windowslice.png);
	background-repeat: repeat-y
	}
	
.window_bottom {
	width:324px;
	height:10px;
	background-image:url(../images/spritesheet.png);
	background-repeat: no-repeat;
	background-position: -636px -130px
	}
	
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 40%;
    left: 50%;
    
    margin-left: -150px;
	margin-top:-50px;
    width: 324px;
 
    color: #333
	}

.jqmOverlay { background-color: #000; }

.jqmClose {
	display:inline-block;
	position:relative;
	float:right;
	background-image:url('../images/spritesheet.png');
	background-repeat:no-repeat;
	background-position: -396px 0px;
    width:19px;
    height:21px
	}
	
.jqmClose:hover {
	background-position: -415px 0px;
	}
.jqmClose:active {
	background-position: -415px 1px;
}
	
/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

select, submit {
	float: right
	}

select, #url, #name, #email, #shareemail, #company {
	width: 185px;
	float: right
	}
	
#url {
	width: 181px
	}

#shareemail { 
	width: 181px;
}

fieldset ol li	{
	width: 100%;
	height:25px;
	padding-bottom:5px
	}
.share, .subscribe {
	clear:both;
	float:right
	}
	
.subscribe, .share {
	width:108px;
	height:35px;
	background-color:#fff;
	background-image:url('../images/spritesheet.png');
	background-repeat:no-repeat;
	border: 0px solid #ffffff;
	margin:0px;
	padding:0px
	}
	
.jqmWindow .error { 
	color: red; 
	text-align: center; 
	font-weight: bold;
	clear: both;
	padding: 10px;
}
	
.share {
	background-position: -510px -110px;
	}
	
.share:hover {
	background-position: -510px -145px;
}

.share:active {
	background-position: -510px -144px;
}

.subscribe {
	background-position: -510px -181px;
}

.subscribe:hover {
	background-position: -510px -217px;
}

.subscribe:active {
	background-position: -510px -216px;
}

legend {
	padding-bottom:10px;
	}	

ol {
	border-top:1px dotted #eeeeee;
	padding-top:10px	
	}

fieldset {
	clear:left
	}
	
label {
	float:left;
	clear:both;
	font-size: 0.8em
	}