body 
{
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Arial, Verdana, sans-serif;
	font-size: small;
	background: #fff;
}
h1
{
    font-size: x-large;
}
h2
{
    font-size: large;
}
h3
{
    font-size: 110%;
}
h4
{
	padding: 0px;
	margin: 0px;
}

.highlight
{
    background-color: #FFFFAA;
}

/* ul, li {margin-left:0; padding-left:0; list-style:none;}
*/	
a:link {
	color: #39c;
	}
a:visited {
	color: #369;
}

/* menu */

.menuBar
{
	margin-left: auto;
	margin-right: auto;
	padding-left: 25px;
	padding-right: 10px;
	display: block;
	font-size: 90%;

}

.menuBar ul
{
	list-style-type: none;
	display: inline;
}

.menuBar ul li
{
	float: left;
	width: 100px;
	text-align: center;
	padding: 2px;
	color: #000000;
    border-right: 1px solid #fff;
	background-color: #DEDEDE;
}

.menuBar ul li a
{
	color: #000000;
}



/* top bar with login status */


	
#logo2
{
 width: 40%;
 padding-left: 32px;
 padding-top: 2px;
 padding-bottom: 10px;
}

.statusLine {
	color: #666;
	text-align: right;
	padding-right: 0px;
	padding-top:4px;
	padding-bottom:3px;
	margin-left: 25px;
	margin-right: 15px;
	font-size: 90%;
}

.statusLine a:link
{
	text-decoration: underline;
}
.statusLine a:visited
{
	text-decoration: underline;
}
.statusLine .linkHl
{
	font-weight: bold;
	color: #f00;
}
.statusDate {
	color: #999;
}
#wrap {
	min-width: 500px;
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	}
#content {

	float: left;
	width: 60%;
	font-size: 95%;
	color: #333;
	}
#sidebar {
	float: right;
	width: 40%;
	}
	
#contentR {

	float: right;
	width: 59%;
	font-size: 100%;
	color: #333;
	line-height: 1.5em;
	}
#sidebarL {
	float: left;
	width: 40%;
	}
	
	
	
#footer {
	clear: both;
	}
	

#singleColumnContent {

	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 95%;
	color: #333;
	line-height: 1.5em;
	padding-left: 10px;
	}
	

/* gutters */

#content .gutter {
	padding: 15px 25px 25px 25px;
	}
	
	#contentR .gutter {
	padding: 15px 15px 15px 5px;
	}
	
#sidebar .gutter {
	padding: 15px;
	}
	
	 #sidebarL .gutter {
	padding: 10px 5px 15px 25px;
	}
	
	#singleColumnContent .gutter {
	padding: 15px 25px 25px 25px;
	}

div.spacer
{
clear: both;
height:0;
}



	

/* message row */

#message {
	margin: 0;
	padding: 4px;
		margin-left: 25px;
	margin-right: 15px;
	font-size: 75%;
	color: #333;
	text-align: center;
	background: #E5EED1;
	border: 2px solid #CDDDA8;

	}
#message strong {
	padding: 0 0 0 25px;
	}
	
/* content */

#primaryContent
{
padding: 5px 5px 5px 15px;
font-size: 85%;
}

.news
{
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px 10px 5px 10px;
font-size: 90%;
line-height: 140%;
}

h2 .news
{
	font-size: 140%;
}

#content h2 {
	margin: 0 0 1em 0;
	padding: 0;
	
	font-weight: bold;
	font-size: 100%;
	color: #663;
	}

dl.feature {
	margin: 15px 0;
	padding: 15px;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	}
dl.feature:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
dl.feature dt {
	margin: 0 0 .5em 0;
	font-size: 120%;
	font-weight: bold;
	color: #693;
	}
dl.feature dt img {
	float: left;
	margin: 0 15px 0 0;
	padding: 4px 4px 4px 4px;
	background-color: #fff;
	border: 1px solid #ccc;
	}
dl.feature dd {
	margin-left: 169px;
	font-size: 90%;
	line-height: 1.5em;
	color: #666;
	}

/* sidebars */




.box { 
	margin-bottom: 20px;
	padding: 0px 8px 8px 14px;
	font-size: 100%;
	line-height: 1.5em;
	color: #666;
	background-color: #D8E1E7;
	}
	
.box h3 {
	font-weight: bold;
	color: #466677;
	}

/* footer */

#footer p {
	margin: 0;
	padding: 15px;
	padding-left: 25px;

	color: #999; 
	}

/*  IE fixes */

#content, #sidebar {
	height: 1%;
	}

.feature { 
	display: inline-table; 
	}
/* Hides from IE/Mac \*/
* html .feature { 
	height: 1%; 
	}
.feature { 
	display: block; 
	}
#footer {
	height: 1%;
	}   
/* End hide from IE/Mac */




/* account history */

#accountHistory table {
  width: 80%;
  font-size: 110%;
  background: #fff;
  margin-top: 20px;
  }
  
  #accountHistory table th
  {
    text-align: left;
  }

	/* tag cloud css*/
	.cloud
	{
	font-family: arial;
	line-height: 190%;
	
	}
	
	.cloud a:link
	{
		text-decoration: none;
	}
	.cloud a:visited
	{
		text-decoration: none;
	}
		.cloud a:hover
	{
		text-decoration: none;
		background-color: #6699aa;
		color: White;
	}
	

.cloud1{font-size: small; }
.cloud2{font-size: medium;}
.cloud3{font-size: large;}
.cloud4{font-size: x-large;}
.cloud5{font-size: xx-large;}


/* controls */

 
.hidden
{
    display: none;
}

ul
{
	margin: 0px;
	padding: 0px;
}


/*Reorder List*/
.dragHandle {
	
	width:10px;
	height: 20px;
	background-image:url(../../images/dragHandle.gif);
	cursor:move;
	border:none;
}

.reorderListDemo li 
{
	list-style:none;
	margin-top: 4px;
	font-size: 110%;
	color: #00185e;
	border: solid 2px #b6bccc;
    background-color: #f4f8fb;
}



.reorderListDemo
{
    border: 1px solid #b6bccc;
    padding: 0px 5px 5px 5px;
    background-color: #C6CCCA;
    margin-top: 5px;
}

.reorderListDemo .cardi
{
	color: #005e18;
}

.reorderListDemo h1
{
	font-size: 140%;
	padding-top: 10px;
	padding-left: 10px;
	color: #003366;

}

.workoutTime 
{
	margin: 0px;
	font-size: 140%;
	color: #aaa;
	padding: 5px;
}

.reorderCue {
	background-color: #FEFECC;
	height: 100%;
	font-size: x-small;
}

.reorderCallback
{
    background-color: #FFFF33;
}

.itemArea {
	margin-left:10px;
	font-size:1em;
	text-align:left;
}

/* login form */
#loginForm
{
  font-size: 100%;
}

#loginForm fieldset
{
	border: 1px solid #ccc;
	padding: 20px 20px 0 20px;
	width: 350px;
	margin-left:auto;
	margin-right:auto;
}

#loginForm p
{
	margin: 5px;
}

#loginForm legend
{

	font-size:120%;
	font-weight: bold;
	}

.textInput
{
	width: 200px;
	}

#loginForm label
{
	color: #222;
}

#loginForm .error
{
	font-weight: bold;
	color: Red;
}

#loginForm .success
{
	font-weight: bold;
	color: Green;
}


/* */
.createButton
{

	text-decoration: none;
	font-size: 130%;
	font-weight: bold;

	text-align: right;
}

.createButton input
{
	height: 32px;
	width: 160px;
}

.createButton a:link
{
	color: Blue;
	text-decoration: underline;
}
.createButton a:visited
{
	color: Blue;
	text-decoration: none;
}
.createButton a:hover
{
color: Blue;
	text-decoration: none;
}
.createButton a:active
{
	color: Blue;
	text-decoration: none;
}


.customtextarea {
	width: 			95%; 
	padding: 0px;
	margin: 0px;
	margin-top: 5px;
	height:			60px; 
	font-family: 	Courier;
	font-size:		8pt;
	border-top: 		1px solid #aaa; 
	border-left: 		1px solid #aaa;
	border-bottom: 		1px solid #ccc; 
	border-right: 		1px solid #ccc; 
	color:			#333;
	background-color:	#FFFFFF;
}


	
/* Get a groovy large font in the input boxes :) */

.FormField
{
	width: 180px;
	border: 1px solid;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #483D8B;
	padding: 3px;
	background-color: #fff;
}

/* here's where you can programatically set the textfield to
have a red border.
*/
.FormFieldWithError
{
	width: 180px;
	border: 2px solid;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #483D8B;
	border-color: #f00 ;
	padding: 3px;
	background-color: #fff;
}


/* header */

#logo
{

 width: 40%;
 float: left;
 padding-left: 32px;
 padding-top: 12px;
}
	
#crumb
{
	padding-top:40px;
	padding-right: 17px;
	padding-bottom: 8px;
 color: #466677;
 font-size: 180%;
 text-align: right;
}
	
	
	#signupTable
{
 width: 100%;
  border: none;
  font-size: 90%;
   text-align: left;
}
	
#signupTable	table th, table td {
  margin: 0;
  padding: 2px 2px;
	border: none;
  }

 #signupTable table .name {
 text-align: right;
 font-weight: bold;
  }
  
 #signupTable table .desc {
  font-size: 90%;
  color: #030;
  font-family: Arial, Verdana, Sans-Serif;
  }
#signupTable table tr {
  background: #fff;
  	border: 1px solid #fff;
  }


#signupTable table td 
{
	 padding: 2px;
  background: #fff;
  text-align: left;
  	border: 1px solid #fff;
  }
  
  
  /* progress bar */
  

  .progBorder {
	
  width: 100%;
  background: #fff;
  border: 1px solid #999;
 
}

.progBar 
{
	height: 20px;
    background-image: url('../../workout/create/bluebar.gif');
	padding: 0px;
	font-size: 120%;
	font-weight: bold;
	color: #445;
	text-align: right;
 
}




/* tables  */
#WorkoutList table {
  width: 100%;
  font-size: 120%;
  border: 1px solid #ddd;
  background: #fff;
  }
#WorkoutList table caption {
  font-size: 130%;
  font-weight: bold;
  padding: 8px 10px;
  text-align: left;

  background: #fff;
  }
#WorkoutList table th, #WorkoutList table td {
  margin: 0;
  padding: 4px 10px;
  text-align: center;
  border-bottom: 1px solid #c5c5c5;
  }
#WorkoutList table th 
{
	font-size: x-small;
  color: #666;
  }
#WorkoutList table .name {
  text-align: left;
  }
#WorkoutList table tr {
  background: #e6e6e6;
  }
#WorkoutList table tr.alt {
  background: #f4f4f4;
  }
#WorkoutList table td a {


  }


/* upgrade your account */

#paymentList ul li {
	margin: 0px 0px 0px 20px;
}

#paymentTable table {
  width: 80%;
  font-size: 110%;
  background: #fff;
  margin-top: 20px;
  }

#paymentTable table th, #paymentTable table td {
  margin: 0;
  padding: 4px 10px;

  }

#paymentTable table .price {
  text-align: left;
  font-weight: bold;
  }
  #paymentTable table .buyButton {

  }
  
#paymentTable table tr {
  background: #e6e6e6;
  }
  
  #paymentTable form
  {
    padding: 0px;
    margin: 0px;
  }


/* upload page */

    .confirmMessage
    {
        color: Red;
    }
    
    a
    {
       color: #666;
       text-decoration: none;
    }
    
    .greyed
    {
      color: #666;
    }
    
    a:hover
    {
      text-decoration: underline;
    }