/*-------------------------------------------
Default styles
---------------------------------------------

These styles apply across most pages on the website and all media
types. Styles specific to particular layouts/pages and media
types are in additional style files.

Ben Sturmfels

------------------------------------------*/


/*------------------------------
Regular block level elements
------------------------------*/
body {
  color: #333;
  font-size: 80%;
  font-family: arial, sans-serif;
  background: white;
  min-width: 42em; /* around 500px for default of 16pt @ 100% */
  padding : 0;
  margin: 0;
  background: #ffffff url("../image/body_content_bg.jpg") repeat-x;
}

p, h1, h2, h3, h4, li, dt, dd, pre {
  text-align: left; /* avoid IE6 bug */
}

h1 {
  font-size: 1.2em;
  clear: both;
  padding: 0.2em 0.5em 0 0;
  margin: 0 0 0.5em;
}

h2 {
  font-size: 1.1em;
  margin: 1em 0 0.4em;
}

h3 {
  font-size: 1em;
  font-style: italic;
  margin: 0.6em 0 0.5em;
}

h4 {
  font-size: 1em;
  font-weight: normal;
  font-style: italic;
  margin: 0.8em 0.5em;
}

p {
  /* max-width: 50em;  readable line width */
  margin: 0 0 0.5em 0;
}
dl { margin: 0 0 0.7em; }
blockquote { margin: 0; }
ul { margin-top: 0.5em; margin-bottom: 0.5em; }
li {  max-width: 40em; vertical-align: top; margin: 0; padding: 0 0 0.3em 0; list-style-position: outside; /* readable line width */ }


/*------------------------------
Page lagout blocks
------------------------------*/
#header {
  /*position: relative; /* children will be relative to this */
}

#content {
  margin-bottom: 1.5em;
  padding: 0;
}

#page-info {
  width: 16em;
  float: right;
  padding: 0;
  margin: 0.2em 0 0.2em 0.5em;
}

#panel {
  background: #E7EAF3 url(../image/topic-logo-bg.png) no-repeat 75% 75%;
  min-height: 400px;
  border-left: solid 1px #8EB3D8;
}

* html #panel { height: 400px; } /* grumble, grumble */

#footer {
  font-size: 0.9em;
  clear: both;
  position: relative;
  padding: 0 0 0.5em;
  background: url(../image/footer_pic.jpg) repeat-x top left;
  border-top: 1px solid white;
}

* html #footer { border-top: 1px solid white; }


/*------------------------------
Menus
------------------------------*/
#overall-menu ul, #section-menu ul ,
#topic-menu ul {
  list-style: none;
  padding: 0; margin: 0;
}

#section-menu li a {
  white-space: nowrap;
}

#section-menu a:hover, #topic-menu a:hover { text-decoration: underline; }

/*** Overall menu ***/
#overall-menu {
  height: 21px;
  float: left;
}

#overall-menu ul {
  float: left;
  margin: 0;
}

#overall-menu li {
  line-height: 2.2em;
  float: left;
  padding: 0;
  margin: 0 0.8em 0 0;
}

#overall-menu fieldset { float: left; margin: 0; padding: 1px 0 0 5px;}

#overall-menu li a {
  font-weight: bold;
  text-decoration: none;
}

#overall-menu li a:hover { text-decoration: underline; }


/*** Section menu ***/
#section-menu {
  /*float: right; */
  /*padding-top: 4em; /* margin doesn't work for Firefox - fieldset bug */
  position: absolute;
  right: 2em; top: 0;
  padding: 0;
  margin: 0 60px 0 0;

}

#section-menu ul {
  padding: 0;
  margin: 0;
}

#section-menu li {
/*  line-height: 2em;*/
  /* if floating is done from <a>, then items will not wrap */
  float: left;
  padding: 0;
  margin: 0 4px 0 0;
  border-right: 1px solid #999999;
}

#section-menu li.sec-4 { border: none; }

#section-menu li.first { padding-left: 0; border: none; }

#section-menu li a {
  color: #999999;
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: 0;
}

#section-menu li.current a {
  color: #999999;
}

#section-menu li span { display: block; padding: 0 0 0 5px; }
/* extra padding on right */
#section-menu li a { padding: 6px 0.5em 0 0; }

/*** Topic menu ***/
#topic-menu {
  min-height: 450px; /* same as for panel */
  min-width: 241px;
  padding: 0; /* move to another style sheet */
  background: #fff url("../image/topic_bg.jpg") no-repeat top left;
}

body.sec-1 #topic-menu { }

* html #topic-menu { height: 305px; }

#topic-menu h2 {
  padding: 0.2em 0 0.8em 20px;
  margin: 0;
  font-size: 1.2em;
  color: #326B9B;
  /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
  font-variant: small-caps;
}

#topic-menu ul {
  padding: 0;
  margin: 0;
}

#topic-menu li {
  text-align: left;
  border-bottom: 2px dotted #fbdca5;
  margin: 0 0 0.5em;
  padding: 0;
  font-size: 1em;
  width: 240px;
  /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
}

#topic-menu li a {
  color:  #333333;
  text-decoration: none;
  line-height: 1.9em;
  font-weight: bold;
  display: block;
  padding-left: 35px;
}

#topic-menu li.current a {
  color: #326B9B;
  background: url(../image/topic-menu-sel.png) no-repeat left center;
}


/*------------------------------
Content
------------------------------*/
/* bad because em sizes are slightly different */
#content h2, #content p { margin-left: 0; margin-right: 0.5em; }

#content h3, #content h4 { margin-left: 0; margin-right: 0.5em; }

#content h1 { margin-left: 0; }

#content h1#page-title {
  color: #03498E;
  font-size: 1.4em;
  font-weight: normal;
  line-height: 1.0;
  margin: 0;
  /*color: white;
  background: #999;
  padding-left: 0.5em;
  margin-left: 0;*/
  display: inline;
}

#content p#breadcrumb {
  display: inline;
}

#content h1, #content h2, #content h3, #content h4 { color: #03498E; }

#content h4 { line-height: 1.5; }

#content #summary p {
  font-size: 1em;
  font-weight: normal;
  clear: left;
  padding-top: 1em;
}

#content img {
  padding: 5px 14px 5px 0;
}

#content a:link {color: #0033cc}
#content a:visited {color: #0033cc}

/*------------------------------
Panel
------------------------------*/
#panel h1, #panel h2, #panel h3, #panel h4,
#panel p, #panel li {
  padding-left: 0.7em;
  margin-right: 0.7em;
}

#panel h1 {
  color: white;
  background: #F99D31;
  padding: 0.2em 0.5em 0.2em 0.5em;
  margin: 0 0 0.5em 0;
/*  font-family: Verdana, Arial, Helvetica, sans-serif;*/
  font-variant: small-caps;
}

#panel h2 {
  color: #03498E;
  padding-top: 0.3em;
}

#panel p img {
}

#panel .decoration {
  float: none;
  margin: 0.5em 1em;
}

#panel div img { margin-left: 1em; }

#panel a:link {color: #0033cc}
#panel a:visited {color: #0033cc}

/*------------------------------
Forms
------------------------------*/
fieldset { border: none;}

/* Search form */
#search-form, #search-form fieldset {
  padding: 0; margin: 0;
}
#search-form label, #search-form legend { display: none; }

/* Would like to do sky bike icon with generated content, but not
widely enough supported. Have for the moment added it as a
right-aligned background that fits inside the right padding of
the form. */
#search-form {
  /*text-align: right;*/
  line-height: 34px;
  display: inline; /* double margin bug */
  width: 23em;
  float: left;
  min-height: 34px;
  padding: 0;
  margin: 0 0 0 37%;
}

/* extra top space as IE 6 messes up the line-height */
* html #search-form {
  padding-top: 2px;
}

#search-input {
  width: 12.5em;
  padding: 0;
  margin: 0 0.5em 0;
}

* html #search-button {
  position: relative;
  top: 2px;
}

#search-form img { vertical-align: middle; }

/*------------------------------
Header
------------------------------*/
#header dl { margin: 0; }


/*------------------------------
Branding
------------------------------*/
#branding-1 p { display: none; } /* hide slogan for browsers using this style sheet -- put this somewhere else! */

#branding-1 {
  height: 160px;
  padding-top: 20px;
  padding-left: 55px;
  background: url("../image/bg-swoosh-content.png") no-repeat left bottom;
}

#branding-1 h1 {
  background: url(../image/logo-sharjah.gif) no-repeat 0 0px;
  float: left;
  width: 257px; height: 105px;
  margin: 8px 0 0 0;
  padding: 0;
}

#branding-1 h1 a, #branding-2 h1 a, #branding-3 h1 a, #branding-4 h1 a, #branding-5 h1 a, #branding-6 h1 a, #branding-8 h1 a { display: none; }

/*------------------------------
Breadcrumbs
------------------------------*/
#breadcrumbs {
  font-size: 0.85em;
  line-height: 1.2;
  color: #666;
  max-width: none;
  padding: 0 0.4em 0.6em 0.4em;
  margin: 0;
}

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


/*------------------------------
Page info
------------------------------*/
#page-info {
  color: #999;
  font-size: 0.85em;
}

#page-info h2 { display: none; }

#page-info ul {
  list-style: none;
  padding: 0;
  border-top: 1px dotted #fff;
  margin: 0;
}

#page-info li {
  line-height: 2em;
  padding: 0 0 0 35px;
  border: 1px solid #ddd;
  margin: 0 0 0.2em 0;
}

#page-info a {
  color: #999;
  text-decoration: none;
  display: block;
  padding: 0;
}

#page-info a:hover {
  text-decoration: underline;
}

#page-info li.author {
  background: url(../image/icon-author.png) no-repeat 10px center;
}
#page-info li.e-update {
  background: url(../image/icon-mail.png) no-repeat 10px center;
}
#page-info li.discuss {
  background: url(../image/icon-discuss.png) no-repeat 10px center;
}
#page-info li.sendfriend {
  background: url(../image/icon-send-to-friend.png) no-repeat 10px center;
}
#page-info li.searchterm {
  background: url(../image/icon-searchwords.png) no-repeat 14px 50%;
}
#page-info li.send-photo {
  background: url(../image/icon-photo.png) no-repeat 8px center;
}

/*------------------------------
Footer
------------------------------*/
#footer p {
  line-height: 2em;
  margin: 0; padding: 0;
}

#footer p, #footer p a, #footer #page-rating { color: #888; }

#footer #copyright {
  padding: 100px 0 0;
  margin: 1px auto 0;
  text-align: center; /* for IE6 */
}

/*#footer #top-page {
  float: right;
}
#top-page a {
  background: url(../image/icon-top.png) no-repeat right center;
  float: right;
  min-height: 18px;
  padding-right: 25px;
  margin: 0 1em 0 0;
}
* html #top-page a { height: 18px; }
*/


#page-rating {
  font-style: italic;
  text-align: right;
  float: right;
  clear: both;
  padding: 0 0 60px 0; /* room for logo - would be on contend, but for Safari */
  margin: 1em 0 0;
 }
#page-rating span.question { }

/*------------------------------
Float clearing
------------------------------*/
/* Ensures that an element will expand to contain floating children */

/* Section menu */
#header:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE-mac \*/
/* Height for IE not needed - previously defined */
#header { display: block; }
/* End hide from IE-mac */

/* Section menu */
#section-menu ul:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE-mac \*/
/* Height for IE not needed - previously defined */
#section-menu ul { display: block; }
/* End hide from IE-mac */

/* Section menu */
#subsection-menu ul:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE-mac \*/
/* Height for IE not needed - previously defined */
#subsection-menu ul { display: block; }
/* End hide from IE-mac */

/* Footer */
#footer:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


/*------------------------------
Other
------------------------------*/
img {
  border: 0;
}

.skip { display: none; }

/* authoring buttons */
button.back {
  clear: both;
  float: left;
}
button.forward { float: right; }

* html button { background-image: none; }
button img {
  vertical-align: middle;
  margin: 0 1px;
}

button {
  background-image: url(../image/bg-button-off1.png);
  background-repeat: repeat-x;
  color: #333;
}

button, input { vertical-align: middle; }

#logo-gov { margin: 2em 0; }