/*
 * Table
 */
table.dataTable {	
	clear: both;
	max-width: 930px;
}

table.dataTable thead th {
	padding: 3px 18px 3px 10px;
	border-bottom: 1px solid black;
	font-weight: bold;
	cursor: pointer;
	*cursor: hand;
}

table.dataTable tfoot th {
	padding: 3px 18px 3px 10px;
	border-top: 1px solid black;
	font-weight: bold;
}

table.dataTable td.center,
table.dataTable td.dataTables_empty {
	text-align: center;
}

table.dataTable tr.odd { background-color: #797b7b; }
table.dataTable tr.even { background-color: white; }

table.dataTable tr.odd td.sorting_1 { background-color: #C8CAC8; }
table.dataTable tr.odd td.sorting_2 { background-color: #D3D5D2; }
table.dataTable tr.odd td.sorting_3 { background-color: #DADCD9; }
table.dataTable tr.even td.sorting_1 { background-color: #E0E1DF; }
table.dataTable tr.even td.sorting_2 { background-color: #E4E5E3; }
table.dataTable tr.even td.sorting_3 { background-color: #E8E9E6; }


/*
 * Table wrapper
 */
.dataTables_wrapper {
	position: relative;
	clear: both;
	*zoom: 1;
}


/*
 * Page length menu
 */
.dataTables_length {
	float: left;
}


/*
 * Filter
 */
.dataTables_filter {
	float: right;
	text-align: right;
	padding-right:40px;
}


/*
 * Table information
 */
.dataTables_info {
	clear: both;
	float: left;
}


/*
 * Pagination
 */
.dataTables_paginate {
	float: right;
	text-align: right;
}

/* Two button pagination - previous / next */
.paginate_disabled_previous,
.paginate_enabled_previous,
.paginate_disabled_next,
.paginate_enabled_next {
	height: 19px;
	float: left;
	cursor: pointer;
	*cursor: hand;
	color: #111 !important;
}
.paginate_disabled_previous:hover,
.paginate_enabled_previous:hover,
.paginate_disabled_next:hover,
.paginate_enabled_next:hover {
	text-decoration: none !important;
}
.paginate_disabled_previous:active,
.paginate_enabled_previous:active,
.paginate_disabled_next:active,
.paginate_enabled_next:active {
	outline: none;
}

.paginate_disabled_previous,
.paginate_disabled_next {
	color: #666 !important;
}
.paginate_disabled_previous,
.paginate_enabled_previous {
	padding-left: 30px;
}
.paginate_disabled_next,
.paginate_enabled_next {
	padding-right: 30px;
	margin-left: 10px;
}

.paginate_disabled_previous { background: url('../guildhall/images/back_disabled.png') no-repeat top left; }
.paginate_disabled_next { background: url('../guildhall/images/forward_disabled.png') no-repeat top right; }

/* Full number pagination */
.paging_full_numbers {
	height: 22px;
	line-height: 22px;
}
.paging_full_numbers a:active {
	outline: none
}
.paging_full_numbers a:hover {
	text-decoration: none;
}

.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
	border: 1px solid #aaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 2px 5px;
	margin: 0 3px;
	cursor: pointer;
	*cursor: hand;
	color: #333 !important;
}

.paging_full_numbers a.paginate_button {
	background-color: #ddd;
}

.paging_full_numbers a.paginate_button:hover {
	background-color: #ccc;
	text-decoration: none !important;
}

.paging_full_numbers a.paginate_active {
	background-color: #99B3FF;
}


/*
 * Processing indicator
 */
.dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 30px;
	margin-left: -125px;
	margin-top: -15px;
	padding: 14px 0 2px 0;
	border: 1px solid #ddd;
	text-align: center;
	color: #999;
	font-size: 14px;
	background-color: white;
}


/*
 * Sorting
 */
.sorting { background: url('../guildhall/images/sort_both.png') no-repeat center right; }
.sorting_asc { background: url('../guildhall/images/sort_asc.png') no-repeat center right; }
.sorting_desc { background: url('../guildhall/images/sort_desc.png') no-repeat center right; }
 
table.dataTable thead th:active,
table.dataTable thead td:active {
	outline: none;
}


/*
 * Scrolling
 */
.dataTables_scroll {
	clear: both;
}

.dataTables_scrollBody {
	*margin-top: -1px;
	-webkit-overflow-scrolling: touch;
}

/*
 * Custom 
 */
.ghProjectName{
	font-family: tahoma;
	font-size: 15px !important;
	font-weight: bold !important;
	padding-bottom: 15px;
}

/*
 * Media Queries 
 */
/* full Screen Webpage ----------- */
@media (min-width: 1200px){
	.row-fluid .span12 {
		width:100%  !important;
		height:auto  !important;		
	}
	.ui-loader{
		display: none !important;
	}
	
	.table {		
		width: auto !important;
		margin: 0 auto !important;
		margin-left: 1px !important;
		margin-left:auto; 
		margin-right:auto;
	}
	
	.dataTables_info{
		padding-top:10px;
	}
		
	#studentWork_paginate{
		padding-top:10px;
		padding-right:40px;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
	.row-fluid .span12 {
		width:100%  !important;
		height:auto  !important;
		padding: 1px 1px 1px 1px !important;
	}
	.container-fluid  {
		width:100% !important;	
		margin: 0 auto;
		padding: 0px 0px 0px 0px;		
	}	
	
	.ui-loader{
		display: none !important;
	}
	
	.table {
		text-align:center;
		margin-left: 0px !important;
		width: 95% !important;		
		padding-left:-10px !important;		
	}
	
	.table th, .table td {
		padding: 4px; 
	}
	
	p {
		margin: 2px 2px 2px 12px !important;
	}
	
	h1 {		
		margin: 2px 2px 2px 12px !important;
	}
	
	h3 {		
		margin: 2px 2px 2px 12px !important;
		line-height: 20px !important;
	}
	
	#links a {
		font-size: 25px !important;
		line-height: 25px !important;		
	}
	
	#smuFooter #footerListRight {
		text-align:center !important;
		margin: 0 auto !important;
		width: 100% !important;
	}
	
	/*
	.colortest{
		background-color:yellow !important;		
	}*/
	
	table.dataTable {	
		clear: both !important;		
	}

	table.dataTable thead th {
		padding: 1px 1px 1px 1px !important;		
	}

	table.dataTable tfoot th {
		padding: 1px 1px 1px 1px !important;
		
	}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	.row-fluid .span12 {
		width:100%  !important;
		height:auto  !important;
		padding: 1px 1px 1px 1px !important;
	}
	.container-fluid  {
		width:100% !important;	
		margin: 0 auto;
		padding: 0px 0px 0px 0px;		
	}	
	
	.ui-loader{
		display: none !important;
	}
	
	.table {
		text-align:center;
		margin-left: 0px !important;
		width: 95% !important;		
		padding-left:-10px !important;		
	}
	
	.table th, .table td {
		padding: 4px; 
	}
	
	p {
		margin: 2px 2px 2px 12px !important;
	}
	
	h1 {		
		margin: 2px 2px 2px 12px !important;
	}
	
	h3 {		
		margin: 2px 2px 2px 12px !important;
		line-height: 20px !important;
	}
	
	#links a {
		font-size: 25px !important;
		line-height: 25px !important;		
	}
	
	#smuFooter #footerListRight {
		text-align:center !important;
		margin: 0 auto !important;
		width: 100% !important;
	}	
	
	table.dataTable {	
		clear: both !important;		
	}

	table.dataTable thead th {
		padding: 1px 1px 1px 1px !important;		
	}

	table.dataTable tfoot th {
		padding: 1px 1px 1px 1px !important;
		
	}
}

/* iPhone 5 ----------- */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
	.row-fluid .span12 {
		width:100%  !important;
		height:auto  !important;
		padding: 1px 1px 1px 1px !important;
	}
	.container-fluid  {
		width:100% !important;	
		margin: 0 auto;
		padding: 0px 0px 0px 0px;		
	}	
	
	.ui-loader{
		display: none !important;
	}
	
	.table {
		text-align:center;
		margin-left: 0px !important;
		width: 95% !important;		
		padding-left:-10px !important;		
	}
	
	.table th, .table td {
		padding: 4px; 
	}
	
	p {
		margin: 2px 2px 2px 12px !important;
	}
	
	h1 {		
		margin: 2px 2px 2px 12px !important;
	}
	
	h3 {		
		margin: 2px 2px 2px 12px !important;
		line-height: 20px !important;
	}
	
	#links a {
		font-size: 25px !important;
		line-height: 25px !important;		
	}
	
	#smuFooter #footerListRight {
		text-align:center !important;
		margin: 0 auto !important;
		width: 100% !important;
	}
	
	table.dataTable {	
		clear: both !important;		
	}

	table.dataTable thead th {
		padding: 1px 1px 1px 1px !important;		
	}

	table.dataTable tfoot th {
		padding: 1px 1px 1px 1px !important;
		
	}
	
}

/* These apply across all breakpoints because they are outside of a media query */
/* Make the labels light gray all caps across the board */
.studentwork-list thead th,
.studentwork-list tbody th .ui-table-cell-label,
.studentwork-list tbody td .ui-table-cell-label {
    text-transform: uppercase;
    font-size: .7em;
    color: rgba(0,0,0,0.5);
    font-weight: normal;
}
/* White bg, large blue text for rank and title */
.studentwork-list tbody th {
    font-size: 1.2em;
    background-color: #fff;
    color: #77bbff;
    text-align: center;
}
/*  Add a bit of extra left padding for the studentvideo 
.studentwork-list tbody td.studentvideo {
    padding-left: .25em;
}*/
/*  Custom stacked styles for mobile sizes */
/*  Use a max-width media query so we don't have to undo these styles */
@media (max-width: 40em) {
    /*  Negate the margin between sections */
    .studentwork-list tbody th {
        margin-top: 0;
        text-align: left;
    }
    /*  White bg, large blue text for rank and studentvideo */
    .studentwork-list tbody th,
    .studentwork-list tbody td.studentvideo {
        display: block;
        font-size: 1.2em;
        line-height: 110%;
        background-color: #fff;
        color: #77bbff;
        -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
        box-shadow: 0 1px 6px rgba(0,0,0,.1);
    }
    /*  Hide labels for rank and studentvideo */
    .studentwork-list tbody th .ui-table-cell-label,
    .studentwork-list tbody td.studentvideo .ui-table-cell-label {
        display: none;
    }
    /*  Position the studentvideo next to the rank, pad to the left */
    .studentwork-list tbody td.studentvideo {       
        border-bottom: 1px solid rgba(0,0,0,.15);
    }
    /*  Make the data bold */
    .studentwork-list th,
    .studentwork-list td {
        font-weight: bold;
    }
    /* Make the label elements a percentage width */
    .studentwork-list td .ui-table-cell-label,
    .studentwork-list th .ui-table-cell-label {
        min-width: 20%;
    }
}
/* Media query to show as a standard table at wider widths */
@media ( min-width: 40em ) {
    /* Show the table header rows */
    .studentwork-list td,
    .studentwork-list th,
    .studentwork-list tbody th,
    .studentwork-list tbody td,
    .studentwork-list thead td,
    .studentwork-list thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */
    .studentwork-list td .ui-table-cell-label,
    .studentwork-list th .ui-table-cell-label {
        display: none;
    }
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this */
@media ( max-width: 40em ) {
    .studentwork-list td,
    .studentwork-list th {
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
}