/*

Contains styles that will override those in style.css once all
the overlay parts are put together!

*/

@media (min-width: @grid-start	) {

	/* Make all buttons have a bit of roundedness and font size smaller */
	.wpas-btn {
		border-radius: 3px;
		font-size: @font-size-small;		
	}

	/* Logout and ticket new buttons */
	.wpas-ticket-buttons-top {
		
		/* Style logout button */
		.wpas-link-logout{
			
			/* Color foreground and background */
			background-color: @brand-misc;
			color: @brand-success ;

				/* Remove Image */
				&:after {
					background-image: none ;
					width: inherit;					
				}
				
		}
		
		/* Style new ticket button */
		.wpas-link-ticketnew {
			background-color: @brand-success;
			color: white ;
		}
		
	}

	/* Style all other input elements */
	/* If these start to conflict with other page elements from the users theme we will need to add a qualifying class to it. */
	input, select {
		
		/* Make all other input elements have a bit of roundedness and font size smaller */
		border-radius: 3px;
		font-size: @font-size-small;	

		/* Set colors for input elements */
		background-color: @form-control-background-color !important ;
		border-color: @form-control-border-color !important ;
		color: @form-control-color !important ;
		
	}    
	
	/* Ticketlist: All elements - make font size smaller and some other stuff */
	.wpas-ticket-list {
	
		font-size: @font-size-small;

		/* This section creates a nice main background */
		background-color: @brand-misc-10;
		padding: 2em;
		border: solid;
		border-width: 1px;
		border-radius: 4px;
		border-color: @brand-misc;	

		/* Style all other input elements on the ticketlist page */
		input, select {
			
			/* Make all other input elements have a bit of roundedness and font size smaller */
			border-radius: 3px;
			font-size: @font-size-small;	

			/* Set colors for input elements */
			background-color: @form-control-background-color !important ;
			border-color: @form-control-border-color !important ;
			color: @form-control-color !important ;
			
		}
		
		/* Link colors*/
		a {
			color: @link-color;
		}
		a:hover {
			color: @link-color-hover;
		}		
		
	}

	/* Ticketlist: table background color when user hovers over row and some other stuff */
	#wpas_ticketlist {

		/* Nice background offset for table */
		border: solid;
		border-top-width:3px;
		border-bottom-width:3px;
		border-left-width: 1px;
		border-right-width: 1px;
		border-radius: 3px;
		border-color: @brand-misc;		
	
		/* Put border on each cell and add some padding around contents */
		td, th {
			border-right:solid;
			border-right-width: 1px;
			border-right-color: @table-cell-border-right-color;
			border-left-color: @table-cell-border-left-color;
			border-top-color: @table-cell-border-top-color;
			border-bottom-color:@table-cell-border-bottom-color;
			padding-left: 2em !important;
			padding-right: 2em !important;		
		}
		
		/* Row hover */		
		tr {
			/* Nothing here */
		}
		
		tbody tr:nth-child(n+1):hover {
			cursor: inherit;
			border-left: 4px;
			border-left-style: solid;
			border-left-color:@brand-info;
		}
		
		/* Alternating background colors in table */
		tr:nth-child(odd) {
			background: @table-row-odd;
		}		  
		tr:nth-child(even) {
			background: @table-row-even ;
		}
		
		/* Pagination Footers */
		.wpas_table_pagination > li > a {
			background-color: @brand-misc;
			border-right-color: @table-cell-border-right-color;
			border-left-color: @table-cell-border-left-color;
			border-top-color: @table-cell-border-top-color;
			border-bottom-color:@table-cell-border-bottom-color;
		}

	}
	
}
