/* -------------------------------------------------------------- 

main.css
* Subfolio by AREA 17

-------------------------------------------------------------- */
html, 			body, 
div,			span, 
object, 		iframe, 
h1, h2, h3, h4, h5, h6, 
p, 				blockquote, 
pre, 			a, 
abbr, 			acronym, 
address, 		code, 
del, 			dfn, 
em, 			img, 
q, 				dl, 
dt, 			dd, 
ol, 			ul, 
li, 			fieldset, 
form, 			label, 
legend, 		table, 
caption, 		tbody, 
tfoot, 			thead, 
tr, 			th, td { 
margin : 0; 
padding : 0; 
border : 0; 
font-weight : inherit; 
font-style : inherit; 
font-size : 100%; 
font-family : inherit; 
vertical-align : baseline; 
}

/* Body ---------------------------------------------------- */
body  {
background-color:#FFF;
background-repeat:repeat-x;
}

body, h1, h2, h3, h4, h5, h6, h7, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, field, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .standard_paragraph b, input {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: normal;
color: #666666;
}


/* Lists -------------------------------------------------------------- */
ul { list-style-type: none; }


/* @group Global layout */
/* ------------------------------------------------------------- 
	POSITIONING WITH FOOTER AT BOTTOM
-------------------------------------------------------------- */

html { height: 100%; }
body { height: 100%; margin: 0 15px 0; }
#container{ position: relative; min-height: 100%; }
#container-inner{ padding-bottom: 38px; }
#footer{
position: absolute !important;
bottom: 0 !important;
overflow: hidden;
background-color: white;
}

/* @end */

/* @group Standard Paragraph */
/* ------------------------------------------------------------- 
	STANDARD PARAGRAPH
-------------------------------------------------------------- */
.standard_paragraph { max-width: 650px; }
.standard_paragraph b, .standard_paragraph strong, .standard_paragraph em, .standard_paragraph i, .standard_paragraph li  { font-size: 100%; }
.standard_paragraph h1, .standard_paragraph h2 {
color: #333;
font-size: 36px;
line-height: 35px;
}
.standard_paragraph strong, .standard_paragraph em, .standard_paragraph b { color: #1a1a1a; }
.standard_paragraph h2 { color: #666666; margin-bottom: 10px; }
.standard_paragraph h3 {
font-size: 24px;
line-height: 30px;
color: #1a1a1a;
margin-top: 30px;
margin-bottom: 10px;
}
.standard_paragraph h4 {
font-size: 18px;
line-height: 30px;
color: #1a1a1a;
margin-top: 15px;
margin-bottom: 10px;
}
.standard_paragraph h5 {
font-family: "Arial Rounded MT Bold";
color: #1a1a1a;
margin-top: 10px;
}
.standard_paragraph p {
line-height: 15px;
color: #333;
margin-bottom: 10px;
}
.standard_paragraph p b, .standard_paragraph p strong  {
color: #1A1A1A;
font-weight: bold;
font-family: "Arial Rounded MT Bold";
}
.standard_paragraph p small, .standard_paragraph p small a {
color: #666;
font: italic 11px/15px Georgia, "Times New Roman", Times, serif;
}
.standard_paragraph p small a:hover { color:#DD0000; }
.standard_paragraph p img {
display: block;
margin: 15px 0;
}
.standard_paragraph li {
color: #333;
margin-bottom: 5px;
margin-top: 5px;
}
.standard_paragraph ul li {
color: #333;
list-style-image: url(../images/system/dot.png);
margin-left: 20px;
}
.standard_paragraph ol li { margin-left: 21px; }

.standard_paragraph blockquote {
display: block;
padding: 14px 10px 5px 10px;
border: 1px solid #e0e0e0;
margin: 10px 0 15px 9px;
color: #333;
overflow: auto;
}
.standard_paragraph blockquote p { }
	
.standard_paragraph code {
display: block;
padding: 14px 10px 10px 10px;
border: 1px solid #e0e0e0;
font: 11px Monaco, mono, "Courier New", Courier;
margin: 10px 0;
background-color: #f5f5f5;
color: #1a1a1a;
overflow: auto;
}
.standard_paragraph table {
padding: 10px 0;
}
.standard_paragraph table td { color: #1a1a1a; }
.standard_paragraph table td {
padding:9px 0 0 5px;
border-top: 1px solid #e0e0e0;
}
.standard_paragraph table tr:last-child td { border-bottom: 1px solid #e0e0e0;}

.standard_paragraph a, .standard_paragraph a:link, .standard_paragraph a:visited { text-decoration: underline; }

/* @end */

/* @group Text */
/* -------------------------------------------------------------- 
   SIMPLE TEXT
-------------------------------------------------------------- */

.error { color: #FF0000; }
.flash { color: #FF0000; }
.faded { color: #BBB; }

/* This is to use the Arial rounded bold and easily change it for Windows */
b, strong { font-family: "Arial Rounded MT Bold"; color: #1a1a1a; }

/* @end */


/* @group Links */
/* -------------------------------------------------------------- 
   LINKS
-------------------------------------------------------------- */
a, a:link,a:visited { color: #1a1a1a; text-decoration: none; outline: none;}
a:hover { color: #1b8d92; }


/* LINKS FOR GALLERY, FEATURES MODULES */
#gallery a, #features a, #lock a { text-decoration:none; }

/* @end */

/* @group Global modules */

/* -------------------------------------------------------------- 
   MODULES: FLASH, HEADER, LOGO, BREADCRUMBTOOLS, NAVIGATION, FOOTER
-------------------------------------------------------------- */
#notice {
overflow: hidden;
width: 100%;
background-color: #090;
}
#notice.error { background-color: #d11226; }
#notice p {
padding: 44px 0 0 10px;
background: url(../images/system/icon_exclam24.png) no-repeat 10px 10px;
}
#notice p, #notice p b { color: white; }
#notice #close {
float: right;
display: block;
height: 69px;
width: 36px;
text-indent: -5000px;
background: url(../images/system/close24.png) no-repeat 10px 10px;
}
#notice #close:hover { background-position: 10px -140px; }

/* LOGO */
#logo { padding-top: 15px; }
#logo a { font-size: 300%; }

/* BREADCRUMBTOOLS, NAVIGATION, FOOTER: Common */
#breadcrumbtools, #footer, #navigation { overflow: hidden; width: 100%; }
#breadcrumbtools { min-height: 15px; } /*<-- when no tools, keep a space under the logo*/

#breadcrumbtools a, #breadcrumbtools span, #footer a, #navigation a, #navigation .prev_next span, #footer a, #footer span {
display: inline-block;
padding: 14px 0 0 0;
height: 25px; /* 25+14 = 39*/
}

#breadcrumbtools .nav_sep { width: 1px; background-color: #e0e0e0; }

/* BREADCRUMBTOOLS */
#breadcrumbtools, #navigation { border-bottom:1px solid #e0e0e0; }
#breadcrumbtools .slash { } /*<-- here you can replace the slash with a graphic*/

/* BREADCRUMBTOOLS: Breadcrumb */
#breadcrumb { float: left; color: #666; }

/* BREADCRUMBTOOLS: Tools */
#tools { float: right; }
#tools { overflow: hidden; }
#tools li { float: left; }
#tools li a {
display: inline-block;
padding: 14px 10px 0 10px;
height: 25px; /* 25+14 = 39*/
border-left: 1px solid #e0e0e0;
}
#tools li:last-child a, #tools li.last a { padding-right: 0; }

/* NAVIGATION */
div#navigation { overflow:hidden; }
span.parent_dir, span.prev_next { display:block; float:left; }
span.parent_dir { width:35%; }

#navigation .parent_dir a {
padding-left: 25px;
padding-right: 10px;
background: url(../images/system/parent.png) no-repeat 3px 12px;
}
#navigation .parent_dir a:hover { background-position: 3px -38px; }

#breadcrumbtools a:hover, #footer a:hover, #navigation a:hover, #navigation a.hover { background-color: #eee; }

#navigation span.prev_next a, #navigation span.prev_next .faded { padding-left:15px; padding-right:15px; }
#navigation span.prev_next .first, #navigation span.prev_next *:first-child { border-right: 1px solid #e0e0e0; }

/* FOOTER */
#footer { border-top:1px solid #e0e0e0; }

#footer a, #footer span { padding-left: 5px; padding-right: 5px; }
#footer span { color:#666; }
#footer .updated_since_sep {
display: inline-block;
width: 5px;
text-indent: -2000px;
background: url(../images/system/dot.png) no-repeat 0 19px;
padding-left: 0;
padding-right: 0;
}
#footer a#footer-home, #footer span.copyright {
padding-right: 10px;
border-right: 1px solid #e0e0e0;
}
#footer :first-child { padding-left: 0; }

/* @end */

/* @group Content */
/* -------------------------------------------------------------- 
   MODULES: CONTENT
-------------------------------------------------------------- */
#content {
/*overflow:hidden;*/
}

/* @end */

/* @group Gallery */
/* -------------------------------------------------------------- 
   MODULES: CONTENT / GALLERY
-------------------------------------------------------------- */

#gallery { display: inline-block; position: relative; }

#gallery ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#gallery ul li {
float: left;
overflow: hidden;
}

#gallery ul li a {
float: left;
background-color: #f5f5f5;
margin: 0 1px 1px 0;
padding: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
}
#gallery ul li a p { color: #1a1a1a; }

#gallery ul li a div.gallery_thumbnail { 
	background-color: white; 
	height:240px;
	position: relative;
	_margin-bottom: 0 !important; 
}

#gallery ul li a div.custom { 
	height: auto;
}

 
#gallery ul li a img { border:none; overflow:hidden; }

#gallery ul li a:hover, #gallery ul li a:hover p, #gallery ul li.hover {
background: #1a1a1a;
color: #fff;
cursor: pointer;
}

#gallery ul li a p {
margin:0;
padding:9px 5px 5px 7px;
}

/** html #gallery { clear:left; }*/

/* @end */

/* @group Features */

/* -------------------------------------------------------------- 
   MODULES: CONTENT / FEATURES
-------------------------------------------------------------- */
#features { overflow:hidden; _display: inline-block;}

#features ul {
list-style:none;
margin:0;
padding:0;
overflow:hidden;
}

#features ul li { float: left; }

#features ul li a {
display:block;
overflow:hidden;
padding:0 160px 0 0;
_display: inline-block;
}


/*#features ul li a .image {
float:left;
}

#features ul li a .image img { border:1px solid #fff; }*/
#features ul li a img {
	float: left;
	border: 1px solid #fff;
}

#features ul li a > .info {
float:left;
}

#features ul li a .info {
width:200px;
margin-right:-160px;
padding:0;
}

#features ul li a .info h2 {
color:#1a1a1a;
font-weight:700;
text-transform:none;
text-decoration:underline;
margin:0;
padding:10px 10px 8px;
}

#features ul li a .info p {
margin:0;
padding:0 10px 10px;
}

#features ul li a:hover { background-color:#f5f5f5; }
#features ul li a:hover /*.image*/ img { border:1px solid #1a1a1a; }
/** html #features { clear:left; }
* html #features ul li a .info { position:absolute; }*

/* @end */

/* @group List */

/* -------------------------------------------------------------- 
   MODULES: CONTENT / LISTING LIST VIEW
-------------------------------------------------------------- */

.list {
width: 100%;
min-width: 510px; /* We set the min-width of the listing to match the kind column */
position: relative;
}
.list li {
overflow: hidden; /* clears the left float applied on li span elements - all browsers except IE6 and below */
_clear: left; /* IE6: clears the left float */
margin: 0 0 1px;
}
.list li a {
display: inline-block;
overflow: hidden;
width: 100%;
position: relative;
}
.list li a:hover {
color: #1A1A1A;
background-color: #eee;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.list li.listing-header { margin: 0 0 5px; }
.list li.listing-header a { color: #777; }
.list li.listing-header a:hover {
color: #1C7AD5;
background-color: #fff;
}
.list li span { display: block; float: left; }
.list .icon { width: 25px; height: 17px; position: relative; }
.list .filename { width: 200px; position: relative; }
.list .size { width: 65px;}
.list .date { width: 90px;}
.list .kind { width: 130px;}
.list .comment { 
position: absolute; /* turning it absolute so that it sticks inline, preventing it to float on browser resizing */
left: 510px; /* setting its left equals the sum of the widths of previous columns */
top: 0;
}
.list .filename, .list .name, .list .size, .list .date, .list .kind, .list .comment { padding: 2px 0 0; }

/* -------------------------------------------------------------- 
   MODULES: CONTENT / LISTING ICONS
-------------------------------------------------------------- */
* html .list .icon .icon_download { position:absolute; }

.list .updated, .list .new {
position:absolute;
top: 0;
left: 12px;
display:block;
width:9px;
height:9px;
z-index:99;
background:url("../images/system/updated.png") no-repeat top left;
}
.list .new { background: url("../images/system/new.png") no-repeat top left; }

.list .locked, .list .unlocked {
position:absolute;
top: 5px;
left: 3px;
display:block;
width:10px;
height:9px;
z-index:98;
background:url("../images/system/lock.png") no-repeat top left;
}
.list .locked { background-position:top; }
.list .unlocked { background-position:0 -50px; }

/* @end */

/* @group Grid */

/* -------------------------------------------------------------- 
   MODULES: CONTENT / LISTING GRID VIEW
-------------------------------------------------------------- */

.grid {
font-size:12px;
display: inline-block;
}
.grid .listing-header { display: none; }
.grid li {
float:left;
width: 179px;
height: 104px;
text-align: center;
overflow: hidden;
margin: 0 1px 1px 0 !important;
}
.grid li a {
display: block;
width: 100%;
height: 100%;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position: relative;
}
.grid li a:hover { background-color: #f5f5f5; cursor: pointer; }
.grid li span { display: block; }
.grid li span.filename {
max-height: 1.2em;
overflow: hidden; /* Crop the text if too long */
}
.grid li span.comment { color: #aaa; }
.grid .size, .grid .date, .grid .kind { display: none !important; }

/* -------------------------------------------------------------- 
   MODULES: CONTENT / LISTING ICONS
-------------------------------------------------------------- */

.grid .updated, .grid .new {
position:absolute;
top: 23px;
left: 98px;
display:block;
width:11px;
height:11px;
z-index:99;
background:url("../images/system/updated_xl.png") no-repeat top left;
}

.grid li .icon { height: 60px; position: relative; }
.grid li .icon img {
position: absolute;
top: 20px;
left: 73px;
}
.grid .locked, .grid .unlocked {
position:absolute;
float: left;
top: 29px;
left: 77px;
display:block;
width:10px;
height:9px;
z-index:98;
background:url("../images/system/lock.png") no-repeat top left;
}
.grid .locked { background-position:top; }
.grid .unlocked { background-position:0 -50px; }

/* @end */

/* @group Related */

/* -------------------------------------------------------------- 
   MODULE: RELATED
-------------------------------------------------------------- */
#related {
	 
}
	#related p { margin: 0 0 5px; }

/* @end */

/* @group Forms */

/* -------------------------------------------------------------- 
   FORMS
-------------------------------------------------------------- */

/* Form Container */
#lock {
overflow:hidden;
width:325px;
float: left;
}

/* Form */
#lock form {
border:1px solid #e0e0e0;
background-color:#FFF;
overflow:hidden;
padding-top: 5px;
}

/* Form header */
#lock .login_header {
background-color:#1A1A1A;
padding:19px 0 0 10px;
height: 20px;
}
#lock .login_header b { color:#FFF; }

/* Fields */
#lock form input.field {
width:203px;
padding:5px;
color: #333;
font: 12px Arial, Helvetica, sans-serif;
border: 1px solid #e0e0e0;
}

/* Checkbox */
#lock form .checkbox {
overflow:hidden;
line-height:14px;
}

#lock form .checkbox input {
float:left;
margin:0 5px 0 0;
padding:0;
}

/* Spacing & Alignment */
#lock form input.field { margin:15px 0 0; }

#lock form .checkbox { margin:10px 0 15px; }

#lock form .login_field {
text-align:right;
padding-right:15px;
}

#lock form .checkbox { margin-left:95px; }

/* Submit button */
.subButton {
width:100%;
border-top:1px solid #e0e0e0;
overflow:hidden;
}

.subButton input {
float:right;
background-color:#666;
width:140px;
display:block;
color:#FFF;
-moz-border-radius:2px;
-webkit-border-radius:2px;
margin:10px;
padding:14px 0 6px 7px;
border:0 none;
cursor:pointer;
text-align:left;
}


.subButton input:hover { background-color:#1A1A1A; }

/* Login Info */
.login_info {
overflow: hidden;
position: relative;
top: 60px;
left: 20px; 
line-height: 59px;
}
.login_info span.error { float: left; }
.login_info span.text { margin: 0 0 0 10px; }
.showSwitch { display:block; }
.hideSwitch { display:none; }

/* @end */

/* @group Download */
#download_box {
	width: 220px; 
	padding-top: 10px; 
}

#download_box .updated {
position: absolute;
display:block;
width:11px;
height:11px;
z-index:99;
background:url("../images/system/updated_xl.png") no-repeat top left;
/*margin-left: 25px;*/
/*margin-top: 3px;*/
top: 0;
left: 25px;
}

#download_box #filename {
clear: both;
padding-top: 9px;
margin-bottom: 2px;
color: #1a1a1a;
width: 220px;
overflow: hidden;
}

#download_box #clickable-zone { display: block; position: relative;}
#download_box #clickable-zone:hover #filename { color:#1c7ad5 ; }

#download_box dl {
display: block;
width: 100%;
overflow: hidden;
border-top: 1px solid #e0e0e0;
margin-top: 15px;
margin-bottom: 9px;
}
#download_box dt {
float: left;
padding-top: 4px;
}
#download_box dd {
display: block;
padding-top: 4px;
padding-left: 85px;
padding-bottom: 1px;
border-bottom: 1px solid #e0e0e0;
}
#download_box #instructions {
padding: 0 0 10px 0;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 9px;
}
#download_box #instructions a {
color: #666;
text-decoration: underline;
}
#download_box #instructions a:hover { color: #1c7ad5; }
#download_box #download {
display: block;
padding-bottom: 15px;
padding-top: 5px;
}
#download_box #download.with_arrow {
padding-left: 10px;
background: url(../images/system/download_xl.png) no-repeat 0 2px;
}

/* @end */

/* @group Permalink */

#info {

}

#info-button {
display: block;
width: 15px;
height: 15px;
text-indent: -2000px;
background: url(../images/system/info_button.png) no-repeat;
margin-bottom: 10px;
}
#info-button:hover { background-position: 0 -50px; }
#info-button.on { background-position: 0 -100px; }
#info-button.on:hover { background-position: 0 -150px; }

#info-box {
border: 1px solid #dedede;
padding: 9px 10px 5px 10px;
width: 220px;
position: relative;
}


/* @end */



/* -------------------------------------------------------------- 
MODULE SPACING
-------------------------------------------------------------- */
#content {
margin:15px 0;
}

/* Sets styles only for direct childs of #content (i.e gallery, features, listing). IE6 doesn't get it */
#content > * {
margin:0 0 15px;
}

/* IE6 Workaround to set styles only for direct childs of #content */
/*#content div {
_margin: 0 0 15px;
}
#content div * {
_margin: 0;
}*/

#inline_top_image,
#inline_middle_image,
#inline_bottom_image {
width:  100%;
overflow: hidden;
}

#inline_top_image img,
#inline_middle_image img,
#inline_bottom_image img {
padding: 0;
margin: 0 2px 2px 0;
float: left;
}

#file_listing { padding:5px 0 10px; }

#document { padding:0px 0 5px; }

#description { padding:5px 0 0; }

.text_block { margin-bottom:30px; }

/* ------------- FLOAT AND CLEAR MISC ------------------------------------- */

.show { display: block; }
.hide { display: none; }
.clear { clear:both; }
.floater { float:left;}