/*************************************************************************



*************/



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 {

	border: 0 none;

	margin: 0; padding: 0;

	outline-style: none;

	outline-width: 0;

	vertical-align: baseline;

}



/*************************************************************************

	[defaults]

*************************************************************************/



a {

	color: #2464ae;

	outline: none;

	text-decoration: none;

}



a:hover {

	text-decoration: underline;

}



p {

	line-height: 1.5em;

	padding: 0 0 6px;

}

.red {

	color: #F00;

}

.blue {

	color: #009;

}

.green {

	color: #060;

}





.fl-clear {

	clear: both;

}



.fl-left {

	float: left;

}



.fl-right {

	float: right;

}



#mysubmitprofile {

	background-color: #ffffff; border: 2px solid #cdcdcd;

    padding: 2px; font-weight: bold; color: #2464ae;

}



/*************************************************************************

	[body, html, wrap] - changed 6/12/11

		background-color: #458905;

	background-color: #252965;

*************************************************************************/



html, body {

	background: #ebebeb url(../images/pageBG.jpg) repeat-x;

	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;

	font-size: 12px;

	color: #333333;

	margin:auto;

	line-height: 1.3em;

}



#wrap {

	font-size: 14px;

	position: relative;

	z-index: 0;

}



/*************************************************************************

	[header-wrap, header #0b5b94, #cdcdcd;

*************************************************************************/



#header-tab {

	position: absolute;

	padding-top:10px;

	height: 30px;

	right: 150px;

	top: 10px;

	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;

	font-size: 12px;

	background-color: #000000;

	color: #ffffff;

	font-weight:bold;

}

#header-wrap{

	background: #ffffff;

	height: 210px;

	width: 100%;

}



#header {

	margin: 0 auto;

	padding-top:25px;

	padding-left:10px;

	width: 1024px;	

}



.fl-clear {

	clear: both;

}



/*************************************************************************

	[content-wrap, main-content] 	padding: 12px 0 180px;



*************************************************************************/



#content-wrap {

	background: #fff;

	margin: 0 auto;

	position: relative;

	width: 1000px;

	height: 100%;

	/*z-index: -1;  CAUSE OF IE LOGIN PROBLEM */

}

#content-wrap-wide {

	background: #fff;

	margin: 0 auto;

	position: relative;

	width: 1400px;

	height: 100%;

	/*z-index: -1;  CAUSE OF IE LOGIN PROBLEM */

}



#main-content-wide {

	float: left;

	padding: 0px 10px 20px 20px;

	width: 950px;

	background:#ffffff;

}



#singlecolumn {

	float: left;

	padding: 0 0 0;

	background: #ffffff;

	height: auto;

	width: 250px;

	}





#content-300 {

	float: left;

	padding: 10px 10px 10px 10px;

	width: 300px;

	background: #ffffff;



}

#main-content-wider {

	float: left;

	padding: 0px 10px 20px 20px;

	width: 1300px;

	background:#e4e4f3;

}



#main-content {

	float: left;

	padding: 0 0 0 5px;

	width: 671px;

}



#main-content img {

	padding: 0 0 8px;

}



#form-content {

	float: left;

	padding: 20px;

	width: 630px;

	background:#e4e4f3;

}



#form-content-wide {

	float: left;

	padding: 20px;

	width: 875px;

	background:#e4e4f3;

}



#form-content-left {

	float: left;

	padding: 20px;

	width: 350px;

	background:#e4e4f3;

}

#form-content-right {

	float: left;

	padding: 20px;

	width: 500px;

	background:#ffffff;

}

#left-wide {

	float: left;

	padding: 20px;

	width: 400px;

	background:#ffffff;

}

#left-wide-inside {

	float: right;

	padding: 10px;

	width: 350px;

	background: #ffffff;

	border:1px solid #A6C1E5;

 }

#right-wide {

	float: right;

	padding: 20px;

	width: 450px;

	background:#ffffff;

}



#right-wide-inside {

	float: right;

	padding: 10px;

	width: 400px;

	background: #A6C1E5;

}

#left-wider {

	float: left;

	padding: 20px;

	width: 800px;

	background:#ffffff;

}



/*************************************************************************

	[sidebar-wrap, sidebar] see newstyles for #sidebar-wrap-new

	margin changed from margin: -12px 0 0;

	background changed from	background: #fff url(../images/carrots4acause-horse-logo.jpg) no-repeat right top;

	padding changed from padding: 320px 0 0;





*************************************************************************/

	#sidebar-wrap {

	float: left;

	padding: 0 0 0;

	margin: 0 0 0;

	height: auto;

	width: 310px;

	}



#sidebar {

	margin: 0 10px;

	background: #ffffff;

	padding: 0 10px 0;

	

	/* IE6 Fix */

	_margin: 0;

}



#singlecolumn {

	float: left;

	padding: 0 0 0;

	background: #ffffff;

	height: auto;

	width: 250px;

	}



/*************************************************************************

	[footer]

*************************************************************************/



#footer-wrap {

	display: block;

	height: auto;

	margin: 0 auto;

	width: 1024px;

	background-color: #cdcdcd;



}



#footer-wrap span {

	color: #f6ea02;

	display: block;

	font-size: 14px;

	padding: 12px 2px 0;

}



a.footer-links {

	color: #000000;

	text-decoration: underline;

}



a.footer-links:hover {

	text-decoration: none;

}



.font-footer-main {

	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;

	font-size: 14px;

}

.font-footer-sub-1 {

	font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;

	font-size: 10px;

}





/*************************************************************************

	[ul]

	ul, li {

	font-size: 12px;

	line-height: 2.5em;

	list-style: none;

}

http://rickbjarnason.com/creating-multi-column-lists-using-css/

The css that targets all the list items (li) sets all the widths, margins and paddings for the entire list. While this is important for the other techniques with this one it is critical because we need to know exactly where to set our margin-left at.

 

What makes this example particularly interesting is the 'first’ class. This is what moves the columns up so they align nice and neat and are not staggered down the page. Since we have the same amount of negative margin on each list I can re-use the same style on column 2 and 3. To calculate the amount needed for the negative margin is easily calculated with some simple math. We know we have 4 items in each column, we will also need 3 spaces in between our items. To keep everything uniform we will make each of these 15px, (line-height and margin-top settings) 15 x 7 = 105px.

 

This technique also works nicely for ordered list as you can see in the example below. Although I did find that I had to add an extra 2px of margin to each ordered list item so the negative margin is 113px on the ordered list. Unfortunately I could not find any documentation on why this is to share.



*************************************************************************/



ul{

 list-style-type:none;

 width:100%;

 }

 

li {

line-height: 1.5em;

 width:100%;

 position:relative; /* IE needs this in order to recognize links in all columns */

 }

  .square {

 list-style-type:square;

 }

   .circle {

 list-style-type: circle

 }

 

 /* Tabbed example */

div.tabs {

 /*  min-height: 7em; - removed - No height: can grow if :target doesn't work */

  position: relative;		/* Establish a containing block */

  line-height: 1;		/* Easier to calculate with */

  z-index: 0}			/* So that we can put other things behind */

div.tabs > div {

  display: inline}		/* We want the buttons all on one line */

div.tabs > div > a {

  color: #FFFFFF;			/* Looks more like a button than a link */

  font-size: 12px;

  background: #000000;		/* Active tabs are light gray */

  padding: 0.3em;		/* Some breathing space */

}

div.tabs > div:not(:target) > a {

  border-bottom: none;		/* Make the bottom border disappear */

  background: #000000

  }		/* Inactive tabs are dark gray */

div.tabs > div:target > a,	/* Apply to the targeted item or... */

:target #default2 > a {		/* ... to the default item */

  background: #000000

  }		/* Active tab is light gray */

div.tabs > div > div {

  background: #000000;		/* Light gray */

  z-index: -2;			/* Behind, because the borders overlap */

  left: 0; top: 1.3em;		/* The top needs some calculation... */

  bottom: 0; right: 0;		/* Other sides flush with containing block */

  overflow: auto;		/* Scroll bar if needed */

  padding: 0.3em;

}

/* Looks better */

div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */

  position: absolute }		/* All these DIVs overlap */

div.tabs > div:target > div, :target #default2 > div {

  position: absolute;		/* All these DIVs overlap */

  z-index: -1}			/* Raise it above the others */



div.tabs :target {

  outline: none

  

  }

  








/*************************************************************************

input style

#277CEF

#0376bc;

border:1px solid #CDCACA; 

****/



.style1 { font-size: 12px; background: #ffffff; 

          border-width: thin thin thin thin; 

          border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF}

.style2 { font-size: 12px; 

          background: #0376bc; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99}

.style3 {padding:5px;  }

.style4 {font-size:24px; padding:5px 15px;  }

.style5 {font-size:18px; padding:5px;  }

.style6 {font-size:18px; padding:25px;  }

.style7 { font-size: 12px; 

          background: #28C45C; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99;

		  color: #ffffff;}



.inputstyle1 {

height: 75px;

	 font-size: 12px; 

          background: #ffffff; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99;

		  color: #000000;}

		  

.inputstyle2 {

height: 25px;

font-size: 12px; 

          background: #28C45C; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99;

		  color: #ffffff;}

		  

.inputstyle3 {

height: 75px;

	 font-size: 12px; 

          background: #0376bc; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99;

		  color: #000000;}

		  

.inputstyle4 {

height: 40px;

	 font-size: 12px; 

          background: #28C45C; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99;

		  color: #000000;}

		  

.inputstyle5 {

height: 40px;

	 font-size: 12px; 

          background: #0376bc; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99;

		  color: #000000;}

		  

.inputstyle6 {

height: 75px;

	 font-size: 12px; 

          background: #28C45C; border-width: thin thin thin thin; 

          border-color: #CCFF99 #999999 #999999 #CCFF99;

		  color: #000000;}



/*************************************************************************

http://www.sitepoint.com/css3-vertical-accordion-using-target-selector/

*************************************************************************

How to Create a CSS3-Only Vertical Accordion Using the :target Selector/

/*************************************************************************

	The HTML

Our HTML5 code is identical to that used by the tab control. I’ve only changed the article class to “accordion” and renamed some of the IDs so it’s easier to understand what’s going on. There are also five sections since it looks a little better:

As before, the clickable section heading is contained within each section as the initial h2 tag.



<article class="accordion">



	<section id="acc1">

		<h2><a href="#acc1">Title One</a></h2>

		<p>This content appears on page 1.</p>

	</section>

	

	<section id="acc2">

		<h2><a href="#acc2">Title Two</a></h2>

		<p>This content appears on page 2.</p>

	</section>

	

	<section id="acc3">

		<h2><a href="#acc3">Title Three</a></h2>

		<p>This content appears on page 3.</p>

	</section>

	

	<section id="acc4">

		<h2><a href="#acc4">Title Four</a></h2>

		<p>This content appears on page 4.</p>

	</section>

	

	<section id="acc5">

		<h2><a href="#acc5">Title Five</a></h2>

		<p>This content appears on page 5.</p>

	</section>



</article>



*************************************************************************/

/*************************************************************************

	The CSS

First, we’ll style the article container and section elements. Each section starts in its closed state with a height of 2em (note that overflow is set to hidden):



*************************************************************************/

article.accordion

{

	display: block;

	width: 950px;

	padding: 0.5em 0.5em 1px 0.5em;

	margin: 0 auto;

	background-color: #A2C0F5;

	border-radius: 5px;

	box-shadow: 0 3px 3px rgba(0,0,0,0.3);

}



article.accordion section

{

	display: block;

	width: 925px;

	height: 2em;

	padding: 0 1em;

	margin: 0 0 0.5em 0;

	color: #333;

	background-color: #06107F;

	overflow: hidden;

	border-radius: 3px;

}



/*************************************************************************

The section title is now styled to use all the available room in the closed state:

*************************************************************************/

article.accordion section h2

{

	font-size: 1em;

	font-weight: bold;

	width: 100%;

	line-height: 2em;

	padding: 0;

	margin: 0;

	color: #ddd;

}



article.accordion section h2 a

{

	display: block;

	width: 100%;

	line-height: 2em;

	text-decoration: none;

	color: inherit;

	outline: 0 none;

}

/*************************************************************************

We can now ‘open’ the active section using the :target selector. We set a larger height and background color, then enlarge and re-color the title too:

*************************************************************************/

article.accordion section:target

{

	height: auto;

	background-color: #fff;

}



article.accordion section:target h2

{

	font-size: 1em;

	color: #333;

}

/*************************************************************************

If necessary, you can set the section height to auto so it uses the minimum space it requires. However, that makes it impossible to add nice CSS3 transitions which smoothly resizes the element…

*************************************************************************/



article.accordion section,

article.accordion section h2

{

	-webkit-transition: all 1s ease;

	-moz-transition: all 1s ease;

	-ms-transition: all 1s ease;

	-o-transition: all 1s ease;

	transition: all 1s ease;

}

/*************************************************************************

Bar

*************************************************************************/



article.bar

{

	display: block;

	width: 950px;

	padding: 0.5em 0.5em 1px 0.5em;

	margin: 0 auto;

	background-color: #A2C0F5;

	border-radius: 5px;

	box-shadow: 0 3px 3px rgba(0,0,0,0.3);

}



article.bar section

{

	display: block;

	width: 925px;

	height: 2em;

	padding: 0 1em;

	margin: 0 0 0.5em 0;

	color: #333;

	background-color: #06107F;

	overflow: hidden;

	border-radius: 3px;

}

article.bar section h2

{

	font-size: 14px;

	font-weight: bold;

	width: 100%;

	line-height: 2em;

	padding: 0;

	margin: 0;

	color: #ddd;

}