body{
	margin:0;
	padding:0;
	background-color: #DFE6EF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
}

a:link       {color: green }
a:visited    {color: green }
a:hover      {color: red; }


p {
	margin-top: 0px;
	margin-bottom: 6px;
}

.textsmall1  {
	font-size: .85em;
}

.textsmall2  {
	font-size: .8em;
}

.textlarge1  {
	font-size: 1.1em;
}


.centertext {
	text-align:center;
}

.textright {
	text-align:right;
}

.centerdiv {
 	margin-left: auto ;
 	margin-right: auto ;
}

/* used for making space between text and picture when pic is on left of text   */
.pictextright {
	margin: 0 10px 0 0;
}


/* this is required for images that link to something.  Firefox and IE show border */
img
{  border-style: none;  
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.clearthefloats {clear:both}


/* background colours */
.redbg {
	background: red;	
}

.greenbg{
	background: green;	
}

.lightbluebg {
	background: #0066CC;	
}

.darkbluebg {
	background: #003399;	
}

.orangebg {
	background: #E46C0A;	
}

/* --------------------------Site header navigation menu----------------*/
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
}

#nav-menu li a
{
	display: block;
	line-height: 2em;
    color: white;
    background-color: #0066CC;
    font-size: .9em;
    font-family: verdana;
    font-weight: bold;
    border-bottom: 1px solid black;
    border-top: 1px solid gray;
    border-left: 1px solid black;
    border-right: 1px solid gray;
    text-decoration: none;
	padding-left: 12px;
	padding-right: 12px;
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu  li a:hover, li a:active {
   color: red;
   background-color: #9FDFFF;
}

#nav-menu
{
width:630px;
margin-left:auto;
margin-right:auto;
}

/* -------------Site header navigation menu addition CSS for drop down menus -------------*/
.anylinkcss{
position:absolute;
visibility: hidden;
border-bottom-width: 0;
border:1px solid gray;
line-height: 2em;
z-index: 100;
background-color: #0066CC;
}

.anylinkcss a{
display: block;
background-color: #0066CC;
width: 180px;
text-indent: 3px;
text-align: left;
border-bottom: 1px solid gray;
padding: 1px 0;
text-decoration: none;
font-size: 1em;
font-family: verdana;
font-weight: bold;
text-indent: 5px;
}

.anylinkcss a:link {color: white }

.anylinkcss a:visited {color: white }

.anylinkcss a:hover{ /*hover background color*/
background-color: #9FDFFF;
color: red;
}

/* -------------------------Site header layout----------------*/
/* This holds the whole of the header                         */
#headmaincontainer{
width: 990px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background-image: url(../images/headerbgd.png);
height: 162px;
padding-top:3px;
}

/* This holds the header details pics                     */
#headmaincontainer2{
width: 970px;  
margin: 0 auto;  
background-image: url(../images/headpics.png);
background-repeat:no-repeat;
height: 162px;
}


#topsection{
height: 162px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}


/* Learn With No Fear Bridge */
#headline1 {
text-align:center;
font-size: 1.5em;
color: white;
}

/* No Fear Bridge */
#headline2 {
margin-top: 3px; 
margin-bottom: 0px; 
text-align:center;
font-size: 2.5em;

}

/* The website for learners */
#headline3 {
margin-top: 0px; 
margin-bottom: 0px; 
text-align:center;
font-size: 1em;
font-style:italic;
font-weight:normal;
padding-bottom: 12px;
}

/*------------------------------- Containers etc for three column layout with Header and Footer ----------------*/
#maincontainer{
width: 990px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#contentwrapper{
float: left;
width: 100%;

}

.column {
   width : 295px;
   margin-left: 15px;
   margin-right: 15px;
   float : left;
}

#footer{
clear: left;
width: 100%;
text-align: center;
padding: 4px 0;
}


/* ------------------ Content boxes with round borders and shadow effect (border show as square borders in IE but it still looks OK --------------*/
.shadowbox{
	
padding-left: 12px;
padding-right: 12px;
padding-top: 2px;
border-radius: 10px;
box-shadow: 7px 7px 11px #818181;
}


/*   Contenter boxes header and content classes*/
.boxhead {
	font-weight: bold;
	color: white;
	margin-left: auto;
    margin-right: auto;
	margin-top: 1px;
	margin-bottom: 4px;
	text-align:center;
}

/* This is to create the 'bottom border' or the shadow box without having to define it's height.  Content fills the shadowbox and the foot is added. */
/* Without this we have to specify the shadowbox height each time. */
.boxfoot {
	height: 13px;
}

.boxcontent {
	margin-left: auto;
    margin-right: auto;
	text-align:left;
	background-color:white;
	padding: 7px;
}


/* This is our standard button - use inline style for any changed attributes   */
.btn {
	background-color: #0066cc;
	color: white;
	font-weight: bold;
	border-bottom: 1px solid black;
	border-right: 1px solid black;
	border-left: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	text-align: center;
	padding: 2px;
}

/*  Change background and add pointer when hover over   */
.btn:hover {   
	background-color: #4276FF;
	cursor:pointer;
}

/*  If the button contains a link use white text:  */
/*  Note: changeing the text color doesn't work in Chrome so also put this as inline style on the <a>  */
.btn a:link {
	color: white;
	text-decoration:none;
}


/*  Bid signup buttons used on home page   */
.signupbtn {
	display:inline;
	vertical-align:middle;
	padding:6px;
	color: white; 
	font-size: 1.3em;
}

/*  Link as button   */
.btnlink {
	text-decoration:none;
}

.btnlink:link {
	color:white;
}

.btnlink:visited {
	color:white;
}


/* --------------------------   Help Page CSS ------------------*/

.topicclass {display : none}

.qaclass {position : relative; left : 40px}

.questionclass {width : 720px;
                text-align:left;
                font-weight: bold;
                cursor:pointer;
                float:left;
                padding:5px;
                margin-left:10px;
                margin-bottom:0px}

.answerclass {
        font-style:normal;
        	  left : 34px;
              position : relative;
              margin-left : 0px;
              text-align:left;
              display : none;
              width : 700px;
              padding:5px;
              margin-bottom:0px;
              }

.faqbtn {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  width: 22px;
  margin-right:10px;
}

.openclosebtn {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-right:10px;
  padding: 3px 10px 3px 10px;
}


.topicstring {cursor:pointer; clear:both; font-weight: bold;
              margin-bottom:5px; margin-left:5px}
/* --------------------------   End of Help Page CSS ------------------*/

/* ------------------------------Tip of the Day and Content Pages------------------------*/
div.tips {
  margin-top: 6px;	
  width: 210px;
  padding: 6px;
}
div.infopage {
  margin-top: 6px;	
  width: 500px;
  padding: 5px;
  border : 1px solid black;
}

div.handbox {
  background: #E2E2E2;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left:auto;
  margin-right:auto;
  width: 170px;
  border : 1px solid black;
  padding: 5px;
}

div.handboxleft {
  margin-right: 5px;
  float: left;
}

div.handboxright {
  margin-left: 5px;
  float: right;
}

/* Suit Diagram */
table.suit {
  background: #E2E2E2;
  width: 100px;
  padding: 2px;
}

/* Auction */
table.tipauction {
  width: 170px;
  text-align: center;
  font-size: 1em;
}
/* ------------------------------End of Tip of the Day CSS------------------------*/
/*  -------------------------Suit Symbols Large--------------------------------------------------- */
.S {
	width:16px;
	height:16px;
	background:url(../images/suitsprite.gif) 0px 0px 
}

.H {
	width:16px;
	height:16px;
	background:url(../images/suitsprite.gif) -16px 0px 
}

.D {
	width:16px;
	height:16px;
	background:url(../images/suitsprite.gif) -32px 0px 
}

.C {
	width:16px;
	height:16px;
	background:url(../images/suitsprite.gif) -48px 0px 
}

/*  ----Suit Symbols Small (these seems to be a 1 px game between each on the image sprite  -------- */
.s1 {
	width:12px;
	height:11px;
	background:url(../images/suitsprite.gif) -64px -5px 
}

.h1 {
	width:12px;
	height:11px;
	background:url(../images/suitsprite.gif) -77px -5px 
}

.d1 {
	width:12px;
	height:11px;
	background:url(../images/suitsprite.gif) -90px -5px 
}

.c1 {
	width:12px;
	height:11px;
	background:url(../images/suitsprite.gif) -103px -5px 
}

/*-------------------------------------OLD -Tool Tip not used anywhere----------------------------------*/
a.xtooltip:hover {
	background:#ffffff;  /*BG color is a must for IE6*/
	text-decoration:none;
} 

a.xtooltip span  {
	display:none; 
	padding:2px 3px; 
	margin-left:8px; 
	width:200px;
}

a.xtooltip:hover span {
	display:inline; 
	position:absolute; 
	text-align: left;
	border:1px solid #CCC; 
	background:#FF6; 
	color:#000000;
	padding: 10px;
	box-shadow: 7px 7px 11px #818181;
}

/*--------------------------------------New Tool Tip with fade in----------------------------------*/
/* Simple text only tool tip: Used on home page and flash cards page               */
a.tooltip {
	border-bottom: 1px dotted red;
	color: red;
	outline: none;
	cursor: pointer;
	text-decoration: none;
	position: relative;
}
a.tooltip span {
	
	background: #FFA; border: 1px solid #B7B7B7;
	padding: 0.8em 1em; 
	text-align: left;
	
	position: absolute;
	color: black;
	top: 20px;
	left: 10px;
	width: 250px;
	margin-left: -99em;
	opacity: 0;
	text-decoration: none !important;
	border-radius: 5px;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.4);

	-moz-transition-property: opacity;
	-moz-transition-duration: 1s;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 1s;
	-o-transition-property: opacity;
	-o-transition-duration: 1s;
}

a.tooltip:hover span {
	z-index: 99;
	margin-left: 0;
	opacity: 1;
}

* html a:hover { background: transparent; }

/* ------------------------------------ Frames on demo pages ------------------ */
.demoframediv {
	width: 822px; 
	height: 525px; 
	margin: auto;	
}

.demoframe {
	width: 822px;
	height: 525px; 
	margin: 1px; 
	border: none;	
}

.demonoticeboard {
	margin-left: auto;
	margin-right: auto;
	width: 500px; 
	height: 220px; 
	background: white;
	padding: 10px;
	border: solid 1px gray;
	font-weight: bold;
	border-radius: 6px;
	box-shadow: 2px 2px 7px #333;
	text-align: left;
}

/* used in whichbiddingsystem.php */
.whichsys {
	border-collapse:collapse;
	margin:auto;
	margin-top: 3px;
}

.whichsys td {
	background-color:#EFEFEF;
	border: solid 1px black;
	padding: 4px;
	padding-right: 10px;
	width: 150px;
}