body{
  text-align: center;
  min-width: 720px; 	
  background-color: #041a36;
}

/************************************************************/
/*                 Page Structure     						*/
/************************************************************/

#TopArea{
  position: relative;
  top: 134px;
  background-color: #041a36;
  width: 720px;
  margin: 0 auto;
  padding: 0;
  text-align: left;  
  border: 0px solid #fff;  
}


#Wrapper{
  position: relative;
  top: 176px;
  background-color: #1c314d;
  width: 720px;
  margin: 0 auto;
  text-align: left;  
  border: 0px solid #fff;
}


/*****************************************/
/*       Small Toggle Tab Bar 			 */
/****************************************/

#SmallToggleTabBar{
  position: relative;
  left: 80px;
  top: -20px;
  margin: 0px;
  padding: 0px;
}

#SmallTabLeft{
  width: 153px !important;
  height: 27px !important;
  float: left !important;
  padding: 0 !important;
  margin-top: 1px !important;
  border: 0px !important;  
}

#SmallTabRight{
  position: relative;
  
  left: 0px;
  width: 143px !important;
  height: 27px !important;
  float: left !important;
  padding: 0px !important;
  margin-top: 1px !important;
  border: 0px !important;  
}  


/****************************************/
/* Back Button  						*/
/****************************************/


#BackToButton{
 position: absolute;
 top: 10px;
 left: 12px;
 border: 0px;
 padding: 0;
 margin: 0; 
}

#BackToButtonText{
 position: absolute;
 top: 12px;
 left: 48px;
 color: #F0F0F0;
 font-size: small;
 font-weight: bold;
 font-family: Verdana, Tahoma, sans-serif;
 text-decoration: none;   
}

#BackToButtonText:hover{
 position: absolute;
 top: 12px;
 left: 48px;
 color: white;
 font-size: small;
 font-weight: bold;
 font-family: Verdana, Tahoma, sans-serif;
 text-decoration: none;   
}


/***************************************/
/*         Blue Box 				   */
/**************************************/

#BlueBar{
 text-align: left;
 position: absolute;
 top: 40px;
 left: 0px;
 margin: 0;
 padding: 0;
 border-top: 1px #CCC solid;
 border-bottom: 1px #CCC solid;
 height: 90px;
 width: 100%;
 background: #5284cb url(images/blueFadeReversed.png) repeat-x bottom; /* have to make image thin and wider */
}

#WidgetopLogoArea{
 margin-left: auto;
 margin-right: auto;
 width: 720px;
}

#WidgetopLogo{
 padding-top: 4px;
 padding-bottom: 2px;
 margin-left: auto;
 margin-right: auto;
 padding-left: 140px;
}

#WidgetopHeaderText{
 position: relative;
 top: 10px;
 padding-bottom: 14px;
 
}


/****************************************/
/*  Links Box                           */
/****************************************/


#QuickLinksDeveloper{
   position: relative;
   left: 0px;
   background-color: red;
   width: 171px;
   height: 210px;
   padding: 0;
   margin: 0;
   background: url(images/linkbarmiddle.png) repeat-y;
}

#QuickLinksAboutUs{
   position: relative;
   left: 0px;
   background-color: red;
   width: 171px;
   height: 185px;
   padding: 0;
   margin: 0;
   background: url(images/linkbarmiddle.png) repeat-y;
}

.boxtop {
  width: 171px;
  height: 18px;
  background-color: blue;
  
  background: url(images/linkbartop.png) no-repeat left top;
  padding-top: 0px;
  margin: 0;
}


.boxlast {
  width: 171px;
  height: 18px;
  background-color: yellow;
  background: url(images/linkbarbottom.png) no-repeat left bottom;
  padding-bottom: 0px;
  margin: 0;
}


/*************************************/
/*         Links 		     */
/************************************/


#LinkNav{
       background-color: #1c314d;
       position: relative;
       top: 0px; /* XY pos of linksbox */
       left: 10px;
       margin-top: 0px;
	   padding-top: 0px;
	   padding-bottom: 0px;
	   width: 171px;
	   float: left;
	   clear: both;
       vertical-align: middle;  
}

#Selected{
        background: url(images/bluelinkbar-SL.png) no-repeat left top;
}

#Selected:hover{
        background: url(images/bluelinkbar-SL.png) no-repeat left top !important;  
}

#Selected a:hover{        
        text-decoration: none !important;  
}


#LinkNav li {
        padding-top: 0px;
        padding-left: 0px;
	    padding-right: 0px;
	    margin-bottom: 4px;   
	    height: 24px;    
}



#LinkNav li:hover {
        background: url(images/bluelinkbar-UN.png) no-repeat left top;
        padding-top: 0px;
        padding-left: 0px;
	    padding-right: 0px;
	    margin-bottom: 4px; 
	    height:24px;      
}

#LinkNav img{
        position: relative;
        left: 16px;
        bottom: 2px; 
        padding-top: 0px;
        vertical-align: middle;
}

#LinkNav a{ 
      
      margin-bottom: 0px; 
      margin-top: 0px;  
      padding-bottom: 0px;
      padding-left: 20px;
      padding-top: 0px;
      text-decoration: none;
      color: white;
      font-family: Verdana, Tahoma, sans-serif;
      font-size: small;
      font-weight: normal;
}

#SelectedLink{
      margin-bottom: 0px; 
      margin-top: 0px;  
      padding-bottom: 0px;
      padding-left: 20px;
      padding-top: 0px;
      text-decoration: none;
      color: white;
      font-family: Verdana, Tahoma, sans-serif;
      font-size: small;
      font-weight: normal;
}

#LinkNav a:hover{
      text-decoration: underline;
}

#LinkNav ul{
   position: relative;
   top: 10px; /* xy position bullets */ 
   left: -40px;
   width: 171px;
   margin-top: 0px;
   padding-top: 0px;
   list-style-type: none;
}

/*************************************/
/*          Footer Area              */
/************************************/


#Footer{ /* Keep For Correct Display Properties */  
  color: white;
  text-align: center;
  clear: both;
  font-size: small;
  font-family: Ariel, Verdana, Tahoma, sans-serif;
  padding-bottom: 6px;
  margin-left: 50px;
}


/**************************************************/
/* 			NAV Bar 				         	  */
/**************************************************/

#TabBarMiddleWidgetop{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWidgetop.png) no-repeat;
  background-color: #041a36;
  width: 123px;
  height: 40px;
}

#TabBarMiddleWhatsNew{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWhatsNew.png) no-repeat;
  background-color: #041a36;
  width: 97px;
  height: 40px;
  

}

#TabBarMiddleWigetGallery{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWidgetGallery.png) no-repeat;
  background-color: #041a36;
  width: 127px;
  height: 40px;
  
}

#TabBarMiddleDeveloper{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleDeveloper.png) no-repeat;
  background-color: #041a36;
  width: 90px;
  height: 40px;
  
}

#TabBarMiddleAboutUs{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleAboutUs.png) no-repeat;
  background-color: #041a36;
  width: 81px;
  height: 40px;  
}



/* Unselected*/

#TabBarMiddleWidgetop_UnSelected{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWidgetop-UN.png) no-repeat;
  background-color: #041a36;
  width: 123px;
  height: 40px;
  border-bottom: 1px solid #041a36;
}

#TabBarMiddleWhatsNew_UnSelected{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWhatsNew-UN.png) no-repeat;
  background-color: #041a36;
  width: 97px;
  height: 40px;
  border-bottom: 1px solid #041a36;

}

#TabBarMiddleWigetGallery_UnSelected{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWidgetGallery-UN.png) no-repeat;
  background-color: #041a36;
  width: 127px;
  height: 40px;
  border-bottom: 1px solid #041a36;
}

#TabBarMiddleDeveloper_UnSelected{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleDeveloper-UN.png) no-repeat;
  background-color: #041a36;
  width: 90px;
  height: 40px;
  border-bottom: 1px solid #041a36;
}

#TabBarMiddleAboutUs_UnSelected{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleAboutUs-UN.png) no-repeat;
  background-color: #041a36;
  width: 81px;
  height: 40px;
  border-bottom: 1px solid #041a36;
}

/****************************/
/*      Hover 				*/
/****************************/

#TabBarMiddleWidgetop_UnSelected:hover{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWidgetop-HV.png) no-repeat;
  background-color: #041a36;
  width: 123px;
  height: 40px;

}

#TabBarMiddleWhatsNew_UnSelected:hover{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWhatsNew-HV.png) no-repeat;
  background-color: #041a36;
  width: 97px;
  height: 40px;
}

#TabBarMiddleWigetGallery_UnSelected:hover{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleWidgetGallery-HV.png) no-repeat;
  background-color: #041a36;
  width: 127px;
  height: 40px;
}

#TabBarMiddleDeveloper_UnSelected:hover{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleDeveloper-HV.png) no-repeat;
  background-color: #041a36;
  width: 90px;
  height: 40px;
}

#TabBarMiddleAboutUs_UnSelected:hover{
  margin-top: 1px;
  float: left;
  background: url(images/TabMiddleAboutUs-HV.png) no-repeat;
  background-color: #041a36;
  width: 81px;
  height: 40px;
}


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

.tabSelected {
  border-bottom: 1px solid #1c314d ! important;
}

.tabBarLeft{
  
  float: left;
  padding: 0;
  margin-top: 1px;
  border: 0px;
  background-color: #041a36;
  border-bottom: 1px solid #041a36;
  width: 20px;
  height: 40px;
}

.tabBarRight{
  
  float: left;
  padding: 0px;
  margin-top: 1px;
  border: 0px;
  background-color: #041a36;
  border-bottom: 4px solid #041a36;
  width: 20px;
  height: 40px;
}

.tabBarMiddleWidgetop{
 float: left;
 padding:0;
 margin:0;
 border:0; 
 background-color: #041a36;
 border-bottom: 1px solid #041a36;
}


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


#Content{
    margin-top: 0px;
    margin-right: 8px;
    padding: 0px;
    width: 522px;
    float: right;
    color: black;
    background-color: white;
}

#Content h1, h2, p {
      padding-right: 0px;
}


#PanelArea{
  margin: 0;
  padding: 0;
}

#PanelArea h1{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  color: #041a36;  
  /*background-color: white; #5284CB; #2A426E;*/
  font-family: Ariel, Verdana, Tahoma, sans-serif;
  font-size: 1.8em;
  font-weight: normal;
  padding: 4px; 
  margin-top: 10px;
}


#PanelArea h3{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  color: #041a36;  
  /*background-color: white; #5284CB; #2A426E;*/
  font-family: Ariel, Verdana, Tahoma, sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  padding: 4px; 
  margin-top: 10px;
}

#PanelArea h2{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  color: #041a36;  
  /*background-color: white; #5284CB; #2A426E;*/
  font-family: Ariel, Verdana, Tahoma, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  padding: 4px; 
  margin-top: 10px;
}


.blueTextPromo{
    font-size: 1.0em !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    color: #476fa1 !important;
    margin: 0px;
    padding: 0px;
}

#PanelArea p{
  color: black;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 80%;
  font-family: Verdana, Tahoma, sans-serif;
  padding: 2px; 
}


#PanelArea img{
  width: 26px;
  height: 26px;
  padding-top: 4px;
  vertical-align: top;
  margin-right: 6px;
}


#PanelArea li{
 font-family: Verdana, Tahoma, sans-serif;
 margin-left: 24px;
 margin-right: 20px;
 padding-bottom: 8px;
}

#PanelArea ul{
 margin-left: 24px;
 margin-right: 20px;
 padding: 6px;
 margin-top: 8px;
}


#TestDirImage{
 padding: 4px;
 margin-left: 50px;
 margin-bottom: 10px;
 width:402px !important;
 height:73px !important; 
}

/***********************************/
/*         Edit Pencil 			   */
/**********************************/

#EditImage{
width: 45px !important; 
height: 33px !important;
position: relative;
top: -6px;
}

/************************************/
/* 			White Text Bar 			*/
/************************************/

.whiteTopTextBar{
  width: 522px !important;
  height: 18px !important;
  background-color: #1c314d !important;
}

.whiteBottomTextBar{
  width: 522px ! important;
  height: 18px !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 20px;
}

.whiteTextBlock{
  background-color: #1c314d;
  width: 522px;  
  margin: 0;
  padding: 0;
}

/****************************/
/* Developer page buttons   */
/****************************/

#BulletedContent p{
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 0px;  
}

.buttonLarge{
	position: relative !important; 
	left:20px !important;
	border:0px !important; 
	margin:4px !important;
}

#ButtonLarge{
	width:190px !important; 
	height:31px;
}

#ButtonSmall{
	width:137px !important; 
	height:20px !important;
}

#ButtonTiny{
	width:80px !important; 
	height:15px !important;
}

#PixelDivider{
  margin-bottom: 4px !important;
  padding: 0px !important;
  margin-left: 20px;
  height:1px !important;
  width:132px !important;
  border-top: 1px grey dotted !important;
}