/*
reset.css and fonts.css from the YUI Library: http://developer.yahoo.com/yui/
refer to http://developer.yahoo.com/yui/fonts/ for font sizing
*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}


/**************
 Run Easy Colors
 red: #CF1111
 gray: #DCD9D9
 blue: #547AAC
 darker blue: #3C577B
 **************/
 
/*********************************************************************
 If you want this size in pixels (px)  	Declare this percent (%)
									10 	77
									11 	85
									12 	92
									13 	100
									14 	107
									15 	114
									16 	122
									17 	129
									18 	136
***********************************************************************/



/* custom styles */

body, select, input, textarea, button { font-family: "trebuchet ms", "lucida sans unicode","lucida sans", Arial,Sans-Serif }

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

h5 {font-size:85%; margin: 8px 0 4px;}
h4 {font-size:92%; margin: 10px 0 5px; color: #547AAC; text-transform: uppercase;} 
h3 {font-size:107%; margin: 13px 0 6px;  color: #CF1111;} 
h2 {font-size:122%; margin: 15px 0 7px;color: #CF1111; }
h1 {font-size:136%; margin: 0 0 10px;} 

strong { font-weight: bold; }

p { margin: 5px 0 9px; }
p { font-size: 85%; color: #000000; } /* p#runDescription inherits */

/*	img, div { behavior: url('../Javascripts/iepngfix.htc') }  png fix! */

a:link, a:active { color: #607890; }
a:visited  { color: #607890; }
a:hover { color: #21384F; } /*b3bcc6 */


ul{ margin-left: 13px; }
ol { list-style-type: decimal; margin-left: 30px; }
li { }  /* list-style-type: square; margin-bottom: 4px; */
th { font-weight: bold; } 



div.submit { text-align: center; margin-top: 10px;}
div.submit input { font-weight: bold; color:#607890; width: auto!important;} 
div.submit input.cancel { background: #cccccc; color: #333333; }


.flagdiv {  width: 16px; height: 16px; }
.flag { font-size: 77%; color: #999999; }

/* layout */
html { height: 100% }
body.island { text-align: center; }
div#doc { margin: 0 auto; text-align: left; width: 990px;}  /* 990px width inside the islands? */
#logo { height : 129px;  font-size: 136%; }
h2.first , h3.first, h4.first { margin-top: 0; }
.byline { font-size: 85%; color: #999999; }
p.introcopy { color: #cf1111;  width: 457px; height: 43px; padding: 12px 37px 19px 24px;  background: url("../Images/introcopy.png"); margin-bottom: 0;}


.toptag{
	margin-top: 25px;
	height:100px;
	width:190px;
	
}

.mapContainer {  width: 700px; float: right;  }
#map { width: 100%; height: 390px; } /* width: 630px; */
.sideContainer { float: left; width: 285px; }

.ontopofmap { background:white; border:2px solid #547AAC; font-size:85%; padding:2px; position:absolute; text-align:center; }
#mapspinner { left: 50%; top:7px; width:146px;  margin-left: -73px; } /* centered in the map. 50% minus half the width as margin */
#BLcornerDiv { bottom: 40px; left: 1px; width:130px; *bottom: 40px; }
#BRcornerDiv { bottom: 15px; right: 3px; text-align: right; width:100px;  *bottom: 15px; }

#addNoteDiv, #addPictureDiv  { height:20px; padding-left:27px; }
#addNoteDiv { background:transparent url(../Images/icon/comment.png) no-repeat scroll 0 0; }
#addPictureDiv { background:transparent url(../Images/icon/photo.png) no-repeat scroll 0 0;}

/* homeframe */
#homefoot { text-align: center; position: absolute; bottom: 0; width: 100%; font-size: 85%; }
#homefoot .inner { width: 410px; background: #eee;  margin: 0 auto;}
#homefoot .inner a {  color: #555555; text-decoration: none; }
#homefoot .inner a:hover { text-decoration: underline; }

.homeimglinks { position: absolute; }
a.homeimglinks { display: block; text-indent: -100em; overflow: hidden; }
div.homeimglinks { text-align:center;}

/* create run */
#createRunPage .mapContainer { width: 660px; }
#createRunPage .mapContainer #map { width: 100%; }
#createRunPage .panel_body { height:320px; padding-top: 4px; }
#createRunPage .sideContainer { width: 325px; height: 475px; }
#createRunPage #accordion { min-height:400px;  height:auto !important;  height:400px; }
#createRunPage #accordion input.name, #createRunPage #accordion textarea { width: 240px; }
#createRunPage #textinstructions { margin-bottom: 10px; }
#createRunPage #textinstructions li { margin-top: 5px; }
#createRunPage .tagchoice { width: 130px;  float: left;} 

#panel2-body p#playlistp, #panel2-body p#commentp, #panel2-body p#picturep {
    height:25px;
    padding:10px 0pt 0pt 31px;
}



#panel2-body p#playlistp { background:transparent url(../Images/icon/playlist.png) no-repeat scroll 0%;}
#panel2-body p#commentp {background:transparent url(../Images/icon/comment.png) no-repeat scroll 0%; }
#panel2-body p#picturep {background:transparent url(../Images/icon/photo.png) no-repeat scroll 0%; }



/* browse runs */
#browselocationerror { padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #999999; }
#browseRunsPage p.introcopy { margin-left: 289px; }
#browseRunsPage h2 { font-size: 114%; }


div.run  { margin: 0 0 10px 0;}
div.run span.runColor { width: 16px; display: block; float: left; margin-right: 5px; }
div.run h3 { margin: 3px 0 0; }
div.run div.runInfo { margin-left: 21px; }
div#routesToBrowse { position: relative; min-height:500px;  height:auto !important;  height:500px; } /* stretchy height because of dynamic ajax calls */
div#routesToBrowse label { display:block; }


.runspagination { height: 40px; color: #999999; } /* position: absolute; bottom: 0; */
a.prevruns , a.nextruns { height: 20px; display: block; width: 95px; }
a.prevruns { float: left; padding-left: 20px; background: url('../Images/prevarrow.gif') no-repeat 0 2px;}
a.nextruns {  float: right; padding-right: 20px;  background: url('../Images/nextarrow.gif') no-repeat 100% 2px; text-align: right; }
.runspagination a:link { text-decoration: underline; }
.runspagination a:hover { text-decoration: none; }
.runspagination a.prevruns:hover { background-position: 0 -43px;}
.runspagination a.nextruns:hover { background-position: 100% -43px;}
.runspagination .inactive { cursor: default;  }
.runspagination a.nextruns.inactive:hover { background-position: 100% 2px !important; }
#routesToBrowse div.totalruns { font-size: 85%; text-align: center;}

#moremapstuff { font-size: 92%; color:#999999; }


/* view run */
#viewRunPage .sideContainer {   }
#viewRunPage h2#runName { text-transform: uppercase; letter-spacing: -1px; }

div.runCreator { color: #999999; }
#runInfo h4 {  }
span#runPlaylist { font-size: 92%; font-weight: bold; }

div#IsMyRunStatus { font-size: 92%; padding-left: 10px; }
.comment { margin: 0 0 7px 0; }
.comment .byline { height: 20px; }
#viewRunPage .flagdiv { float: right;}

#runExtras {  margin-left: 270px; }
#runExtras div.xtras { float: left; width: 229px; margin-right: 5px;  }


/* hear */
.browseLink { float: left; width: 250px;}
.listeningTo { float: left; width: 600px; }
.top10 { width: 850px; }
.top10s { height: 250px; width: 250px; float:left; }

/* playlist directory */


.playlistHeader {float: left;  height: 150px; width: 600px; margin-bottom: 16px; height: 182px;  }
.addOwnPlaylist { float: left; width: 250px;}
.browseHeader { height: 131px; width: 600px; }
#Playlist { width: 486px; height: 340px; padding: 19px 10px 10px; }

.newplaylistform { width: 600px;  }
.newplaylistform input, .newplaylistform textarea {  width: 200px; }
.newplaylistform .i3 div { margin-top: 8px; }
.newplaylistform div label { float: left; display: block;  width: 100px; font-weight: bold;}

#playlistiframe { background-color:#5479AD; position:absolute: top:0; left:0; height:2273px !important; border:none; }
.linkAddToPlaylist { font-size: 114%; color: #cf11111; }

/* TODO FIX THESE STYLES! */    
.iMixBox { margin-right: 6px; margin-top: 8px; width: 485px; height: 340px; float: left;} 
.iMixBox div.itunesswf { float: left;  }
.iMixBox div.playlistBox { float:right; margin: 0px;  width: 180px;}


#Playlist .iMixBox { width: 510px; }

#Playlist  { width:520px; }



/* say */



.browseAll { float: left; width: 250px; }
.sayAccordion { float: left; width: 600px; }
#say_accordion {    border: 1px solid #1F669B;  height: 284px; }
#say_accordion  .panel_body { height:152px; }
#sayPage #map { width: 100%; }

.sayWorld { width: 850px; }
a.readmore { display: block; text-align: right; font-size: 85%;}

/* browse groups */

#ctl00_content_hlCreateNewGroup { float: right; padding-left: 20px; background: url(../Images/plus.gif) 0 0 no-repeat;}
.goBtn {}
.searchnTag { width: 790px; }
div#alphacloud { margin-left: 25px; font-weight: bold; }
.popGroups { width: 100%; }
.popGroups table { width: 100%; padding-bottom: 15px;}
.popGroups table td { padding: 1px 0; }
td.groupName { font-weight: bold; }

.popGroups table, .popGroups table th { border-bottom: 1px solid #999999; }

/* search groups */
.searchGroups { width: 750px; }
.groupListing { margin-bottom: 5px; }

/* create new group */

.createNewGroup { width: 425px; }
#createGroupPage input, textarea { width: 200px; }

/* view groups */

#viewGroupPage .mapContainer { }
#viewGroupPage .sideContainer {  }

div.joingroup { width: 350px; }

.discBoard { width: 100%; }
.discBoard table { width: 100%; margin-bottom: 15px;}
.discBoard table td { padding: 1px 0; }
td.groupName { font-weight: bold; }

div.groupInfo div.bt { height:15px !important; overflow:hidden !important; }
div.groupInfo h3,
div.discussionBoard h3 { float: right; margin-right: 10px; margin-top:3px; }
div.groupInfo h3 span,
div.discussionBoard h3 span { font-weight: bold; font-size: 0.92em; }

/* view topic */


#topicPage img.smavatar { float: left; margin: 0 5px 3px 0;} 
#topicPage div.posts { width: 580px; border-right: 1px solid #999999; margin-right: 10px;}
#topicPage #map { float: right; }
.author { font-size:114%; } 
.date { color: #999999; }
#topicPage .flagdiv {  } /* its actually a span */



#CreatePostingPage .createPosting { width: 600px; }
#CreatePostingPage label { width: 200px;  }
#CreatePostingPage input, #CreatePostingPage textarea { width: 500px; }

/* world view */
div.iframes, iframe.iframes 	{background-color:	transparent; position:	absolute; background: transparent; border: 0;}
body#WorldView { height:100%;  padding: 0; margin: 0;}


#topnav { position:absolute; right: 20px; top: 0px; width: 343px; height: 132px; background: blue; z-index:1; background: url('../Images/topnav.png'); }
#topnav #LoginStatus { margin-top: 12px; margin-left: 20px; }
#miniOverview { width: 136px; height: 66px;   z-index:2; overflow: hidden; position: absolute; top: 40px; left: 22px;  }
#miniCurrent { cursor: move; width: 46px; height: 33px; z-index:3; left: 46px; background: transparent url('../Images/minicurrent.gif');}
.dropbox { display: block; width: 46px; height:33px;  position:absolute; top: 0; left: 0;}
#db1, #db4 { left: 46px; }
#db2, #db5 { left: 90px; }
.t { top: 33px; }

#navlinks { position: absolute; bottom: 19px; right: 35px;  width: 150px; font-size:92%; text-align: right;}
#navlinks a { color: #CF1111; font-weight: bold; }

#tile-wrap { overflow: hidden; position: absolute; height: 800px; width: 100%; }
#tile-inner { width: 5000px; height: 2100px; position: relative;  background: #577CB0; }

.loginplz   { width: 450px; }
    
#loginform { z-index: 1; margin-top: 117px; } 	/*keep it under overview*/
#loginform { position:absolute; top:0; right: 34px; width: 326px; background: #eee; }     
.loginformdiv { margin: 5px; background: #ffffff; padding: 5px; }

input[type=text]:focus, textarea:focus { border: 2px solid #547AAC; color:  #3C577B }

#loginform .joinus { float: left;  width: 140px; margin-right: 10px; border-right: 1px solid #999999; }
#loginform .login { float: left; height: 220px; width: 150px; }

input.openid {  background: #ffffff url(../Images/openid/login-bg.gif) 0 50% no-repeat; color: #000;  padding-left: 18px;}


#CreateAccount { height: 450px; width: 500px; padding: 10px; background: #fff;  } 
#CreateAccount div { padding: 1px 0px; }
#CreateAccount div.formfields { padding: 10px 0 0; font-size: 92%; }
#CreateAccount input:focus { border: 2px solid #547AAC; color:  #547AAC }
#CreateAccount label { display:block; float:left; padding:0pt 10px 0pt 0pt; text-align:right; width:175px; }
#CreateAccount #LoginStatus1_rblGender label, #CreateAccount .radiolabel label { float: none; display: inline; padding: 0 0 0 4px; width: auto; }
#CreateAccount small { padding-left: 4px; }
#CreateAccount span.req { color:#CF1111; font-size:93%; padding-left:2px; } 
#ForgotUsernameOrPassword { height: 150px; width: 350px; padding: 10px; background: #fff; }#CreateAccount { height: 450px; width: 500px; padding: 10px; background: #fff;  } 


#emailtofriendform div { padding: 1px 0px; }
#emailtofriendform div.formfields { padding: 10px 0 0; font-size: 92%; }
#emailtofriendform input:focus { border: 2px solid #547AAC; color:  #547AAC }
#emailtofriendform label { display:block; float:left; padding:0pt 10px 0pt 0pt; text-align:right; width:175px; }
#emailtofriendform #LoginStatus1_rblGender label, #emailtofriendform .radiolabel label { float: none; display: inline; padding: 0 0 0 4px; width: auto; }
#emailtofriendform small { padding-left: 4px; }
#emailtofriendform span.req { color:#CF1111; font-size:93%; padding-left:2px; } 
#ForgotUsernameOrPassword { height: 150px; width: 350px; padding: 10px; background: #fff; }










/* profile page */

#Profile {  height: 550px; width: 900px; padding-top: 15px; background: #5479AD;  } 
#profilePage { height: 550px; overflow: auto; } /* i'm such a failure */

#profilePage .flag {	float:right; text-align:right; width:100px; }
#h2Nickname span a { font-size:77%; text-decoration: none; }
#profilePage #mapIFrame { width: 850px; height: 300px; border: 0;}
#imgAvatar { margin: 0 5px 5px 0; }
#hlChangeAvatar { font-size: 85%;} 
#avatar { float: left; width: 100px; height: 120px;}
#profilePage .nameInfo { float: left; width: 500px; }
#profilePage .groupsList { float: left; width: 225px; }
#profilePage .shareRuns { float: left; width: 300px; }
#profilePage .runsCreated { float: left; width: 300px; }
#profilePage .ChangeAccountSettings { float: left; width: 300px; }
#profilePage .ChangeAccountSettings a { text-decoration: none; }
#profilePage .ChangeAccountSettings a:hover { background: #ffffd3; cursor: text; color: #000000;}
    
    
    



#map .infowindow { text-align: center; }
#map .infowindow h4 { margin-top: 0; }
#map .infowindow .byline { text-align: right; }
#map .infowindow p { font-size: 114%; }
#map .noteiw {}
#map .pictureiw {}





#videoEditorPage input { width: 210px; }
#videoEditorPage div.hints { margin: 0 5px 5px; padding: 7px; border:1px solid #547aac; font-size: 85%; }
#videoEditorPage div.hints ol { margin-top: 7px; } 
#videoEditorPage div.hints li { margin-top: 3px; } 

.viddisplay { height:450px; }
div.vidblock { width: 260px;  float: left; padding: 0 20px 15px;  } 
 
#watchPage .browsevids {   float: right; width:500px; }
#watchPage .recentvids { float: left; width: 150px; height: 150px; }
#watchPage .recentvids h4 { margin: 0 0 5px; }
#watchPage .reebokads {  width:473px; float: left;}
#watchPage #ctl00_content_hlCreateNewVideo { background: url('../Images/film_add.gif') no-repeat 0 50%; padding-left: 19px;}