/*
Theme Name: How To Stretch
Version: 2.0
Author: Khaleel Mughal

*/

/* Begin Typography & Colors */
body {
margin:0;
padding:0;
width: 20000px;
color:#333; 
font: 62.5%/150% Tahoma, Sans-Serif; 
background: #fff url(http://howtostretch.co.uk/img/naturalselection_low.jpg);
background-repeat: no-repeat;
background-attachment:;
background-position: bottom left;
}

h2 {font-size: 1.1em; color: #ed1846;}
h3 {font-size: 1.4em; color: #ed1846;}


/*blue*/
.rtitle5 {color: #1877ED; text-transform:uppercase; text-decoration:none; font-weight:bold; font-size:16px}
/*red*/
.rtitle3 {color: #ed1846; text-transform:uppercase; text-decoration:none; font-weight:bold; font-size:16px}

body, html {
overflow:hidden;
}

hr, .hide {
position:absolute; 
top:0;
left:-9000px;
}	

#page {
height: 609px; 
}

#leftsider {
padding: 50px 0 0 600px;
float: left;
width:400px; 
}

#leftsider h1 {font-size: 2.0em;}



#leftsider a{
color: #000;
text-decoration:underline;
}

#leftsider a:hover{
color: #FFF;
background-color:#000000;
}

#menu {
margin-top: 60px; 
padding-left: 6px;
}

#menu ul {
list-style: url(http://howtostretch.co.uk/img/rightsmall.png);
}

#menu a{
text-decoration: none;
text-transform:uppercase;
background-color: #ed1846;
color: #FFF;
}

#menu a:hover{
color:#ed1846;
background-color:#FFFFFF;
text-transform:uppercase;
}

#right-menu {
float:right;
margin-top: 60px; 
padding-left: 6px;
}

#right-menu  ul {
list-style: url(http://howtostretch.co.uk/img/leftsmall.png);
}

#right-menu  a{
text-decoration: none;
text-transform:uppercase;
background-color: #1877ed;
color: #FFF;
}

#right-menu  a:hover{
color:#1877ed;
background-color:#FFFFFF;
text-transform:uppercase;
}

#left-menu {
float:left;
margin-top: 60px; 
padding-left: 6px;
}

#left-menu  ul {
list-style: url(http://howtostretch.co.uk/img/rightsmall.png);
}

#left-menu  a{
text-decoration: none;
text-transform:uppercase;
background-color: #ed1846;
color: #FFF;
}

#left-menu  a:hover{
color:#ed1846;
background-color:#FFFFFF;
text-transform:uppercase;
}

#content {
margin: 75px 0 0 340px; 
float: left;
font-size: 1.1em; 
}

#content h4 {font-size: 1.2em; background-color:#000; color:#FFF; font-weight:bold; text-transform:uppercase;}
#contentcomment h4 {font-size: 1.2em; background-color:#000; color:#FFF; font-weight:bold; text-transform:uppercase;}
#contentcomment {
margin: 75px 0 0 170px; 
float: left;
font-size: 1.1em; 
}

#contentpage {
margin: 75px 0 0 240px; 
float: left;
font-size: 1.1em; 
}

#contentpage h4 {font-size: 1.2em; background-color:#000; color:#FFF; font-weight:bold; text-transform:uppercase;}
#contentpage h4 {font-size: 1.2em; background-color:#000; color:#FFF; font-weight:bold; text-transform:uppercase;}
#contentpage {
margin: 75px 0 0 170px; 
float: left;
font-size: 1.1em; 
}

.commentpar {
margin: 0px 15px 0 0px; 
padding-left: 15px; 
float: left; 
width: 315px;	
height: 300px;
}

.par {
margin: 0px 30px 0 0px; 
padding-left: 30px; 
float: left; 
width: 315px;	
height: 300px;
}

.alt {/* modify this to add style to alternate sections*/}

#note { 
margin-top:10px;
}

p.secbot a{
margin-top: -5px;
padding-left: 15px;
border-bottom:none;
color: #333333;
background: url(http://howtostretch.co.uk/img/arrow-gray.jpg) no-repeat scroll left center;
text-decoration:underline;
font-size:0.9em;
text-transform:uppercase;
}

p.secbot a:hover {
border-bottom:1px solid #333333;
color: #FFF;
background-color:#333333;
text-transform:uppercase;
}

#arrows {
position: fixed;
bottom: 10px;
left: 650px; 
width: 90px;
height: 30px;
cursor: pointer;
}

#arrows ul {	
margin: 0;
padding: 0;
list-style:none;
}

#arrows ul li {
margin: 0;
padding: 0;
display:inline;
width: 40px;
height: 30px;
}

#arrows ul li a{
margin-right: 5px;
float: left;
display: block;
width: 40px;
height: 30px;
overflow: hidden;
cursor: pointer;
font-size: 50em;
text-indent: -9000px;
}

#arrows ul #left a{background:url(http://howtostretch.co.uk/img/leftbig.png) no-repeat}
#arrows ul #right a{background:url(http://howtostretch.co.uk/img/rightbig.png) no-repeat}


#rightsider {
padding: 10px 10px 10px 0;
}	

#rightsider a{
color: #ed1846;
text-decoration: none;
}




#commentbox {
margin-top: 0px;
padding-left: 35px;
float: left;
width: 560px;
height: 350px;
background:  url('images/sfondocommenti.png') no-repeat;
}

#commtext {
margin: 10px 30px 0 0px;
padding: 10px;
width: 240px;
height: 270px;
float: left;
overflow: auto;
background:  url('images/sfondocommtext.jpg') no-repeat 10px 20px; 
}

#commtext a{
border-bottom: 1px dotted #bbb;
color:#9F4D35;
text-decoration:none;
}

#commtext h3 {
margin-left: 0px;
width: 210px;
color: #b65d4c;
font-weight: bold; 
font-size: 15px; 
text-align: left;
}

ol#commentlist  {
margin:5px 0px 0px 0px;
padding:0;
float: left;
width: 210px;
height: 230px;
list-style-type: none;
}	

ol#commentlist  li{
border-bottom: 1px solid #C68174;
}

ol#commentlist  li a{
color:#9F4D35;
text-decoration:none;
}

ol#commentlist  li a:hover{
color:#9F4D35;
text-decoration:none;
}

.storycontent a:hover{
border-bottom: 1px solid #888a8b;
color:#9F4D35;
}


#commentform {
margin:23px 0 0 0px;
float: left;
}

#commentform h3 {
margin-left: 0px;
width: 210px;
color: #b65d4c;
font-weight: bold; 
font-size: 15px; 
text-align: left;
}

#inputs {
float:left;	
}
#author,  #email, #url {
margin:0px 0px 5px 7px;
padding: 2px;
border: 1px solid #b3b7b9;
font: 10px Tahoma ,Arial,Verdana,sans-serif;
background-color: #efefef;
}	

.alt {}

#commentbox textarea  {
margin-left: 7px;
width: 180px;
height: 90px;
font: 10px Tahoma ,Arial,Verdana,sans-serif;
}

#butmit {
margin-left: 7px;
border: 1px solid #aaa;
width: 100%;
height: 20px;
font: 0.9em Tahoma;
}

.credit a:link, .credit a:hover {
color: #fff;
text-decoration:none;
}