﻿/* -------------------------------------------------------------- 
-----------------------------------------------------------------

	DESCRIPTION: Listmill Skin			 
				
	CONTENTS:
	0. FONTS
	
	1. RESET
	
	2. ELEMENT STYLES
		2.1 BODY
		2.2 FONTS
		2.3 HEADINGS
		2.4 OTHER ELEMENTS		
		
	3. LAYOUT STYLES
        3.1 LAYOUT
		3.2 NETWORK
        3.3 BANNER
		3.4 BODY
		3.5 FOOTER
		3.6 ADS
		3.7 ACCOUNT

    4. COMPONENT STYLES
		4.1 FORM
		4.2 LABEL VALUE LIST
		4.3 MESSAGE BOX
		4.4 POST
		4.5 PAGER
		4.6 HOVER LIST		
		4.7 ROTATOR WIDGET
		4.8 DIALOG WIDGET
		4.9 TAB WIDGET        
        4.10 COMBOBOX WIDGET 
        4.11 CHECKBOX WIDGET
		4.12 INLINE LIST
		4.13 CATEGORY LIST
        4.14 TERMS
        4.15 RECAPTCHA
        4.16 VALIDATION
        4.17 DATA TABLE 
        4.18 MISC
				
    5. PAGE STYLES
        5.1 HOME            
        5.2 LOCATION
		5.3 SEARCH
        5.4 POWER SEARCH
		5.5 POST DETAILS
		5.6 POST EDITOR
		5.7 POST MESSAGE
		5.8 CREATE ACCOUNT
		5.9 ACCOUNT HOME
		5.10 POST HISTORY
		5.11 FAVORITES
		5.12 SEARCH ALERTS
		5.13 CONTESTS
		5.14 FAQS
					
    6. FORMATTING STYLES					
		6.1 SIZING
		6.2 DISPLAY	
		6.3 BUTTONS
		6.4 CLEAR FIX


	NOTES:
	normal-text:  	12px, 1em - lineheight 18px, 1.5em
	small-text:  	11px, .92em - lineheight 18px, 1.6364em
	xsmall-text:	10px, .833em - lineheight 18px, 1.8em
-----------------------------------------------------------------
-------------------------------------------------------------- */

/*==============================================================================================
  0. FONTS
================================================================================================*/

@font-face {
    font-family: 'RobotoCondensed';
    src: url('http://www.armslist.com/content/fonts/Roboto-Condensed-webfont.eot');
    src: url('http://www.armslist.com/content/fonts/Roboto-Condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.armslist.com/content/fonts/Roboto-Condensed-webfont.woff') format('woff'),
         url('http://www.armslist.com/content/fonts/Roboto-Condensed-webfont.ttf') format('truetype'),
         url('http://www.armslist.com/content/fonts/Roboto-Condensed-webfont.svg#RobotoCondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*==============================================================================================
  2. ELEMENT STYLES
================================================================================================*/
    body { 
        background-color: #505050;
    }
    h1, h2, h3, h4,
    .h1, .h2, .h3, .h4 {
        color: #333333;
    }
    input[type=text],
    input[type=password],
    select,
    textarea {    
        border: 1px solid #c0c0c0;
    }
    a, 
    a:visited,
    a:focus,
    a:active,
    .a {    
        color: #3c56c1;         
    }
    a:hover,
    .a:hover {    
        color: #830707
    }
    .a {
        cursor: pointer;   
    }
    

/*==============================================================================================
  3. LAYOUT STYLES
================================================================================================*/

/* 3.2 NETWORK
-------------------------------------- */
    .layout-network {    
        color: #f0f0f0;
        background: #707070;          
    }
    .network-content a,
    .network-content a:visited {
        color: #f0f0f0;
    }
    .network-content a:hover,
    .network-content a:focus {
        color: #d0d0d0;
    }
    .currency-picker .hoverarea .body {
        box-shadow: 0 0 0;
    }
    .currency-picker .hoverarea .body a,
    .currency-picker .hoverarea .body a:visited {        
        color: #3c56c1;        
    }
    .currency-picker .hoverarea .body a:hover {
        color: #830707;
    }
    
    
/* 3.3 BANNER
-------------------------------------- */    
    .layout-banner {                 
        background: rgb(240,240,240);
        background: -moz-linear-gradient(top,  rgba(240,240,240,1) 0%, rgba(224,224,224,1) 5%, rgba(208,208,208,1) 95%, rgba(192,192,192,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(5%,rgba(224,224,224,1)), color-stop(95%,rgba(208,208,208,1)), color-stop(100%,rgba(192,192,192,1)));
        background: -webkit-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 5%,rgba(208,208,208,1) 95%,rgba(192,192,192,1) 100%);
        background: -o-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 5%,rgba(208,208,208,1) 95%,rgba(192,192,192,1) 100%);
        background: -ms-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 5%,rgba(208,208,208,1) 95%,rgba(192,192,192,1) 100%);
        background: linear-gradient(to bottom,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 5%,rgba(208,208,208,1) 95%,rgba(192,192,192,1) 100%);        
    }
    .banner-content a,
    .banner-content a:visited {
        color: #606060;
        transition: all 0.2s linear;            
    }
    .banner-content a:hover,
    .banner-content a:focus {    
        color: #830707;
    }
    .banner-nav-menu .menu-option {
        background-image: url(../images/nav-bar.png);    
        background-repeat: no-repeat;   
        background-position: -8px 18px;
    }    
    .banner-nav-menu .menu-option h4 {
        color: #707070;
        text-shadow: 0 1px 1px #909090;
    }
    .site-logo { 
        background-image: url(../images/logo.png);
        background-position: 0px 20px;
        background-repeat: no-repeat;        
    }
    

/* 3.4 BODY
-------------------------------------- */        
    .layout-body {
        background-color: #f6f6f6;          
        background-image: url(../images/body-bg.png);
        background-repeat: repeat-x;
    }
    .breadcrumbs {
        border-bottom: 1px solid #e0e0e0;
    }
    

/* 3.4 FOOTER
-------------------------------------- */       
    .layout-footer {
        color: #ffffff;
        border-bottom: 0;
        background: #505050;
        background: -moz-linear-gradient(top,  rgba(48,48,48,1) 0%, rgba(80,80,80,1) 5%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(5%,rgba(80,80,80,1)));
        background: -webkit-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(80,80,80,1) 5%);
        background: -o-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(80,80,80,1) 5%);
        background: -ms-linear-gradient(top,  rgba(48,48,48,1) 0%,rgba(80,80,80,1) 5%);
        background: linear-gradient(to bottom,  rgba(48,48,48,1) 0%,rgba(80,80,80,1) 5%);        
    }
    .footer-content .title {
        color: #ffffff;
    }
    .footer-content a,
    .footer-content a:visited {
        color: #f0f0f0;
    }
    .footer-content a:hover,
    .footer-content a:focus {
        color: #d0d0d0;
    } 
    

/* 3.6 ADS
------------------------------------------- */
    .header-ads {
        background-color: #505050;
        border-bottom: 2px solid #606060;
    }
    .header-ads .ad {
        background-color: #565656;
    }
    .sidebar-ads .ad {
        background-color: #f0f0f0;
    }
    

/*==============================================================================================
  4. COMPONENT STYLES
================================================================================================*/

/* 4.1 FORM
------------------------------------------- */
    .buttons {
        border-top: 1px solid #c0c0c0;
    }


/* 4.3 MESSAGE BOX
------------------------------------------- */
    .message,
    .message-float {
        border-bottom: 1px solid #d0d0d0;
        background-color: #ffffff;
    } 
    .message.success {
        background-color: #ddffdd;
    }
    .message.warning {
        background-color: #ffffdd;    
    }
    .message.error {
        background-color: #ffdddd;
    }
    .message.action {
        background-color: #ddddff;
    }


/* 4.4 POST 
-------------------------------------------- */
    .post {
        border-bottom: 1px solid #e6e6e6;
    }
    .post .blurb,
    .post .location {
        color :#808080;
    }
    .post .seller.dealer {
        background-image: url('../images/dealer.png');
        background-repeat: no-repeat;
        background-position: 0 0;
    }

/* 4.5 PAGER
-------------------------------------------- */
    .pager .page,
    .pager .prev,
    .pager .next {
             
    }       
    .pager .page {    
        border: 1px solid #d0d0d0;
        background: rgb(240,240,240);
        background: -moz-linear-gradient(top,  rgba(240,240,240,1) 0%, rgba(224,224,224,1) 65%, rgba(192,192,192,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(65%,rgba(224,224,224,1)), color-stop(100%,rgba(192,192,192,1)));
        background: -webkit-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 65%,rgba(192,192,192,1) 100%);
        background: -o-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 65%,rgba(192,192,192,1) 100%);
        background: -ms-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 65%,rgba(192,192,192,1) 100%);
        background: linear-gradient(to bottom,  rgba(240,240,240,1) 0%,rgba(224,224,224,1) 65%,rgba(192,192,192,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#c0c0c0',GradientType=0 );        
    }
    .pager .page.selected,
    .pager .page:hover {
        border: 1px solid #c0c0c0;
        background: rgb(208,208,208);
        background: -moz-linear-gradient(top,  rgba(208,208,208,1) 0%, rgba(176,176,176,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,208,208,1)), color-stop(100%,rgba(176,176,176,1)));
        background: -webkit-linear-gradient(top,  rgba(208,208,208,1) 0%,rgba(176,176,176,1) 100%);
        background: -o-linear-gradient(top,  rgba(208,208,208,1) 0%,rgba(176,176,176,1) 100%);
        background: -ms-linear-gradient(top,  rgba(208,208,208,1) 0%,rgba(176,176,176,1) 100%);
        background: linear-gradient(to bottom,  rgba(208,208,208,1) 0%,rgba(176,176,176,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#b0b0b0',GradientType=0 );
    }
    .pager .prev,
    .pager .next {
        border: 1px solid #505050;
        background: rgb(155,77,77);
        background: -moz-linear-gradient(top,  rgba(155,77,77,1) 1%, rgba(68,68,68,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(155,77,77,1)), color-stop(100%,rgba(68,68,68,1)));
        background: -webkit-linear-gradient(top,  rgba(155,77,77,1) 1%,rgba(68,68,68,1) 100%);
        background: -o-linear-gradient(top,  rgba(155,77,77,1) 1%,rgba(68,68,68,1) 100%);
        background: -ms-linear-gradient(top,  rgba(155,77,77,1) 1%,rgba(68,68,68,1) 100%);
        background: linear-gradient(to bottom,  rgba(155,77,77,1) 1%,rgba(68,68,68,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b4d4d', endColorstr='#444444',GradientType=0 );
    }
    .pager .page a {
        color: #333333;        
    
    }
    .pager .prev a,
    .pager .next a {
        color: #ffffff;        
    }
    
    
/* 4.6 HOVER AREA
-------------------------------------------- */
    .hoverarea .body {
        background-color: #ffffff;  
        border: 1px solid #c0c0c0;    
    }
    

/* 4.7 ROTATOR WIDGET
-------------------------------------------- */
    .rotator .rotator-button {
        background: #aaa;    
        border: 1px solid #aaa;        
    }
    .rotator .rotator-button.selected {
        background: #777;
        border: 1px solid #777;
    }


/* 4.8 DIALOG WIDGET
-------------------------------------------- */
    .ui-widget-overlay {
        background: #a0a0a0; 
    }
    .ui-dialog {
        background-color: #e6e6e6;
    }
    .ui-dialog-titlebar {
        border-bottom: 1px solid #d6d6d6;
    }
    .ui-dialog-content {
        background-color: #f6f6f6;
    }
    .ui-dialog-buttonpane {
        border-top: 1px solid #d6d6d6;
    }


/* 4.9 TAB WIDGET
-------------------------------------------- */
    .ui-tabs-nav {
        background-color: #f0f0f0;  
        border-top: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
    }
    .ui-tabs-selected {
        background-color: #e6e6e6 !important;
    }


/* 4.16 VALIDATION
-------------------------------------------- */
    .input-validation-error {
        background-color: #fddddd;
    }
    .field-validation-error {
        color: #ff0000;
    }
    .validation-summary-errors {
        border-top: 1px solid #c0c0c0;
        border-bottom: 1px solid #c0c0c0;
        background-color: #fddddd;
    }
    

/* 4.17 DATA TABLE
-------------------------------------------- */
    .data {
        border-bottom: 1px solid #d0d0d0;
        border-right: 1px solid #d0d0d0;
    }
    .data thead tr {
        background-color: #e6e6e6;
    }
    .data th,
    .data td {
        border-top: 1px solid #d0d0d0;
        border-left: 1px solid #d0d0d0;
    }
    .data tbody tr:nth-child(odd) {
        background-color: #f6f6f6;
    }
    .data tbody tr:nth-child(even) {
        background-color: #f0f0f0;
    }
    

/* 4.18 MISC
------------------------------------------- */
    .backgroundtext {
        color: #b0b0b0;
    }
    .loading {
        background-image: url(../images/ajax-loader.gif);
        background-repeat: no-repeat;        
        background-position: 0;
    }
    .hr2 {    
        border-bottom: 1px solid #e0e0e0;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }


/*==============================================================================================
  5. PAGE STYLES
================================================================================================*/

/* 5.1 HOME PAGE
------------------------------------------- */
    .home-banner {
        display: inline-block;
        height: 325px;
        width: 500px;
        background-image: url('../images/home_banner.png');
        background-repeat: no-repeat;        
    }
    .rotator-section .home-banner-title {
        font-size: 2.66em;
        line-height: .5625em;
        margin-top: 1.125em;
        margin-bottom: 1.125em;
        text-shadow: #f6f6f6 0px 1px 1px;        
    }
    .rotator-section .search-form {
        margin-bottom: 1.5em;
    }
    .rotator-section .buyers {
        color: #3C56C1;        
    }
    .rotator-section .sellers {
        color: #830707;
    }
    .rotator-section .bullet-title {        
    }

/* 5.5 POST DETAILS
------------------------------------------- */
    .post-details .info .price {
        color: green;
    }    
    

/* 5.6 POST EDITOR
------------------------------------------- */
    .terms-fail {
        color: #ff3333;
    }
    .post-editor-nav ul,
    .post-editor-nav ol {       
        border-top: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        background-color: #f0f0f0; 
    }
    .post-editor .fields-container {
        border-top: 1px solid #d0d0d0;   
    }
    .post-editor-nav .selected {
        background-color: #e6e6e6;
    }    
    

/* 5.9 ACCOUNT HOME
------------------------------------------- */
    .account-section {
        border-top-color: #d0d0d0;
    }
    
/* 5.10 POST HISTORY
---------------------------------------- */
    .post-history td, th {
        border-bottom: 1px solid #e0e0e0;    
    }    

/* 5.14 FAQS
------------------------------------------- */
    .faqs .faq-section-title a,
    .faqs .q a {
        color: #333333;
    }


/*==============================================================================================
  6. FORMATTING STYLES
================================================================================================*/

/* 6.2 DISPLAY STYLES
------------------------------------- */    
    a.subnav-link {  
    }

/* 6.3 BUTTONS
------------------------------------- */    
    button,
    input[type=button],
    input[type=submit],
    .ui-button {
        color: #555;
        border: 1px outset #c0c0c0;
        background: rgb(224,224,224);
        background: -moz-linear-gradient(top,  rgba(224,224,224,1) 0%, rgba(192,192,192,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,224,224,1)), color-stop(100%,rgba(192,192,192,1)));
        background: -webkit-linear-gradient(top,  rgba(224,224,224,1) 0%,rgba(192,192,192,1) 100%);
        background: -o-linear-gradient(top,  rgba(224,224,224,1) 0%,rgba(192,192,192,1) 100%);
        background: -ms-linear-gradient(top,  rgba(224,224,224,1) 0%,rgba(192,192,192,1) 100%);
        background: linear-gradient(to bottom,  rgba(224,224,224,1) 0%,rgba(192,192,192,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#c0c0c0',GradientType=0 );
        text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    }      
    button:hover,  
    input[type=button]:hover,
    input[type=submit]:hover,
    .ui-button:hover {
        color: #333;
    }    
    button:disabled,
    input[type=button]:disabled,
    input[type=submit]:disabled,
    .ui-button:disabled
    {
        color: #999;
        background: rgb(240,240,240);
        background: -moz-linear-gradient(top,  rgba(240,240,240,1) 0%, rgba(208,208,208,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,240,240,1)), color-stop(100%,rgba(208,208,208,1)));
        background: -webkit-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(208,208,208,1) 100%);
        background: -o-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(208,208,208,1) 100%);
        background: -ms-linear-gradient(top,  rgba(240,240,240,1) 0%,rgba(208,208,208,1) 100%);
        background: linear-gradient(to bottom,  rgba(240,240,240,1) 0%,rgba(208,208,208,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#d0d0d0',GradientType=0 );
    }