@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Screen layout for YAML examples
 * (de) Bildschirmlayout für YAML-Beispiele
 *
 * @copyright       Copyright 2005-2009, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.1
 * @revision        $Revision: 343 $
 * @lastmodified    $Date: 2009-01-19 23:41:32 +0100 (Mo, 19. Jan 2009) $
 */

@media screen, projection
{
  /**
   * (en) Formatting YAML's  basic layout elements
   * (de) Gestaltung des YAML Basis-Layouts
   */

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body { background-color: #1A1A1A; padding: 10px 0; }

  /* (en) Centering layout in old IE-versions */
  /* (de) Zentrierung des Layouts in alten IE-versionen */
  body { text-align: center; }
  .page_margins { text-align:left; margin: 0 auto; }

  /* (en) Layout: width, background, borders */
  /* (de) Layout: Breite, Hintergrund, Rahmen */
  .page_margins { min-width: 740px; max-width: 960px; background: #1a1a1a; }
  .page { margin: 0 8px 0; background-color: #000;}

  /* (en) Designing main layout elements */
  /* (de) Gestaltung der Hauptelemente des Layouts */

  #header {
    color: #000;
     background: #c0c0c0 url('images/header_bg.jpg') repeat-x;
  /*  background: #000 repeat-x top left;
    padding: 45px 2em 0em 20px; */
  }

  #topnav { color: #aaa; background: transparent; }

  /* (en) adjustment of main navigation */
  /* (de) Anpassung der Hauptnavigation */
  #nav ul { margin-left: 20px; }

  #main { background: #000;padding: 0px 0 10px 0; }

  #footer {
    color:#666;
    background: #000;
    padding: 10px  0px  0  20px;
    border-top: 5px #1A1A1A solid;
    line-height: 1.5em;
  }



  /**
   * (en) Styling of layout specific elements
   * (de) Gestaltung layoutabhängiger Elemente
   */

  #header h1 {
    font-weight:bold;
    font-size:2.5em;
    letter-spacing:-2px;
    line-height:60%;
    margin:0;
    color:#000;
    padding-left: 20px;
    padding-bottom: 2px;
  }

  #header span { color:#999; }

  #topnav a { color: #999; font-weight: normal; background:transparent; text-decoration:none; }
  #topnav a:focus,
  #topnav a:hover,
  #topnav a:active { text-decoration:underline; background-color: transparent; }

  #official{
	background-color: #0b2a22;	
	text-transform:uppercase;
	color: #fff;
	text-align: right;
	padding: 0.9em 100px ;
	 clear:both; 
}
	
#official span{
	font-size: .8em;
	line-height: 1em;
	padding: 0px 0;
	letter-spacing: -0.05em;
}
 
  span.official_tag{
	
	
	color: orange;
	text-decoration:underline;
}
 	
  #footer a { color: #999; background:transparent; font-weight: bold; }
  #footer a:focus,
  #footer a:hover,
  #footer a:active {color: #4D87C7; background-color: transparent; text-decoration:underline; }
  
  
  /** Navigation */
#nav div.hlist {
    background: #c0c0c0 url('images/navigation_bg.jpg') repeat-x center right;
    border-top: 1px #000 solid;
    border-bottom: 1px #f6cfab solid;
    line-height: 0;
  }

#nav div.hlist ul {
    margin: 0 0 0 0px; /* LTR */
    padding: 0;
    border-left: 0px #aaa solid;
    border-right: 1px #e7a568 solid;
  }

#nav div.hlist ul li {
    border-left: 1px #e7a568 solid;
    border-right: 1px #b16425 solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left; /* LTR */
    font-size: 1.0em;
    line-height: 1em;
    list-style-type: none;
    margin: 0;	
    padding: 0;
  }

#nav div.hlist ul li a,
#nav div.hlist ul li strong {
    background: transparent;
    color: #FFF;
    display: block;
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    padding: 0.9em 1.8em;
    text-decoration: none;
    width: auto;
    text-transform:uppercase;
  }

#nav div.hlist ul li a:focus,
#nav div.hlist ul li a:hover,
#nav div.hlist ul li a:active  { background: #dc7e28; color: #fff; text-decoration: none; }

#nav div.hlist ul li.active {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    background: #272727 url("http://jamolympic.org/App_Themes/JOA-Black/images/shiny_buttons/background_active.png") repeat-x center right;
    border-left: 1px #444 solid;
    border-right: 1px #888 solid;
  }

#nav div.hlist ul li.active strong,
#nav div.hlist ul li.active a:focus,
#nav div.hlist ul li.active a:hover,
#nav div.hlist ul li.active a:active { background: transparent; color: #fff; text-decoration: none; }

/* Footer Navigation */

#footer_nav{
	margin-bottom: 1.8em;
}

#footer_nav div.hlist{
    background: none;
    border: 0;
    line-height: 0;
}

#footer_nav div.hlist ul {
    margin: 0 0 0 0px; /* LTR */
    padding: 0;
    border: 0px;
  }

 #footer_nav div.hlist ul li {
    border-left: 1px #dc7e28 solid;
    border-right: 0px;
    font-size: .9em;
    margin: 0;	
    padding: 0;
  }
  
#footer_nav div.hlist ul li a,
  #footer_nav div.hlist ul li strong {
    background: transparent;
    color: #dc7e28 ;
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    padding: 0.2em 0.8em;
    text-decoration: none;
    width: auto;
  }
  
 #footer_nav div.hlist ul li.active {
    background: none;
    border-left: 1px #dc7e28 solid;
    border-right: 0px #888 solid;
  }

 #footer_nav div.hlist ul li.first {
    border-left: 1px #dc7e28 solid;
}

#footer_nav div.hlist ul li.active strong,
#footer_nav div.hlist ul li.active a:focus,
#footer_nav div.hlist ul li.active a:hover,
#footer_nav div.hlist ul li.active a:active { background: transparent; color: #fff; text-decoration: none; }

/* Features */

#joa_features{
	margin: 0;
   background-color: #000;
       border-top: 1px #321b08 solid;
}

#joa_features div.hlist{
    background: none;
    border: 0;
    line-height: 0;
       background-color: #000;

}

#joa_features div.hlist ul {
    margin: 0 0 20px 37px; /* LTR */
    padding: 0;
    padding-top: 6px;
    border: 0px;

    background: none;
  }

 #joa_features div.hlist ul li {
    border-left: 0px #dc7e28 solid;
    border-right: 0px;
    font-size: .9em;
    margin: 0;	
    padding: 0;
  }
  
#joa_features div.hlist ul li a,
  #joa_features div.hlist ul li strong {
    background: none;
    color: #dc7e28 ;
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    padding: 0.2em 26px 0  0;
    text-decoration: none;
    width: auto;
  }
  
 #joa_features   div.hlist ul li a:focus,
 #joa_features  div.hlist ul li a:hover,
 #joa_features  div.hlist ul li a:active  { background: none; color: #333; text-decoration: none; }


 #joa_features div.hlist ul li.active {
    background: none;
    border-left: 1px #dc7e28 solid;
    border-right: 0px #888 solid;
  }

 #joa_features div.hlist ul li.first {
    border-left: 1px #dc7e28 solid;
}

#joa_features div.hlist ul li.active strong,
#joa_features div.hlist ul li.active a:focus,
#joa_features div.hlist ul li.active a:hover,
#joa_features div.hlist ul li.active a:active { background: none; color: #fff; text-decoration: none; }

#joa_features{
	border-top:: 1px #fff dotted;
	clear:both;
}

#joa_features div.hlist ul li img{
	border: 1px #f5bdc1 solid;
	height: 112px;
}

/* Misc */
span.copyright{
	font-size: 0.9em;
}
a.privacy{
	font-size: 0.9em;
}

/* News and Features */

.news_box{
	padding:1px;
	border:1px #176551 solid;
}

/* Photos */
#photos div.section_title{
    background: #c0c0c0 url('images/gallery_header_bg.jpg') repeat-x center right;	
    padding: 0.5em 1.8em 0.5em 1.8em;
    line-height: 1em;
    color: #fff;
    font-weight:bold;
    text-transform:uppercase;
    font-size: 0.9em;
    margin-bottom: 0.4em;
}

.gallery ul{
	width: 284px;
}
.gallery ul li{
    list-style: none;    
    width:80px;
    margin:10px 0 0 0;
    padding:0 6px 0 0;
    float:left;	

}
.gallery ul li img{
	padding: 3px;
	background-color: #ededec;
	border: 1px #5df5c8 solid;
}


#photos{
	clear:both;
	height: 314px;
	width: 280px;
}
p.section_title{
    padding: 1em 1.8em 0.0em 0.8em;	
    font-size: 1.4em;
    color:#fff;
    text-transform:uppercase;
    font-weight:bold;
}

#calendar, div.headlines{
	margin-top:5px;
}

.calendar{
    font-size: 70%;
    font-family: Tahoma, Verdana, Arial;
}

.calendar_content{
	background-color: #2f2907;
	margin: 0px;	
	padding: 0 0 1em 0;  
	 color: #E2E143;
}

.calendar_content h3{
    color: #fff;
    font-family: Arial, Verdana, Tahoma;
    font-weight: bold;
    font-size: 120%;
}
ul.events_listing{
	margin: 0 0.8em 10px 0;
}

ul.events_listing li{
	padding: 0.8em 0em;
	list-style: none;
	border-bottom:1px #4c472a dotted;
	*padding: 0.2em 0em;
}
ul.events_listing li div{
	padding: 0 0 0.2em 0;
	clear:both;
}

ul.events_listing li  div p{
	padding: 0.4em 0 0 0;
	*padding: 0;
	font-size: 1.0em;
	font-weight:bold;
	letter-spacing: .02em;
	
	font-family: Arial,  Verdana, Tahoma;
}
ul.events_listing li a{
    color: #fff;
    text-decoration: underline;
}
ul.events_listing li a:active, ul.events_listing li a:visited{
    color: #FF8D33;
    text-decoration:  none;
}

ul.events_listing li a:hover{
color: #F2FB32;
}
div.headlines{
}

p.readmore{
	color: #dc7e28;
	    background: url('images/readmore_tag.gif') left no-repeat;	
	    padding-left: 0.9em;
	
}
.calendar_content p.readmore{
	padding: .0em 0em 0 0.9em;
	margin-left: 13em;
}

#photos p.readmore{
	clear:both;
	float: right;
	padding: 0 0.9em;
}


/* root element for tabs  */
ul.tabs { 
	list-style-type:none; 
	list-style-image: none;
	margin:0 !important; 
	padding:0;
	height:30px;
	border-bottom:1px solid #666;	
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(http://jamolympic.org/img/global/tabs.png) no-repeat -652px 0;
	font-size:11px;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 111px;
	text-align:center;	
	text-decoration:none;
	color:#000;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -652px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -652px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.w1 			{ background-position: -519px 0; width:134px; }
ul.tabs a.w1:hover 	{ background-position: -519px -31px; }
ul.tabs a.w1.current { background-position: -519px -62px; }

/* width 2 */
ul.tabs a.w2 			{ background-position: -366px -0px; width:154px; }
ul.tabs a.w2:hover 	{ background-position: -366px -31px; }
ul.tabs a.w2.current { background-position: -366px -62px; }


/* width 3 */
ul.tabs a.w3 			{ background-position: -193px -0px; width:174px; }
ul.tabs a.w3:hover 	{ background-position: -193px -31px; }
ul.tabs a.w3.current { background-position: -193px -62px; }

/* width 4 */
ul.tabs a.w4 			{ background-position: -0px -0px; width:194px; }
ul.tabs a.w4:hover 	{ background-position: -0px -31px; }
ul.tabs a.w4.current { background-position: -0px -62px; }


/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}

.events{
    width: 100%;
    overflow: hidden;
    margin: 0 0 1.5em 0;
    list-style-type: none;
    border-bottom: 2px #ddd solid;
    font-family: Arial, Verdana, Tahoma;
 }
 
.events ul{
    list-style-type:  none ;
    margin:0;
    padding: 0;
}

 .events li {
    float:left; /* LTR */
    width: 100%;
    margin:0;
    padding: 0;
  }
  
  .events li .event-date{
    float: left;
    width: 100px;
    font-size: 200%;
    color: Red;
  }
  .events li .event-content{
    float: left;
  }
  
/* tooltip styling. uses a background image (a black box with an arrow) */ 
.tooltips { 
    background:transparent url(http://jamolympic.org/App_Themes/JOA-Black/images/white_big.png) no-repeat scroll 0 0; 
    font-size:14px; 
    height:153px; 
    padding:30px; 
    width:310px; 
    font-size:14px; 
    display:none; 
    color:#000; 
} 
 
/* tooltip title element (h3) */ 
.tooltips h3 { 
    margin:0; 
    font-size:18px; 
    color:#000; 
}

.tooltips p{
    font-size: 80%;
}
.tooltips p a{
    font-size: 100%;
    color: #000;
    }
    
    .plain {
border: 1px solid #4C3C1B;
padding: 5px;

background-color: #EFEECB;
}

#affiliates td ul {
    line-height: 1em;
    list-style: none;
    margin: 0;
    padding: 10px 0 0 0px; /* LTR */
    white-space: nowrap;
  }

#affiliates td  ul li {
    /* (en) Repeat the main color from the image */
    /* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
    list-style-type: none !important;
   /* background: #e0ecf8 url("http://jamolympic.org/App_Themes/JOA-Black/images/sliding_door/round/left.png") no-repeat top left;
    border-bottom: 1px solid #000;*/
    float: left; /* LTR */
    margin: 0;
    padding: 0 0 0 3px;
  }
  
  
 .content h1{
    margin: 0px;
    font-family: Arial, Tahoma, Verdana;
    padding: 20px;
    margin-bottom: 30px;
 }
  .content h3{
    margin-left: 0px;
    margin-bottom: 10px;
    font-family: Arial, Tahoma, Verdana;
    padding-left: 0px;
 }
   .content h2{
    margin-left: 0px;
    margin-bottom: 10px;
    font-family: Arial, Tahoma, Verdana;
    padding-left: 0px;
 }
 .content p{
    font-family: Arial, Verdana;
    font-size: 120%;
    line-height: 1.2em;
 }
 
.page_navigation{
    width: 100%;
    overflow: hidden;
    margin: 0 0 1.5em 0;
    list-style-type: none;
    border-bottom: 2px #ddd solid;
    font-family: Arial, Verdana, Tahoma;
 }
 
.page_navigation ul{
    list-style-type:  none ;
    margin:0;
    padding: 0;
}

 .page_navigation li {
    float:left; /* LTR */
    width: 100%;
    margin:0;
    padding: 0;
  }
  
  .page_navigation li .event-date{
    float: left;
    width: 100px;
    font-size: 200%;
    color: Red;
  }
 
ul#calendar{
	padding: 0;
	margin: 0;
	list-style-type: none;
	border: 0x solid #fff;
}

ul#calendar li{
	padding: 20px 10px;
	margin: 0;
	list-style-type: none;
}

ul#calendar li.odd{
	border-bottom: #3d3d3d 1px solid;
	background-color: #1a1a1a;
}

ul#calendar li.even{
	border-bottom: #3d3d3d 1px solid;
	background-color: #232323;
}

ul#calendar .event_details p{

}

ul#calendar h3 a:link, ul#calendar h3 a:visited {
	color: #fff;
	font-size: 100%;
	font-family:   Arial, Tahoma;
	margin-bottom: 30px;
	font-weight: bold;
	padding-bottom: 20px;
}
ul#calendar p{
	color: #ccc;
	padding: 0;
	margin: 0;
	line-height: 1.4em;	
	font-size: 90%;
	padding-bottom: 10px;
	
}

#calendar p.readmore a:link, #calendar p.readmore a:visited{
	padding-top: 20px;
	color: #fff;
	font-weight: bold;
}

ul.newsListingHome{
	list-style: none;
	padding: 0;
	margin: 0;
	margin:0 10px;
}

ul.newsListingHome li{
	list-style: none;	

}

ul.newsListingHome li h2.sf_newsTitle{	
	padding:0.8em 0;
	color: #1cb8f5;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 100%;	
}

ul.newsListingHome li p{
		color: #fff;
}

ul.newsListingHome .sf_readMore{
	color: #dc7e28;
	    background: url('images/readmore_tag.gif') left no-repeat;	
	    padding-left: 0.9em;	

}

ul.newsListingHome p.sf_readMore a{	color: #dc7e28;}
}