/**   Styles for "Screen" Media
*     File: popup_iframe_browse_theme.css
*     Author: Nate Hanna
*     Auth Web: http://www.mediasation.com
*     modified: 2009-12-04 (by Nate Hanna)
* --------------------------------------------------------------
**/

/** Element/Global Styles (including Typography)
-------------------------- **/
html { 
   font-size: 62.5%; /* about 10px if browser size is set at default (16px) */
   font-family: "Trebuchet MS", Arial, Helvetica, Geneva, "microsoft sans serif", sans-serif;
   height: 100%; 
   background: #000;
}
body {
   background: #000 url('../../forms/images/popup_page_bg.jpg') -254px 0 repeat-y;;
   height: 100%;
   font-size: 1.2em;
}
pre, a { color: #999; }
   a:hover { color: #FFF; }
   a.btn {
/*      */
      display: block;
      padding: 5px 10px;
      width: 100px;
      margin: 10px auto;
      color: #FFF;
      cursor: pointer;
      text-decoration: none;
   }

pre { font-size: 12px; }

div { margin: 0; padding: 0; }

/** Content
-------------------------- **/
#note {
   color: #FFF;
   background: #00376a url('../../forms/images/popup_selected_bg.jpg') top left repeat-x;
   padding: 5px 8px;
   font-size: 0.95em;
}

/* main vertical scroll */ 
#main { 
   position:relative; 
   margin: 0 auto;
   padding: 0 10px;
   float: right;
}

#main,
.page,
.scrollable {
   width: 565px;
   height: 510px;
   overflow:hidden;
}
 
/* root element for pages */ 
#pages { 
   position:absolute; 
   height:20000em;
}
.page {}
/* root element for horizontal scrollables */ 
.scrollable { position:relative; } 
 
/* root element for scrollable items */ 
.scrollable .items { 
   width:20000em; 
   position:absolute; 
   clear:both; 
}

/* root element for scrollable items */ 
.scrollable .item {
   float: left;
   width: 545px;
   height: 490px;
   padding: 10px 10px;
   padding-top: 0;
   overflow: hidden;
   text-align: center;
}

#main div.navi { padding-top: 10px; }

/* main navigator */
#main_navi {
	margin: 0;
	padding: 15px 0 0 0;
	text-align: center;
	float: left;
	width: 127px;
	overflow: hidden;
	overflow: hidden;
}

#main_navi li {
   display: inline;
   float: left;
	cursor:pointer;
	padding: 0 0 10px 19px;
	margin: 0;
	padding-right: 0;
	color: #CCC;
	width: 105px;
	font-size: 0.9em;
	height: auto;
}

#main_navi img { display: block; border: 1px solid #444; margin: 0 auto; }
   #main_navi li:hover img { border-color: #666; }
   #main_navi li.active img { border-color: #FF7700; }

#main_navi strong { display:block; }

#main div.navi {
   margin-left: 0;
	cursor:pointer;
	float: left;
	padding-top: 11px;
	padding-bottom: 3px;
}
#main div.navi_label { float: left; padding: 10px 8px 4px 0; color: #999; margin-left: 50px; }

#main ul.templates {
   margin: 0;
   padding: 8px 0 0 164px;
   list-style: none;
   height: 31px;
   overflow: hidden;
   position: relative;
   z-index: 3;
}
   #main ul.num_templates_1 { 
      padding-left: 224px;
      visibility: hidden;
      padding-bottom: 0;
   }

   #main ul.templates li { display: inline; margin: 0; padding: 0; }
   #main ul.templates li a {
      display: block;
      float: left;
      width: 117px;
      height: 23px;
      text-indent: -10000px;
      overflow: hidden;
      margin-right: 8px;
      background: transparent url("../images/popup_templates_sprite.gif") 0 0 no-repeat;
   }
   #main ul.templates li.active a { height: 31px; }
      #main ul.templates li a.default { background-position: -117px 0; }
      #main ul.templates li.active a.default { background-position: -117px -23px; }
      #main ul.templates li a.home { background-position: 0 0; }
      #main ul.templates li.active a.home { background-position: 0 -23px; }



/** Class Styles
-------------------------- **/
.hidden { display: none; }

.clearafter:after {
   content: "";
   display: block; 
   height: 100%;
   clear: both;
   visibility: hidden;
}