/* Interclue cross site style sheet.

 This is used on the main static website and the blog.

*/


/* ---------------------------------------------------- */
/* General style settings for standard elements. 

   Most of these are intended to be explicitly normalising settings
   across all the common browsers. 

   Derived, in part, from YUI:

   http://developer.yahoo.com/yui/
*/

body 
{
  background: #bed3d7 url("fade-grey.jpg") repeat-x;
  margin: 10px;
  padding: 0px;
  text-align: center;
  font-weight: normal; 
  font:13px verdana,arial,helvetica,clean,sans-serif;
}

body * 
{
  line-height:1.22em;
}

fieldset,img 
{  
    border: 0; 
} 

address,caption,cite,code,dfn,var 
{ 
  font-style:normal;
  font-weight:normal; 
} 



caption,th 
{ 
  text-align:left; 
} 

q:before,q:after { 
  content:''; 
} 

abbr,acronym 
{ 
  border:0; 
} 

table 
{
  vertical-align: top;
}

tr { 
  padding-top: 0.2em;
}

td,th 
{ 
  vertical-align: top;
}

select, input, textarea 
{
  font:99% verdana,arial,helvetica,clean,sans-serif;
}

pre, code 
{
  font:115% monospace;
}


h1, h2, h3, h4, h5, h6
{
  color: #003399;
  font-weight: bold;
}

h1 {font-size: 182%;} /* 24px */
h2 {font-size: 159%;} /* 21px */    
h3 {font-size: 136%;} /* 18px */
h4 {font-size: 122%; clear: left; margin-bottom:3px;} /* 16px */
h5 {font-size: 107%;} /* 14px */
h6 {font-size: 100%;} /* 13px */


/* I'd like strong items to not be too bold, if possible */
em,strong,th { 
  font-weight: bolder;
}

blockquote 
{
   font-style: italic;
   margin:0; 
   padding:0; 
}

/* The link and input styles came from a wordpress theme we where using
   as an example to build our theme against. They're not bad, but perhap 
   red isn't the right colour.
*/

a:link, a:visited {
	color: #1111DD;
	text-decoration: none;
}

a:hover, a:active {
	color: #1111FF;
	text-decoration: none;
}

input 
{
	border: 1px solid #CCC;
	font-size: 11px;
}

input:hover {
	border:1px solid #262626;
	
}
input:focus {
	border:1px solid #262626;
	color:#333;
}
	
/* ---------------------------------------------------- */
/* ------------------------------- */

/* General layout classes and ids */


#Container 
{
  width: 750px;
  -moz-border-radius: 15px 15px 15px 15px; 
  margin: 0 auto;
  background-color: #FFFFFF;
  border: solid #485365 1px;
  text-align: left;
}


.Header 
{
  background: #d9d9d9 url("fade-silver-grey.jpg") repeat-x;
  padding: 11px;
  height: 74px;
}

.Header .Slogans {font-size: 16px;   color: #003399; font-weight: bold; padding:0px; margin-top: 0px; margin-bottom:3px;}

.Navigation 
{
  background: #bac1c9 url("fade-silver-grey-small.jpg") repeat-x;
  border-bottom:solid #485365 1px;
  border-top:solid #485365 1px;
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align:middle;
  text-align:center;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 140%;
}

.Navigation A {
	white-space: nowrap;
	padding: 0 10px;	
}
.Navigation a:link, .Navigation a:visited  
{
  text-decoration: none;
  color: #003399;

}

#id_download_link:link, #id_download_link_2:link, 
#id_download_link:visited, #id_download_link_2:visited 
{ 
  text-decoration: none;
  font-weight: bold;
  color: #000000;  
}

.Navigation a:hover, .Navigation a:active  
{
  text-decoration: none;
  color: #6699ff;
}

#id_download_link:hover, #id_download_link_2:hover, 
#id_download_link:active, #id_download_link_2:active 
{ 
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;  
}



.HomeTopSection 
{
  background: #0056b9 url("fade-blue.jpg") repeat-x;
  border-bottom:solid #485365 1px;
}

.HomeTopSection a:link, .HomeTopSection a:visited  
{
  text-decoration: underline;
  color: #ffffff;

}

.HomeTopSection a:hover, .HomeTopSection a:active  
{
  text-decoration: underline;
  color: #ffffff;
  font-weight: bold;
}


.Content 
{
  background-color: #FFFFFF;
  padding: 20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
}

.floatLeft 
{
  float: left;
}

.floatRight 
{
  float: right;
}

.installButtons 
{
  padding-right: 10px;
  float: right;
}

.containerBox 
{
  min-height: 200px;
}

/* The grey boxes don't really suit our needs for the blog. We want something 
   which is more slim, and can be arbitarily tall. They're probably good as,
   they stand, for the tour contents links. 

*/

.greyboxContainer 
{
  width: 223px;
  background: url("greybox.png") no-repeat bottom; 
  float: left;
  margin-left: 20px;
} 

.greyboxTop 
{
  background: url("greyboxtop.png") no-repeat;
}

.greyboxContent 
{
  padding-left: 40px;
  padding-right: 20px;
  padding-top: 25px;
  padding-bottom: 20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  text-align:left;
  min-height:155px;
}

.greyboxContent ul
{
  margin-top: 2px;
}

.greyboxContent img 
{
  margin-left: -40px;
  margin-top: -25px;
  float: left;
}

.driveValue 
{
  background:url("drive_more_value.gif") no-repeat;
  text-align:center;
  float:right;
clear:right;
  width: 223px;
  height: 88px;
  padding-top: 120px;
}

.blueSectionBox 
{
  background: url("bluesectionbox.jpg") no-repeat;
  width: 212px;
  height: 248px;
  margin-top: 5px;
  margin-left: 10px;
  padding-left: 15px;
  padding-bottom: 10px;
  padding-top:10px;
  padding-right:10px;
  float:left;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: #ffffff;
}

.sideContainer 
{
  width: 223px;
  background: url("longgrey.png") no-repeat bottom; 
  float: right;
  margin-left: 20px;
  margin-bottom:20px;
  clear:right;
} 

.sideTop 
{

}

.sideContent 
{
  background: url("greyboxtop.png") no-repeat;
  padding: 20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  text-align:left;
}

.sideContent h4
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 110%;
  margin-top: 2px;
}

.sideContent ul, .sideContent ul li ul
{ 
  padding-left: 0;
  list-style: none inside;
}


/* ---------------------------------------------------- */
/* Some generally useful class styles */


.alert
{
    width:95%;
    text-align:center;
    background: #fee;
    border: 2px solid #f00;
    -moz-border-radius: 8px;
    padding:10px;
    margin-left: auto;
    margin-right: auto;
}



/* Used in tables for every even row. */
.even 
{ 
  background: #eeeeee;
}

/* Used to mark things in prepublished pages that need fixing. */
.fixme { background-color: #f96262;}


/* ---------------------------------------------------- */
/* Tour style classes */


/* The links along the bottom of each tour page. Positioning isn't *quite* 
   right in IE6, but it's close enough. */

.tour_links 
{
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  clear: both;
}

.tour_link_next 
{
  text-align: right;
  position: absolute;
  top: 0;
  right: 1ex;
}

.tour_link_prev 
{
  text-align: left;
  padding-left: 1ex;
}


/* I wanted the screenshots to behave like comic book panels, but with
   captions below them. I couldn't really get it working, though. 
*/
.panel 
{
  text-align: center;      
}

.panel img 
{
  border: 1px black solid;
}

.panel p 
{  
  font-size: 90%;
}

.screenshot 
{
  text-align: center;
}

.strip tr td 
{ 
  border: 1px black solid;
  padding: 0;
}

.clueviewer_list
{
  width: 80%;  
}


/* Used in the Clue View anatomy to map points in text to numbers on
   the screenshot. The colour ought to be darker to make up for the small size.
*/ 
.anatomy_point 
{ 
  font-weight: bold;
  color: #f21212; 
}

/* ---------------------------------------------------- */
/* Other main site styles */


/* Used by the table of Linkclue cursors in ref-linkclue.html */
.cursors 
{ 
  width: 90px;
  text-align: right;
}
.cursors img
{ 
  vertical-align: bottom; 
}

/* We always set the numbers ourselves in our terms and conditions 
   order lists 
*/
.terms 
{ 
  list-style: none;  
  margin-bottom: 0.3ex;
}


/* Styles used for our google groups sign up block. */
.notify_set 
{
  list-style: none;
  width: 70%;
}

.notify_set .google_groups 
{
  text-align: right;
}

.notify_set .google_groups form 
{
  display: inline;
}

/* Start-of-paragraph icons used on the contact page */

.contact_icon
{ 
  border: 1px black solid;
  background: white;
  margin: 1px 0.5ex; 
  padding: 0;
}

/* Used for feed icons that appear in paragraphs. */
.feed_icon 
{ 
  vertical-align: bottom;
}

/*Used for user comments*/
.feedback
{
    padding-left:10px;
    margin-top:5px;
}

.feedback-entry
{
     margin-top: 20px;
     text-indent:-1em;
}

/*.feedback-entry:first-line
{
    margin-left: -10px;

}*/



/* ---------------------------------------------------- */
/* Wordpress blog styles */

/* OpenID login input fields */

#openid_url, .openid_url_comment_form 
{  
  background: url("openid.gif") no-repeat;
  background-position: 0 50%; 
  padding-left: 18px;
}


/* Postings. */

.post {
  margin:0 0 25px 0;
}

/* Posting titles. The bottom border line looks good. */
.post h1 {
  font-size: 120%;
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-bottom: 2px solid #1235A5;
}

/* A box at the bottom of the posting that contains posting specific 
   links to edit or leave comments. */
.post .info {
  padding:3px 3px 3px 8px;
  border:1px solid #e3e4e4;
  background-color:#efefef;
  font-size:0.9em;
  color:#505050;
}

/* The block of tags. Needs no special treatment, really. */
.tags { 

}

/* The big that says "Tag:" */
.tags .tag_title 
{ 
  font-weight: bold;
}

/* Comments Styling */

#commentlist li 
{
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid #700000;
}

/* The form for writing a comment. 

 Right now, the text area is too wide for the side bar, but we don't
 really want to compromise on text size or 80 columns. We might just opt 
 for dropping the sidebar in the comment section.

*/

#commentform 
{
  margin: 1em 0; 
  background: #ffffff; 
  width: 40em; 
}

#commentform textarea 
{
  background: #f8f7f6; 
  border: 1px solid #d6d3d3; 
  width: 40em; 
} 

#commentform textarea:hover 
{
  background: #FFFFFF; 
  border: 1px solid #d6d3d3; 
}

#commentform textarea:focus 
{
  background: #ffffff; 
  border: 1px solid #939793;
}

#commentform #email, #commentform #author, #commentform #url 
{
  font-size: 1.1em; 
  background: #f8f7f6; 
  border: 1px solid #d6d3d3; 
  width: 180px; 
}
 
#commentform #email:hover, #commentform #author:hover, 
#commentform #url:hover 
{
  font-size: 1.1em; 
  background: #ffffff; 
  border: 1px solid #d6d3d3;
  width: 180px; 
}

#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
  font-size: 1.1em; 
  background: #ffffff; 
  border: 1px solid #939793; 
  width: 180px; 
}

#commentform input
{
  margin-bottom: 3px; 
}


/* Nigel's additions from here */
.numTableList 
{
  text-align: center;
}

.numTableList td 
{
  background: #e9eef3;
  padding: 4px;
  text-align: center;
  border: 1px #99ccff solid;
}

.numTableList th 
{
  background: #dbe6f1;
  padding:4px;
  text-align: left;
  border: 1px #99ccff solid;
}

.screenshotborder {
  border: 1px black solid;
}

.numTableList .caption 
{
  padding-bottom:4px;
}

.clearLeft 
{
  clear: right;
}
.clear {
	clear: both;	
}

.threeColumnsGrey td 
{
  width: 223px;
  vertical-align:top;
  text-align:left;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

/*
.threeColumnsGrey a:link, .threeColumnsGrey a:active, .threeColumnsGrey a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

.threeColumnsGrey a:hover {
	color: #EAEAEA;
	text-decoration: none;
}
*/

.threeColumnsGrey th 
{
  vertical-align:top;
  text-align:left;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  font-size: 129%;
}

.columnThree 
{
  background: url("longgrey.png") no-repeat top center;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 25px;
  margin-bottom: 20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  text-align:left;
}

.threeColumnsGrey img 
{
  border: solid 1px #000000;
  margin-top: 3px;
}

.containerBox h2 
{
  font-size: 159%;
  margin-left: 20px;
}

.threeColumnsGrey .columnTitle 
{
  font-size: 122%;
  font-weight: bold;
}

.Quotes 
{
  float: right;
  width:200px;
  margin:10px;
  padding:10px;
  font-size: 129%;
  font-style: italic;
  font-weight: bolder;
  color: #CC0033;
  text-align: left;
}

.Quotes .name 
{
  font-size: 92%;
  font-style:normal;
  text-align: right;
  font-weight: normal;
}

.copyright 
{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size: 70%;
  clear: both;
  vertical-align:bottom;
  text-align:center;
  padding-top:5px;
  padding-bottom: 5px;
}

.floatLeftImageCaption 
{
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 8px;
  text-align: center;
  font-style: italic;
  font-size: 12px;
  border: 1px solid #CCCCCC;
  background-color: #ececec;
}
#mainBlurb {
	color: #ffffff;	
}

#mainBlurb h3 {
	color: #ffffff;
	font-weight: normal;
}

#mainBlurb h4 {
	margin-top: 0px;	
}

/* == sociable: social bookmarking links == */

div .sociable { margin: 16px 0}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
/*
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}

.sociable span {
	display: block;
}
*/

.sociable ul {
	display: inline;
	margin: 0;
	padding: 0;
}
.sociable li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

.sociable-hovers {
	opacity: .4;
	filter: alpha(opacity=40);
    vertical-align: bottom;
}
.sociable-hovers:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}



/* specific page styles */
.interclue-install-firefox {
	display: block;
	width: 327px;
	height: 120px;
	margin: 0 0 0 40px;
	background: url("interclue-install-firefox.png") no-repeat;
	background-position: 0 0;
}
.interclue-install-firefox:hover {
	background-position: 0 -120px;
}

#comparison-table TH, #comparison-table TD {
	margin: 0px;
	padding: 2px;
	text-align: center;
	white-space: nowrap;	
}

#comparison-table H3{
	text-align: left;
}

#comparison-table TD.question {
	text-align: left;
	white-space: normal;	
}

#comparison-table .heading {
	text-align: left;
	padding-top: 25px;
	font-weight: bold;
	border-bottom: 1px solid #008;
}

SPAN.dash {
	display: block;
	text-align: center;
	width: 60px;
	height: 16px;
}
SPAN.tick {
	display: block;
	text-indent: -2000px;
	width: 60px;
	height: 16px;
	background: url("tick.png") no-repeat center center;
}
SPAN.cross {
	display: block;
	text-indent: -2000px;
	width: 60px;
	height: 16px;
	background: url("cross.png") no-repeat center center;
}
SPAN.question {
	display: block;
	text-indent: -2000px;
	width: 60px;
	height: 16px;
	background: url("question.png") no-repeat center center;
}

/* faq.html */
#faq-block .faq-question {
	font-size: 13px;
	padding: 0 0 0 0;
	margin: 0 0 0 15px;
	cursor: pointer;
}

#faq-block .faq-answer {
	margin: 10px 10px 10px 30px;
}

A.button-large, A.button-large:link, A.button-large:active, A.button-large.visited {
	display: block;
	float: left;
	margin: 20px;
	width: 200px;
	height: 140px;
	text-align: center;
	line-height: 70px;
	white-space: nowrap;
	color: #ffffff;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	background: url("button-green-large.png") no-repeat;
	background-position: 0px 0px;	
}

A.button-large:hover {
	background-position: -200px 0px;
}
.button-container {
	padding-left: 115px;
}
.block {
	overflow: auto;
	clear:both;	
}

/* rotating quotes*/
#interclue-quotes {
	height: 5em; 
}

#interclue-quotes Q{
	font-style: italic;	
	font-size: 110%; 
	font-weight: bold; 
}
#interclue-quotes A{
	text-decoration: none;
}
#interclue-quotes A:hover SPAN{
	font-weight: normal;	
}

#navigation-bottom {
	margin-top: 20px;	
}

.left-image
{
    float: left;
    margin-right: 1.5em;
    /*padding-right: 1.5em;*/
    margin-bottom:10px;
}

#changelog {
	font-size: 12px;
	overflow: auto;	
}


#newer-version-available {
	border: 2px solid #f00;
	background-color: #fee;
	color: #f00;
	padding: 5px 20px;
	font-size: 100%;	
	margin: 0 0 20px 0;
}

#newer-version-available h2 {
	background: url('warning-32.png') no-repeat center left;
	padding: 10px 0 0 45px;
	margin: 0 0 0 0;
	min-height: 32px;
}
.warning {
	border: 2px solid #f00;
	-moz-border-radius: 8px;
	background: #fee url('warning-32.png') no-repeat 5px center ;
	color: #f00;
	padding: 5px 20px 5px 45px;
	font-size: 100%;	
	margin: 0 0 20px 0;
	min-height: 32px;
}

#hoverclues-types-table td {
	vertical-align: middle;
	padding: 10px;
}
#hoverclues-types-table h4 {
	padding-top: 0px;
	margin-top: 0px;
}

a.button-medium {
	display: block;
	width: 175px;
	background: url("button-green-small.png") no-repeat;
	height: 48px;
	text-align: center;
	text-decoration: none;
	padding-top: 12px;
	color: #000;
	font-size: 15px;
	font-weight: bold;
}
a.button-medium:hover {
	background-position: 0px -80px;
	color: #008;
}

#install-beta-button span {
  padding: 12px 0px 12px 30px;
  background: url('addon-blue-small.png') no-repeat left center;
}