/*
	Jon Pudny Design and Build
	www.jonpudny.co.uk
*/

html {
	background:url(../media/webdesign-blog-bg.gif) repeat left top;}

* html body {
	font-size: x-small; /*for IE5/win */
	f\ont-size: small; /* for other IE versions */
}

body {
	padding:0;
	margin:0;
	}
	
/* `Container
----------------------------------------------------------------------------------------------------*/

#container {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	-moz-box-shadow: 0 -10px 6px #000; /* FF3.5+ */
  -webkit-box-shadow: 0 -10px 6px #000; /* Saf3.0+, Chrome */
          box-shadow: 0 -10px 6px #000; /* Opera 10.5, IE 9.0 */
	behavior:url(../pie/PIE.php);
	}
	
div#header {
	float:left;
	width:960px;
	margin-bottom:30px;}

#footer {
	background:#ccc url(../media/website-footer.gif) no-repeat left bottom;}

/*----------------------------------------------------------------------------------------------------*/

.grid_220, .grid_300, .grid_460, .grid_620/*,.grid_940*/  {
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;}

.grid_220{
	width: 220px;}

.grid_300 {
	margin-top:45px;
	margin-bottom:30px;
	width: 300px;
	min-height:250px;}
	
.grid_300-center{
	border-left:1px solid #333; 
	border-right:1px solid #333; 
	width:298px;}
	
.grid_460 {
	width:460px;}

.grid_620 {
	width: 620px;}

.grid_940 {
	display: inline;
	float: left;
	padding:0 10px;
	background: #000 url(../media/website-head-ruler.png) top no-repeat;
	width: 940px;}
	
/* ' main styles
----------------------------------------------------------------------------------------------------*/
.nav{
	margin:50px 0 0 300px;}

.nav li{
	float:left;
	display:block;
	margin:0 0 0 3px;
	border-right:1px solid #000;
	padding:0 5px;}

.nav li.last{border:none;}

.nav a{
	padding:3px 10px;
	color:#000;}
	
.nav a:hover, .active, #content a  {
	color:#fff;
	text-decoration:none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px; 
     border-radius: 6px; 
	
	 -moz-box-shadow: 1px 0px 1px #f2c60a; 
  -webkit-box-shadow: 1px 0px 1px #f2c60a; 
          box-shadow: 1px 0px 1px #f2c60a; 
	 background-color:#000;
	}
		  
a.active  {color:#fff;}

#content {
	width:460px;
	text-align:justify;
	margin-left:250px;
	padding-bottom:80px;
}
#content a{
	background:none;
	color:#c00;}
	
#content a:hover{
	text-decoration:underline;
	color:#fff;}

#content .tab a {
	color:#000;
	padding:3px 10px;
	background:none;
	border:1px solid #efc001;}

#content .tab a:hover {
	color:#000;
	text-decoration:none;
	background-color:#efc001;}
	
.img {
	float:left;
	margin: 3px 5px 2px 0;
	border:1px solid #ffde25;}

.logo{text-align:center;}
	
.mb20{
	margin-bottom:20px;}
	
.mr10{
	margin-left:10px;}	

.ml-none {margin-left:0;}

.mr-none {margin-right:0;}


/* ------------- Text Styles --------------  */


body{
	font-family:Arial, "Helvetica", sans-serif;
	color:#000;}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,li,pre,table,address,fieldset{
	margin-bottom:10px}

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

a:hover{
	color:#c00;
	text-decoration:underline;}

 h1 {
	font-size:300%;}

.logo h1  {
	background:url(../media/logo-jon-pudny-web-design.gif) no-repeat center top;
	height:170px;}
	
h1 span, h2 span {display:none;} /*if image is background on h1 and h2 the use this for alt text */

h3 {
	color:#fff;
	font-weight:lighter;
	font-size:1.3em;
	padding:10px 0 5px 15px;}
	
p,li{
	color:#000;
	line-height:1.5em;
	font-size:0.8em;}

#footer p{
	font-size:10px;
	margin:0 0 0 100px;}
	
#footer a {
	color:#C00;}

.logo p strong, .sub-head strong {
	font-size:0.9em;
	border-bottom:2px solid #efc001; 
	padding:3px;}
	
.grid_300 p{
	color:#fff;
	font-size:0.8em;
	padding: 0 15px;}

p.sub-head {
	text-align:center;
	color:#fff;}

.sub-head strong{
	border-bottom:2px solid #fff;}

.last {
	margin-bottom:50px;}	
	
ul{
	text-align:center;}

h2 {font-family: "SuomiScriptBook", Arial, sans-serif; font-weight:lighter; color:#fff; font-size:35px; letter-spacing:0.5px; padding:10px 0 0 15px; margin-bottom:16px;}

.grid_300-center h2{ padding-left:20px;}

/* ---------twiter ----------*/

#twitter_update_list {
	width:270px;
	padding:5px 15px;}
	
#twitter_update_list li {
	color:#fff;
	padding:10px;
	border:1px solid #333;
	list-style-type: none;
    border-radius: 12px; /* Opera 10.5, IE 9 */ -webkit-border-radius: 12px; /* Saf3+, Chrome */ 		   -moz-border-radius: 12px; /* FF1+ */
	background:#000;
	-webkit-transition-property: color, background; 
	-webkit-transition-duration: 1s, 1s; 
	-webkit-transition-timing-function: linear, ease-in;
	}

#twitter_update_list li a {
	color:#efc001;
	-webkit-transition-property:color; 
	-webkit-transition-duration: 1s, 1s; 
	-webkit-transition-timing-function: linear, ease-in;
	}
	
#twitter_update_list li:hover {
	color:#000;
	background:#eaeaea;}


#twitter_update_list li:hover a, #twitter_update_list li a:hover {
	color:#c00;}

#twitter_update_list span a {
display: none;}

#twitter_update_list span a:hover {
display: none;}


/* `Forms
----------------------------------------------------------------------------------------------------*/




form fieldset {
	margin-top:30px;
	width: 458px;
	-moz-border-radius: 12px; 
	-webkit-border-radius: 12px; 
     border-radius: 12px;
	 background-color:#fcdf5d;
	border:1px solid #e4bb00;
	padding: 20px 10px 0 10px;}

form fieldset div {
	margin-bottom: 20px;}

label {
	padding-top:10px;
	display: block;
	float: left;
	width: 150px;
	font-size:12px;
	font-weight:bold;}

div textarea {
	height:80px;
	width: 280px;}

input#submit {
	margin-left:367px;}

span.error {
	color: red;
	font-size:13px;
	display: block;
	padding: 17px 0 0 150px;}

p.mand {
	font-size: 10px;
	margin-left: 347px;
	margin-top:-10px;}
	
.submit input{  
	width: auto;  
	padding: 9px 15px;  
	background: #000;  
	border: 0;  
	font-size: 14px;  
	color: #FFF;  
	-moz-border-radius: 6px; /* FF1+ */
	-webkit-border-radius: 6px; /* Saf3+, Chrome */
     border-radius: 6px; /* Opera 10.5, IE 9 */
	 background-color:#000;
	 
	 -moz-box-shadow: 1px 0px 1px #e4bb00; /* FF3.5+ */
  	-webkit-box-shadow: 1px 0px 1px #e4bb00; /* Saf3.0+, Chrome */
       box-shadow: 1px 0px 1px #e4bb00; /* Opera 10.5, IE 9.0 */ 
	   
	   }  


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* good read - http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;}

.clearfix {
	display: inline-block;}

* html .clearfix {
	height: 1%;}


/* ------------- css3 testing --------------  */

div#container  {
	background-image: -moz-linear-gradient(bottom, #ffde25, #efc001); /* FF3.6 */
  	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ffde25),color-stop(1, #efc001)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffde25', endColorstr='#efc001'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffde25', endColorstr='#efc001')"; /* IE8 */}


/* ------------- tooltip styling. by default the element to be styled is .tooltip ------------- */


.tooltip {
display:none;
background:transparent url(../media/tool-tip.png) no-repeat center;
font-size:11px;
text-align:center;
line-height:1.4em;
height:60px;
width:110px;
padding:15px 0 30px 0px;
color:#fff;}

/* style the trigger elements */
#popup a {
border:0;
cursor:pointer;
margin:0 8px;}