/*  
Theme Name: HelpDesk
Theme URI: http://www.AL6400.net
Description: another AL6400 2007 look based on WordPress Default (Kubrick)
Version: 0.1
Author: Mason Koo
Author URI: http://www.AL6400.net/
*/


/*
There are 5 main sections: Header, Subsection, Sidebar, Content and Footer.

Wrapper encapsulates Content & Sidebar. Basically just centers them.

Content Section encapsulates Wrapper. 
This is to allow the bottom graphic, the rounded corners with shadow. 
Sorry but I didn't know how else to do it in the time constraint.

Header includes blog name and description (content pulled from WP),
main nav links (which is a renamed 'Pages' section - a list that's been
set to display inline), tag, and the banner graphic.

Subsection includes PopularTopics, Tag Cloud (name subSectionAd here, since it
was originally going to be that), and Subscribe.

Content area includes Posts, Entrys, Comments and Reply.

Footer includes ad, RecentReaders and Links.

It's been awhile since I've touch CSS, so I apologize for how it is written.
I had many things explicitly set to make sure the styles were showing since
this is my first WP modification. I will be cleaning this up over time.



Things to try in the future:
- color classes
- padding, margin and border sections
- tone down the usage of classes and ids
*/




/* Positioning */
*
{
  padding: 0;
  margin: 0;
}


body {
  text-align: center;
  background-color: white;
  font-size: 101%;
  line-height: 1.0em;
  font-family: Arial, Verdana, Sans-serif;
  font-style: normal;
  text-decoration: none;
  margin: 0px;
}

#page 
{
  margin: 0 auto;
  padding: 10px 0px 0px;
  width: 950px;
  text-align: left;
}
 
div>#page
{
  margin: 0 auto;
  min-width: 950px;
  width: 950px;
  text-align: left;
}

/* encapsulates Wrapper */
#contentSection {
	margin: auto;
	width: 950px;
	text-align: left;
	overflow: hidden;
}


/* encapsulates Content & Sidebar - basically centers them :/ */
#wrapper
{
  margin: 0px 0px 0px 5px;
  width: 950px;
  text-align: left;
  overflow: hidden;
  background-color: #e0edff;
 }

/* not sure why this is needed, borrowed CSS */
div>#wrapper
{
  margin: 0 auto;
  min-width: 950px;
  width: 950px;
  text-align: left;
}

#header
{
  margin: 0px;
  width: 950px;
  text-align: left;
  overflow: visible;
}
 
div>#header
{
  margin: 0 auto;
  min-width: 950px;
  width: 50px;
  text-align: left;
}

/* Header: Business and Finance */
#header li {
	list-style: none outside;
	padding: 2px 0px 0px;
}

/* Header: container for page links */
#header li ul {
	display: inline;
	margin: 0px 0px 0px 100px;
}

#header h2 {
	margin: 0px 0px 0px 20px;
	display: inline;
}

/* Header: page links */
#header li li {
	list-style: none outside;
	margin: 0px 0px 0px 20px;
	padding: 0px;
	display: inline;
}

#header h1 {
	margin: 0px 0px 0px 15px;
	display: inline;
}


.description {
	margin: 0px 0px 0px 5px;
	display: inline;
}

#bump { /* pushes over the search box :P */
	/*display: inline;*/
	width: 950px;
	height: 30px;
	position: relative;
	overflow: visible;
        padding: 0px 0px 5px;
}

.name {
	position:absolute;
	top: 0px;
	left: 0px;
	padding: 8px 0px 5px;
	overflow: visible;
}

.searchBox  {
	position: absolute;
	left: 700px;
	display: inline;
}

.searchBox form, .searchBox div {
	display:inline;
}

/* tagline inside of banner */
#tag {
	position: relative;
	left: 20px;
	top: 40px;
	text-align: left;
	width:330px;
}

#subSection {
	position: relative;
	height: 151px;
	padding: 4px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #336699;
}

#subSectionPopularTopics {
	width: 306px;
	background-color: #fff;
	position: absolute;
	left: 5px;
	top: 3px;
	height: 151px;
	overflow: hidden;
	border: 1px solid #00225b;
}

#subSectionTag {
	width: 180px;
	background-color: #fff;
	position: absolute;
	left: 316px;
	top: 3px;
	height: 151px;
	overflow: hidden;
	border: 1px solid #00225b;

}

#subSectionAd {
	width: 200px;
	background-color: #fff;
	position: absolute;
	left: 501px;
	top: 3px;
	height: 151px;
	overflow: hidden;
	border: 1px solid #00225b;

}

#subSectionAd center {
   padding: 0px 0px 0px;
}

#cloud {
    margin: 5px 10px;
    overflow:hidden;
}

#subSectionSubscribe {
	width: 238px;
	background-color: #fff;
	position: absolute;
	left: 706px;
	top: 3px;
	height: 151px;
	overflow: visible;
	border: 1px solid #00225b;

}

#subSection h1 span {
	margin: 0px 0px 0px 10px;
}

#subSection h1 div {
	margin: 0px 0px 0px 10px;
}

#subSectionPopularTopics ul{
	margin: 5px 15px 10px 10px;;
}

#subSectionPopularTopics ul li {
	border-top-color: #00225b;
	border-top: 1px dotted;
	padding: 2px 0px 3px;
}

#subSectionPopularTopics ul li.first {
	border-top: none;
	padding: 0px 0px 3px;
}

#subSectionSubscribe .subscribe {
	position: absolute;
	top: 60px;
	left: 0px;
	width: 228px;
}

#subSectionSubscribe .subscribe div {
	padding: 0px 0px 1px 8px;
}

#rssLinks {
	position: relative;
	margin: 14px 0px 0px;
}


#rssLinks .posts {
	position: absolute;
	top: 0px;
	left: 2px;
	width: 108px;
	height: 28px;
	/*background: url(images/posts.jpg);*/
}

#rssLinks .feedBurner {
	position: absolute;
	top: 0px;
	left: 114px;
	/*background: url(images/comments.jpg);*/
	width: 116px;
	height: 28px;
}

#rssLinks p {
	margin: 5px 0px 0px;
	padding: 2px 0px;
}

#rssLinks img, #rssLinks img a:link, #rssLinks img a:visited, #rssLinks img a:hover {
	border: none;
	margin: 0px 5px 0px 12px;
	float: left;	
}


#contentFooter {
	width: 760px;
	/*height: 14px;  turn on if there is a bottom image to the content area*/
}

#content {
	background-color: white; 
	width: 530px;
	float: left;
	padding: 10px 10px 10px 0px;
	margin: 0px 0px 0px 0px;
	height: 100%;
	/*border: 1px dotted red;*/
}

#sidebar {
	padding: 0px 5px;
	margin: 10px 0px 0px 5px;
	width: 220px;
	background-color: #e0edff;
	float: left;
	height: 100%
}

#sidebar h2 {
	/*width: 228px;
	height: 26px;*/
}

#sidebar li, .links li, .ad li {
	padding: 0px;
	list-style: none outside;
}

#extra {
	background-color: white;
	margin: 10px 10px 0px 5px;
	width: 160px;
	float: right;
}


#footer {
	/*background-color: #e0edff;*/
}

#footerTop {
	/*background: url(images/content_top.jpg) no-repeat;*/
	width: 950px;
	height: 14px;
	background-color: #3399CC;
}

#footerBottom {
	/*background: url(images/content_bottom.jpg) no-repeat;*/
	width: 950px;
	height: 14px;
	background-color: #3399CC;
}

#footerContent{
	position: relative;
	/*background: url(images/content_fill.jpg) repeat-y top;*/
	width: 950px;
	height: 250px;
	background-color: #3399CC;
}

#footerContent .ad {
	position: absolute;
	top: 0px;
	left: 10px;
	width: 304px;
	height: 250px;
	background-color: #fff;
}

#footerContent .readers {
	position: absolute;
	top: 0px;
	left: 323px;
	width: 304px;
	height: 250px;
	overflow: hidden;
	background-color: #fff;
}

#footerContent .links {
	position: absolute;
	top: 0px;
	left: 636px;
	width: 304px;
	height: 250px;
	background-color: #fff;
}
/*
.commentWrap  {  for the super long URL's that peeps may put in. 
IE autowraps it, but everybody else doesn't 
	overflow: auto;
	min-height: 34px;
}
*/
/* END --- Positioning */






/* Type */

a:link, a:visited, a:hover {
  text-decoration: none;
 }

#cloud a:hover, .post small a:hover, .postmetadata a:hover, .postmetadata small a:hover, .navigation a:hover {
  text-decoration: underline;
 }

#subSection h1, #sidebar h2, .post h4, #headerimg h2 {
	font-weight: normal;
}

#header h1 a:link, #header h1 a:visited, #header h1 a:hover{
	font-size: 1.0em;
	color: #00225b;
}

.tag2, #headerimg a:link,  #headerimg a:visited, #headerimg a:hover {  /* Business and Finance */
	font-size: 0.6em;
	color: #fff;
}

.description {
	font-size: 1.2em;
	font-weight: bold;
	color: #00225b;
}


/* (Business and Finance) Page titles: About, Archives, etc... */

#header li li, #header li li  a:link, #header li li a:visited {
	font-size: 0.9em;
	color: #d6fdff;
}

#header li li a:hover {
	font-size: 0.9em;
	color: #00225b;
}



/* Tagline in banner */
#tag {
	font-family: Georgia, "Times New Roman", Serif;
	font-size: 1.5em;
	line-height: 1.1em;
	font-weight: bold;
	color: white;
}


#sidebar h2, .links h2, .readers h2, .ad h2 {
	font-size: 0.8em;
	font-weight: normal;
	text-indent: 10px;
	line-height: 2.0em;
	color: #d6fdff;
}


#sidebar li ul li, .links li ul li, .readers div div, .ad li ul li {
	font-size: 0.8em;
	color: #333;
	font-weight: bold;
}

#sidebar a:link, #sidebar a:visited, .links a:link, .links a:visited, .ad a:link, .ad a:visited {
	font-size: 0.9em;
	font-weight: normal;
	line-height: 1.2em;
	color: #00225b;
}
/*
#sidebar a:hover, .links a:hover, .ad a:hover {
	font-size: 0.9em;
	font-weight: normal;
	color: #00225b;
	background-color: #d6eaff;
}*/

#editEntry a:link, #editEntry a:visited {
	font-size: 0.8em;
	color: #00225b;
	padding: 0px 15px;
}

#editEntry a:hover {
	font-size: 0.8em;
	color: #00539e;
	padding: 0px 15px;
}




/* Popular Topics, Tag Cloud, Subscribe to AL6400 */
#subSection h1 {
	font-size: 0.8em;
	line-height: 2.0em;
	color: #D1EEFC;
}


#subSectionPopularTopics ul, #subSectionPopularTopics ul a:link, #subSectionPopularTopics ul a:visited, #subSectionTag a:link, #subSectionTag a:visited {
	font-size: 0.85em;
	line-height: 0.95em;
	color: #00225b;
	list-style: none outside;
}

#subSectionPopularTopics ul a:hover, #subSectionTag a:hover {
	font-size: 0.85em;
	line-height: 0.95em;
	color: #00539e;
	list-style: none outside;
}

#subSectionSubscribe .posts, #subSectionSubscribe .posts a:link, #subSectionSubscribe .posts a:visited, #subSectionSubscribe .feedBurner, #subSectionSubscribe .feedBurner a:link, #subSectionSubscribe .feedBurner a:visited {
	font-size: 0.85em;
	line-height: 2.4em;
	color: #00225b;
}

#subSectionSubscribe .posts a:hover, #subSectionSubscribe .feedBurner a:hover  {
	font-size: 0.85em;
	line-height: 2.4em;
	color: #00539e;
}

#subSectionSubscribe .subscribe {
	font-size: 0.75em;
	line-height: 0.9em;
	color: #00539e;
}

/* newer posts | older posts */
.navigation a:link, .navigation a:visited {
	font-size: 0.85em;
	line-height: 0.95em;
	color: #000;
}

.navigation a:hover {
	font-size: 0.85em;
	line-height: 0.95em;
	color: #000;
}



.pagetitle { /* archives, categories and such */
	font-family: Georgia, "Times New Roman", Serif;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding: 10px 15px 5px;
}


.post h2 a:link, .post h2 a:visited {
	font-weight: bold;
	font-size: 0.7em;
	color: #d6fdff;
}

.post h2.page {
	font-weight: bold;
	font-size: 1.0em;
	color: #d6fdff;
}

.post h2 a:hover {
	font-weight: bold;
	font-size: 0.7em;
	color: #ffcc00;
}

.post h3 {
	background-color: #ff0000;
}

.post small {
	font-size: 0.7em;
	line-height: 1.3em;
	color: #666;
}

.post small a:link, .post small a:visited {
	font-size: 1.0em;
	line-height: 1.3em;
	color: #00225b;
}

.post small a:hover {
	font-size: 1.0em;
	line-height: 1.3em;
	color: #00225b;
}

.postmetadata, .postmetadata small {
	font-size: 0.8em;
	font-weight: bold;
	color: #00225b;
}

.postmetadata.alt small {
	text-align: left;
	display: block;
}

.postmetadata a:link, .postmetadata a:visited, .postmetadata small a:link, .postmetadata small a:visited {
	font-size: 1.0em;
	color: #00539e;
	font-weight: normal;
	background-color: transparent;
}

.postmetadata a:hover, .postmetadata small a:hover {
	font-size: 1.0em;
	color: #00539e;
	font-weight: normal;
	background-color: transparent;
}


.entry blockquote {
	margin: 0px 15px;
	padding: 0px 10px 0px 5px;
	border-left: 1px solid #ccc;
}

.entry p, .post dl {
	font-size: 0.8em;
	line-height: 1.2em;
	color: #00225b;
}

.entry p a:link, .entry p a:visited, .post dl dd a:link, .post dl dd a:visited {
	font-size: 0.9em;
	line-height: 1.2em;
	color: #000;
}

.entry p a:hover, .post dl dd a:hover {
	font-size: 0.9em;
	line-height: 1.2em;
	color: #000;
	background-color: #d6eaff;
}


.entry ul li, .post .authorposts li  {
	font-size: 0.9em;
	color: #00539e;
	list-style-image: url('images/bullet.gif');
	margin: 5px 0px;
}

.entry ul li a:link, .entry ul li a:visited, .post .authorposts li a:link, .post .authorposts li a:visited {
	font-size: 0.9em;
	line-height: 1.2em;
	color: #00225b;
}


.entry ul li a:hover, .post .authorposts li a:hover  {
	font-size: 0.9em;
	line-height: 1.2em;
	color: #00225b;
	background-color: #d6eaff;
}


.entry div, .authorposts li div {
	font-size: 0.8em;
	line-height: 0.8em;
	color: #00539e;
	padding: 0px 0px 4px;
}

.entry h4 {
	font-size: 1.0em;
	color: #00539e;
	margin: 0px 10px 10px 0px;
	padding: 2px 0px;
}



#myComments h3 {
	font-size: 0.9em;
	font-weight: bold;
	color: #333;
	padding: 5px 0px 10px ;
}

#myComments h3 div {
	font-size: 0.9em;
	color: #333;
	padding: 5px 0px 0px;
}


#myComments cite { /* userid for comment */
	font-size: 0.8em;
	font-style: normal;
	font-weight: bold;
	color: #00225b;
}

#myComments small { /* comment date */
	font-size: 0.8em;
	color: #00539e;
}

#myComments li p { /* actual comment text */
	padding: 10px 0px;
	font-size: 0.8em;
	line-height: 1.4em
	border: 0px;
	color: #00225b;
	font-style: normal;
	text-decoration: none;

}

#myComments ol {
	list-style-position: outside;
	font-size: 1.0em;
	color: #00225b;
}

#myComments li {
	border-top: 1px solid #00225b;
	border-bottom: 1px solid #00225b;
	background-color: white;
	margin: 10px 0px 10px 50px;
	padding: 3px 15px 5px 10px;
}



#myComments li p.says { /* not used, took it out of the comments.php */
	display: inline;
	padding: 0px;
	font-size: 0.8em;
	color: #1e1e1e;
}

#myComments em {  /*awaiting moderation */
	font-size: 0.8em;
	font-style: italic;
	color: #cc6633;
}

#myComments a:link, #myComments a:visited {
	font-size: 0.9em;
	color: #00539e;
}

#myComments a:hover {
	font-size: 0.9em;
	color: #00539e;
	text-decoration: underline;
}


#reply h3 {
	font-size: 1.2em;
	font-weight: bold;
	color: #d6eaff;
	padding: 5px 0px 10px 10px;
}

#reply p {
	font-size: 0.9em;
	font-weight: bold;
	color: #d6eaff;
	vertical-align: middle;
}



#credits {
	text-align: center;
	font-size: 0.7em;
	line-height: 2.4em;
	color: #000;
}

#credits a:link, #credits a:visited {
	text-align: center;
	font-size: 0.8em;
	line-height: 2.4em;
	color: #000;
}

#credits a:hover {
	text-align: center;
	font-size: 0.8em;
	line-height: 2.4em;
	color: #000;
}

/* END --- Type */





/* 
IMAGES

Most of the images used are done with an approach of top, middle (fill) and bottom.
A lot of times I'm modifying WP's usage of lists (ie. Sidebar). I tried to replicate
this to many of the other sections (posts, comments, footer ad, recent readers, links, etc)

*/


#headerimg {
	background: url(images/BlogBanner.jpg);
	height: 128px;
	background-color: #ddd;
}

#contentSection {
	/*background: url(images/content_fill.jpg);*/
}

#contentFooter {
	/*background: url(images/content_bottom.jpg) no-repeat;*/
}

#subSection .popPhoto {
	/*background: url(images/popular_photo.jpg) no-repeat top;
	height: 95px;
	width: 122px;
	float: left;
	margin: 0px 10px 0px 0px;*/
}


#subSectionPopularTopics h1, #subSectionSubscribe h1, #subSectionAd h1, #subSectionTag h1{
	background: url(images/gradient2.png) repeat-x top;
	height: 26px;
	background-color: #0066CC;

}


#sidebar ul li h2 {
	background: url(images/gradient2.png) repeat-x top;
	height: 26px;
	background-color:#0066CC;
	border-top: 1px solid #00225b;
	border-left: 1px solid #00225b;
	border-right: 1px solid #00225b;
}

.links li h2, .ad div h2 {
	background: url(images/gradient2.png) repeat-x top;
	height: 26px;
	background-color:#0099FF;
}

#sidebar ul li {
	/*background:url(images/sidebar_bottom.jpg) no-repeat bottom;*/
	border-bottom: 1px solid #00225b;
	background-color: white;
	margin: 0px 0px 10px;
}

.links li {
	/*background:url(images/sidebar_bottom.jpg) no-repeat bottom;*/
	background-color: white;
	margin: 0px 0px 10px;
}

#sidebar ul li ul, #sidebar ul li div {
	padding: 4px 5px;
	margin: 0px;
	/*background: url(images/sidebar_fill.jpg) repeat-y top;*/
	border-left: 1px solid #00225b;
	border-right: 1px solid #00225b;
}

#sidebar ul li ul li {
	border: 1px solid #999999;
	width: 200px;
	background-color: #ffffff;
	/*background-image: url(images/sidebar_item-normal2.gif);*/
	margin: 3px 0px 0px 0px;
	padding: 2px 0px 2px 5px;
}

#sidebar ul li ul li:hover {
	border: 1px solid #999999;
	width: 200px;
	background-color: #d6eaff;
	margin: 3px 0px 0px 0px;
	padding: 2px 0px 2px 5px;
}


#sidebar ul li div div {
	border: 1px solid #999999;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}


/* affects all posts, padding separates each entry */
.post {
	/*background: url(images/entry_fill.jpg);*/
	margin: 0px 0px 20px 0px;
	border: 1px solid black;
	background-color: #fff;

}
/* entry/post title */
.post h2 {
	background: url(images/gradient2.png) repeat-x top;
	padding: 6px 15px 5px 15px;
	background-color:#0099FF;
}

/* post in, edit, comments */
.postmetadata {
	/*background: url(images/entry_footer.jpg);*/
	margin: 0px 6px;
	padding: 4px 0px 6px 10px;
}


.entry {
	/*background: url(images/entry_fill.jpg);*/
	padding: 10px 15px;
	overflow: hidden;
}

.entry p img {
	margin: 0px 0px;
}

.entry ul {
	padding: 0px 0px 0px 15px;
}

.entryFooter {
	/*background: url(images/entry_bottom.jpg);*/
	height: 6px;
}


.links li ul {
	padding: 4px 12px;
	margin: 0px;
	/*background: url(images/sidebar_fill.jpg) repeat-y top;*/
}

.links li ul li{
	border: 1px solid #999999;
	width: 270px;
	background-color: #ffffff;
	/*background-image: url(images/sidebar_item-normal2.gif);*/
	margin: 3px 0px 0px 0px;
	padding: 2px 5px 2px 4px;
}

.links li ul li:hover {
	border: 1px solid #999999;
	width: 270px;
	background-color: #d6eaff;
	/*background-image: url(images/sidebar_item-normal2.gif);*/
	margin: 3px 0px 0px 0px;
	padding: 2px 5px 2px 4px;
}


.ad div.top, .readers div.top {
	height: 243px;
	overflow: hidden;
}

.ad div.bottom {
	/*background:url(images/sidebar_bottom.jpg) no-repeat bottom;*/
	height: 7px;
	vertical-align: bottom;
}

.ad, .links, .readers  {
	/*background: url(images/sidebar_fill.jpg) repeat-y top;*/
	border: 1px solid #00225b;
}

.ad ul li{
	border: 1px solid #999999;
	width: 280px;
	background-color: #ffffff;
	/*background-image: url(images/sidebar_item-normal2.gif);*/
	margin: 6px 0px 0px 12px;
	padding: 0px;
        text-align: center;
}

.readers div h2 {
	background: url(images/gradient2.png) repeat-x top;
	height: 26px;
	background-color: #0099FF;
}

.readers {
	/*background: url(images/readers_fill.jpg) repeat-y top;*/
	width: 268px;
}

.readers div.bottom {
	/*background: url(images/readers_bottom.jpg) no-repeat bottom;*/
	height: 7px;
}

/* END -- Images */




/* HR override */
.gone {
	display: none;
}

.hr {
	border-bottom: 1px solid #000000;
	margin: 2px 6px 0px;
}	
/* END -- HR override */




/* input field and buttons */

form {
	vertical-align: middle;
	padding: 0px 0px 0px 5px;
	/*display: inline;*/
}


input.box {
	vertical-align: middle;
	border: 1px solid #999999;
}
/*
input.btn {
	vertical-align: middle;
	background: url(images/btn.jpg) no-repeat center center;
	width: 74px;
	height: 25px;
	border: none;
}

input.btn2 {
	vertical-align: middle;
	background: url(images/btn2.jpg) no-repeat center center;
	width: 74px;
	height: 25px;
	border: none;
}

input.btn, input.btn2 {
	font-size: 0.8em;
	line-height: 0.9em;
	color: #ffffff;
}

input:hover.btn, input:hover.btn2 {
	font-size: 0.8em;
	line-height: 0.9em;
	color: #ffcc00;
}
*/
.subscribe .box {
	width: 120px;
}

/* END --- input field and buttons */


form textarea {
   height: 150px;
}



/*
uh... MISC?
*/



/* entry/post date */
.post small {
	padding: 0px 15px;
}

/* body text for entry */
.entry p {
	padding: 0.5em 0em;
}


/* prev, next links ??? not enough entries at the moment :( */
.navigation {
	text-align: center;
	padding: 0px 0px 15px;
}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}


textarea {
	width: 450px;
	border: 1px solid black;
}

#reply {
	background-color: #336699;
	margin: 20px 8px;
	padding: 7px;
}

#reply input.input {
	border: 1px solid black;
	padding: 2px;
	margin: 2px 0px;
}

#myComments {
	margin: 0px 8px;
	padding: 7px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}


/* comments area for post */
.postmetadata.alt {
	width: 494px;
	margin: 0px 0px -9px -8px;
}


.nocomments {
	text-align: center;
}

.post dl, .post .authorposts {
	padding: 10px 0px 10px 30px;
}


#chart
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;}
.style12 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.style15 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: italic; }

.readers div div img {
   margin-top:6px;
   border: 1px solid #00225b;
}