/* font-weight:bold is the default for headings !!!! */
h1, h2, h3	{ font-family:"Trebuchet MS", sans-serif; font-weight:normal; }

/* h1 line-height should be the same as 'logo' height; margin-bottom should be the same */
h1		{ font-size:24px; margin:0 0 5px; line-height:30px; border-bottomx:1px inset #777777; }
h2		{ font-size:16px; margin:7px 0; }
h3		{ margin:7px 0; }

.placename	{ font-weight:bold; }
.username	{ font-weight:bold; }
.tripname	{ font-weight:bold; }
.phototitle	{ font-weight:bold; }

.rowhighlight, .rownohighlight
		{ vertical-align:top; }
.rowhighlight .placehighlight { font-weight:bold; text-transform:uppercase; }

.button, .treebutton
		{ width:16px; height:16px; border:none; }

.treebutton	{ float:left; }
.treelist	{ clear:left; }

.nowrap		{ white-space:nowrap; }

/* These bits are common between horizontal and vertical stripes */
.stopover, .subtrip, .junction, .stripej, .stopoverh, .subtriph, .junctionh,
.stripeh, .stripel, .striper, .stripefl, .stripefr 
		{ height:32px; }
.stripet, .stripeft, .stopoverh, .subtriph, .junctionh
		{ background-position:bottom center; }
.stripel, .striper, .stripefl, .stripefr, .stopoverh, .subtriph, .junctionh,
.stripet, .stripeb, .stripeft, .stripefb, .stripej, .stopover, .subtrip
		{ background-repeat:no-repeat; }
.stripeh, .stripel, .striper, .stripefl, .stripefr, .stripev 
		{ vertical-align: bottom; text-align: Center; }

/* Vertical stripes */
.stripet, .stripeb, .stripeft, .stripefb, .stripej, .stopover, .subtrip
		{ width:32px; }
.stripet, .stripeb, .stripeft, .stripefb
		{ height:16px; }
.stripev, .junction
		{ background-repeat:repeat-y; }
.stripeb, .stripefb, .stripev, .junction
		{ background-position: top center; }
.stripev	{ background-image: url(../Tripline/Stripe.gif); }
.stripet	{ background-image: url(../Tripline/StripeTop.gif); }
.stripeb	{ background-image: url(../Tripline/StripeBottom.gif); }
.stripeft	{ background-image: url(../Tripline/StripeFrayTop.gif); }
.stripefb	{ background-image: url(../Tripline/StripeFrayBottom.gif); }
.stopover	{ background-image: url(../Tripline/Stopover.gif); }
.subtrip	{ background-image: url(../Tripline/SubTrip.gif); }
.junction	{ background-image: url(../Tripline/Junction.gif); }
.stripej	{ background-image: url(../Tripline/StripeJunc.gif); }

/* Horizontal stripes */
.stripeh, .striper, .stripefr
		{ background-position: bottom left; }
.stripel, .stripefl
		{ background-position: bottom right; }
.stripel, .striper, .stripefl, .stripefr
		{ width:16px; }
.stripeh	{ background-image: url(../Tripline/StripeHoriz.gif); 
		  background-repeat: repeat-x; }
.stripel	{ background-image: url(../Tripline/StripeLeft.gif); }
.striper	{ background-image: url(../Tripline/StripeRight.gif); }
.stripefl	{ background-image: url(../Tripline/StripeFrayLeft.gif); }
.stripefr	{ background-image: url(../Tripline/StripeFrayRight.gif); }
.stopoverh	{ background-image: url(../Tripline/StopoverHoriz.gif); }
.subtriph	{ background-image: url(../Tripline/SubTripHoriz.gif); }
.junctionh	{ background-image: url(../Tripline/JunctionHoriz.gif); }


.transport	{ width:32px; height:32px; }

.here, .stopv, .stoph 
		{ font-family: "Comic Sans MS", sans-serif; font-size:16px; }
.here, .stoph 
		{ text-align:Center; }
.stopv		{ text-align:left; }

.googleleft	{ width:125px; vertical-align:top; }
.googlemap	{ width:500px; height:300px; }
.biggooglemap	{ width:512px; height:600px; }
.awaiting	{ font-size:smaller; }
.whatsthis	{ font-size:smaller; }

.journal, .journalpanel
		{ font-family:"Trebuchet MS", sans-serif; font-size:11px; padding:4px;
		  vertical-align:top; }
.journal	{ width:478px; }
.vitals		{ font-family:Arial, sans-serif; font-size:11px; 
		  padding:4px; width:125px; vertical-align:top; }
.comment	{ width:100%; margin-bottom:5px; }
.comment .poster{ float:left; width:20%; padding:2px; margin-right:2px; }
.journalpanel   { float:right; width:20%; }
.est		{ width:16px; height:16px; }     

.takeaway	{ font-size:smaller; }

/* logo height should be the same as h1 line-height; margin-bottom should be the same */
.logo		{ background-image:url(../res/MyWorld.gif); float:right;
		  height:30px; width:70px; 
		  margin-bottom:5px; }

.map		{ border:none; }

.photo		{ border:none; }
.photocaption	{ overflow:hidden; }
.photomargin	{ margin:4px; }

/* The clear should ensure that pictures don't 
   'stack up' across the page
   (It works as 'expected' in Safari and Mozilla; 
   IE is a little different, but still OK...) */
.leftphoto	{ float:left; clear:left; text-align:left; }
.rightphoto	{ float:right; clear:right; text-align:right; }

/* Used by InsertPhoto */
.insertphoto	{ positionx:absolute; }
.bkgr, .moveframe
		{ position:absolute; }
.preview	{ visibility:visible; }
.prevhidden	{ visibility:hidden; }
.previewp	{ visibility:visible; display:table; }
.prevphidden	{ visibility:hidden; display:none; }
.xbtn, .ybtn, .zbtn     
		{ position:absolute; background-image: url(../res/Button.gif); }
.xbtn		{ width:4px; height:100%; }
.ybtn		{ width:100%; height:4px; }
.zbtn		{ height:16px; width:16px; right:-16px; }

.info		{ padding:4px; margin-bottom:1em; }

.mapphotoarea	{ margin-bottom:1em; }

.emptyjournal	{ margin:20px 20px 20px 10px; padding:20px; 
		  font-family: Arial, sans-serif; font-weight: bold; float:left; }

.panelvisible	{ visibility:visible; display:table; }
.panelhidden	{ visibility:hidden; display:none; }

/* Line up tiny maps with their names */
/* Note: combined width of tinymap and tinymapname should equal width of regionarea li */
.tinymap	{ width:50px; float:left; text-align:right; 
		  padding-right:2px; border:none; 
		  line-height:0; margin-bottom:2px; }
.tinymapname	{ width:98px; float:left; margin-bottom:2px; }

/* Line up labels nicely with form controls */
/* NOTE: padding-top only introduced to clean up mismatch in text baselines */
/* between label and text input */
label		{ float:left; text-align:right; width:75px;
		  padding-right:4px; padding-top:6px; }
		  
/* Bizarrely, this ensures that checkbox labels are to the right of the checkbox */
/* It effectively negates the above */
label.checkbox	{ float:none; }

/* Contextual selector: only applies to br in form paragraph */
form p br	{ clear:left; }
form div br	{ clear:left; }
fieldset br	{ clear:left; }

fieldset	{ padding:0; margin:0; }
legend		{ font-family:'Trebuchet MS', sans-serif; font-size:larger; }

.tripsarea	{ margin-bottom:1em; }

.centredmaparea { float:left; padding:20px; }
.maparea	{ float:left; padding-left:10px; }

/* This works for the moment, because the world map is 200px wide */
/* Things will go wrong if that is increased */
.middlecolumnarea { float:left; width:200px; margin:10px 0 0 10px; }

/* Note: for root page, the width of the top row is made up of: */
/* favphoto + middlecolumnarea + regionarea + userarea = 728px */
/* favphoto is variable, but generally less than 250px (ie 90% of the time) */
/* middlecolumnarea is 200+10 = 210px */
/* So that leaves 268px for regionarea and userarea */
/* regionarea requires more space than userarea */
/* Note: This currently allocates 10+150 = 160px to regionarea */
/* and 10+110 = 120px to userarea */
/* (total 280px) */
/* So this will overflow at some point */

.regionarea	{ float:left; margin-left:10px; width:150px; }
.regionarea h2	{ text-align:center; }
.regionarea ul	{ list-style-type:none; margin:0; padding:0; }
.regionarea li	{ margin:0; }
.userarea	{ float:left; margin-left:10px; width:110px; }
.userarea h2	{ text-align:center; }
.userarea ul	{ list-style-type:none; margin:0; padding:0; }
.userarea li	{ margin:0; }
.triparea	{ float:left; margin-left:10px; width:150px; }
.triparea h2	{ text-align:center; }
.triparea ul	{ list-style-type:none; margin:0; padding:0; }
.triparea li	{ margin:0; }
.yeararea	{ float:left; margin-left:10px; width:110px; }
.yeararea h2	{ text-align:center; }
.yeararea ul	{ list-style-type:none; margin:0; padding:0; }
.yeararea li	{ margin:0; }

.usericon, .usericonmissing { width:27px; float:left; padding-right:2px; } 
.usericon	{ height:22px; border: none; }
.usericonmissing { height:15px; }

.enddiv		{ clear:both; height:0; }

.footer		{ margin-bottom:1em; padding:4px; }
.footermap	{ float:left; padding:1px; width:100px; }

.firstphoto	{ clear:left; }
.favphoto	{ float:left; }
.photoad	{ width:200px; }
.photoad .body	{ font-family: Arial, sans-serif; text-align:center; }
.photoad .top	{ font-size:27px; white-space:nowrap; }
.photoad .bottom { font-size:64px; }

.favphotoentry	{ margin-bottom:1em; }

/* All colour related stuff */
.journalsample	{ border:1px solid #99ccff; background-color:#e7f4e6; }
.journalbox	{ border:1px solid #99ccff; background-color:#ffffcc; }
.journaledittable td 
		{ border:1px solid #99ccff; } 
.radiobuttondiv .head 
		{ border-bottom:1px solid #99ccff; }
.radiobuttondiv .foot 
		{ border-top:1px solid #99ccff; }

.photovotearea, .gazdetailsarea, .chapterlist, .subtriparea, .stoptypetable,
.datetable, .filmpreviewarea, .manuscriptarea, .stopoverarea, .radiobuttondiv,
.tripsarea, .footer
		{ border:1px solid #99ccff; background-color:#cfe8ff; }
.triplinearea	{ border:none; background-color:#cfe8ff; }
.journaleditdiv	{ border:1px solid #99ccff; background-color:#ffff99; }		  

.photo		{ background-color:#99ccff; }
.photocaption, .favphoto
		{ border:1px solid #99ccff; }

.info		{ border:1px solid #000000; background-color:#99ccff; }

.registernow	{ border:3px double #ff0000; background-color:#ffffff; }
.registernow .foot 
		{ color:#336666; }

body		{ color:#000000; background-color:#e0f0f9; }

.rowhighlight   { color:#000000; background-color:#ccffff; }

.here		{ color:#ff0000; }
.logoninvalid	{ color:#ff0000; }

.journal, .journalpanel, .map, .photoad .body
		{ background-color:#ffffcc; }

.vitals, .comment .poster
		{ border:3px double #000000; background-color:#ff9999; }

.comment	{ border:1px solid #000000; background-color:#ccffff; }

fieldset, legend
		{ border:1px solid #99cccc; }

.est		{ border:1px solid #000000; }     
.emptyjournal	{ border:1px solid #000000; }

.bkgr		{ border:25px solid #009900; }
.noimage	{ border:1px solid #ff0000; }
.prevhidden	{ border:1px solid #ff0000; }



.journalsamplebar { }
.journalsample	{ float:left; width:165px; padding:5px; margin:2px; }
.journalbox	{ overflow:hidden;
		  font-family: "Trebuchet MS", sans-serif; 
		  font-size:11px;
		  padding:2px; 
		}

/* A test on pull quotes. See book p22 */
.journalboxnew	{ overflow:hidden;
		  background-color:#ffffcc; 
		  font-family: "Trebuchet MS", sans-serif; 
		  font-size:11px;
		  padding:5px 15px; 
		  margin:5px 0;
		  border-left:5px solid gray;
		  border-right:5px solid gray;
		}

.registernow	{ width:90%; margin-top:15px; padding:2%; font-size:larger; }
.registernow .head { font-size:larger; }
.registernow .foot { font-size:smaller; }

.gazdetailsarea	{ margin-bottom:1em; width:100%; }
.estarea	{ float:left; width:50%; }
.journalarea	{ float:right; width:50%; }

/* Note: combined width of label and chapterlist must equal the fieldset width */
.chapterlist	{ float:left; width:643px; }

/* TABLE classes */
.subtriparea	{ width:100%; }
.journaledittable{ width:100%; border-collapse:collapse; }
.journaledittable td { border-collapse:collapse; vertical-align:top; }
.stoptypetable, .datetable, .filmpreviewarea, .stopoverarea, .subtriparea, .triplinearea
		{ border-collapse:collapse; margin-bottom:1em; }
.manuscriptarea { border-collapse:collapse; }
.datetable th	{ font-weight:bold; }


/* TABLE replacements */
.radiobuttondiv	{ margin-bottom:1em; width:645px; float:left; }
fieldset .radiobuttondiv { width: 643px; }
.addestcell	{ float:left; width:129px; white-space:nowrap; overflow:hidden; }
.estreviewcell	{ float:left; width:214px; white-space:nowrap; overflow:hidden; }
.transportcell  { float:left; width:80px; white-space:nowrap; overflow:hidden; }


/* Note: the width:728px gives a fixed width to page */
/* This makes pages look tidier with Google ads (which are 728px wide) */
body		{ font-family:tahoma,sans-serif; font-size:11px;
		  margin:2px; padding:0; width:728px; }