/*
	CSS - Skype.com
	TABLES
*/


/* China specific accordian tables
----------------------------------------------------------------------------------------------------*/

table { 
	width: 100%; 
	border-collapse: collapse;
}

	/* IE6, IE7, IE8 */
	.ie6 table,
	.ie7 table,
	.ie8 table {
		table-layout: fixed;
	}

tr {
	background: #FFFFFF;
	border-top: 1px solid #CEDCE2; 
}

	tr.hide,
	tbody.hide {
		display: none;
	}

	tr:first-child {
		border-top: none; 
	}

	/*tr:nth-of-type(even) { 
		background: #F7FAFB; 
	}*/

	thead tr {
		border: none;
		vertical-align: top;
	}

	thead th:last-child {
		padding: 15px;
		text-align: center;
	}

td, th { 
	padding: 15px 0 15px 15px; 
	text-align: left; 
}

td {
	vertical-align: middle;
}
	
	td.description { 
		max-width: 90px;
	}

		td.description a,
		td.description a:hover,
		td.description a:focus {
			color: #333534;
			cursor: default;
		    text-decoration: none;
		}

		td.description a.showOverlay .title {
			color: #0078CA;
		    cursor: pointer;
		    text-decoration: none;
		}

			td.description a:hover.showOverlay .title,
			td.description a:focus.showOverlay .title {
				color: #00548D;
			    text-decoration: underline;
			}
	
		td.description span { 
			display: none;
		}

		td.description span.title {
		    display: block;
			font-size: 14px;
    		font-weight: bold;
		    margin: 0;
		}

		td.description span.title a {
			font-size: 14px;
    		font-weight: bold;
		}
	
	td.additional { 
		display: none;
	}
	
	td.scope {
	  	display: inline-block;
		height: 26px;
		overflow: hidden;
		position: relative;
		padding: 22px 0 22px 15px;
		width: 52px;
	}

		td.scope .scopeIcon {
			display: block;
			height: 26px;
			overflow: hidden;
			position: relative;
			width: 52px;
		    *background: url('../assets/images/china/table-sprite.png') no-repeat;
			*background-position: 0 0;
		}

		.svg td.scope .scopeIcon:before {
			content: url('../assets/images/china/table-sprite.svg');
		}

	  	td.scope .scopeIcon:before {
	    	content: url('../assets/images/china/table-sprite.png');
	    	display: inline-block;
	    	overflow: hidden;
	    	position: relative;
			width: 120px !important; /* Width of SVG sprite, needed for IE to ensure SVG is correctly displayed. */
	  	}

		  	td.scope.landline.mobile .scopeIcon:before {
		  		left: 0;
			    top: 0;
			    margin-left: 0;
		  	}

			  	td.scope.landline.mobile .scopeIcon {
			  		*background-position: 0 0;
			  	}

		  	td.scope.landline .scopeIcon:before {
		  		left: 0;
			    top: -50px;
			    margin-left: 10px;
		  	}

			  	td.scope.landline .scopeIcon {
			  		*background-position: 0 -50px;
			  	}

		  	td.scope.mobile .scopeIcon:before {
		  		left: 0;
			    top: -100px;
			    margin-left: 18px;
		  	}

			  	td.scope.mobile .scopeIcon {
			  		*background-position: 0 -100px;
			  	}
	
	td.purchase { 
		min-width: 30px;
		padding: 15px 20px 15px 15px;
		vertical-align: middle;
		text-align: center;
	}
	
		td.purchase .btnContainer a { 
			width: 100%;
		}
	
th { 
	background: #00AFF0; 
	color: white; 
	font-size: 16px;
	font-weight: bold; 
}

	th span { 
		display: block;
	}


section .fadeWrapper {
	background-color: transparent;
/*     background: url('..../assets/images/backgrounds/bg-opacity-white.png') repeat; */
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

#searchSection {
	    overflow: visible;
	    z-index: 999;
	}

		#searchSection .ratesSearchBox {
		    overflow: visible;
		    z-index: 1;
		}

		#searchSection .column {
		    overflow: visible;
		}

	#subscriptionHeader .row {
	    padding-top: 20px;
	}

		#subscriptionHeader .fieldRow {
		    float: right;
		    margin-bottom: 20px;
		    margin-top: 0;
		    min-height: 0;
		    min-width: 110px;
		    width: auto;
		}

			#subscriptionHeader .fieldRow .styledSelect {
			    background-color: #FFFFFF; 
			}

			#subscriptionHeader .fieldRow .icon {
			    top: 2px;
			}

		#subscriptionHeader .grid.unit_2 .column {
		    overflow: visible;
		    padding: 0px;
		}

		#subscriptionHeader h3 {
		    line-height: 36px;
		    margin-bottom: 18px;
		}

	#creditHeader .row .grid,
	#videoHeader .row .grid {
	    padding: 20px 0;
	}


/* Media queries for Mobile view (<600px)
----------------------------------------------------------------------------------------------------*/
	
@media only screen and (max-width: 600px)  {

	table, thead, tbody, th, td, tr { 
		display: block; 
	    float: left;
	    clear: both;
	    width: 100%
	}
	
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tbody { 
		border-bottom: 1px solid #CEDCE2;
	}
	
	tr {
		background: #FFFFFF; 
		border-top: none;
	}

		tr.selected {
		    background-color: #E4EEF2;
		}

	td, th { 
		padding: 6px 5px;
	}
	
	td { 
		border: none;
		display: block;
		position: relative;
		padding-left: 50%;
		width: 45%;
	}
	
	td:before { 
		content: attr(data-label);
		position: absolute;
		top: 6px;
		left: 20px;
		width: 45%; 
		padding-right: 10px;
	    font-weight: bold;
		white-space: nowrap;
	}
	
	td.description { 
		background-color: #FFFFFF;
	    border-bottom: 1px solid #CEDCE2;
	    border-top: 1px solid #CEDCE2;
	    display: block;
	    height: 44px;
	    margin-bottom: -1px;
	    max-width: none;
	    padding: 10px 0;
	    width: 100%;
	}
	
		td.description a { 
	    	color: #0078CA;
			cursor: pointer !important;
			display: block;
		    line-height: 64px;
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 100%;
		    text-decoration: none;
		}
	
			td.description a.showOverlay .title { 
			    text-decoration: none;
			}
	
			td.description a:hover,
			td.description a:focus,
			td.description a.showOverlay:hover .title,
			td.description a.showOverlay:focus .title { 
		    	color: #00548D;
		    	text-decoration: none;
			}

			td.description span.title {
			    display: inline;
	    		font-weight: bold;
			    margin-left: 20px;
			}

				td.description span.title.noDesktop {
				    display: inline !important;
				}
	
			td.description span { 
				display: inline;
			}

				td.description span.minutes {
					color: #333534;
				    margin-left: 2px;
				}

				td.description span.price {
				    background-color: #00AFF0;
				    color: #FFFFFF;
				    font-size: 12px;
					font-weight: bold;
				    margin-left: 4px;
				    padding: 1px 5px;
				    text-transform: uppercase;
				}

					td.description a:hover span.price,
					td.description a:focus span.price {
					    background-color: #009EE5;
					}

				td.description span.arrow {
				  	display: block;
				  	height: 9px;
				  	overflow: hidden;
				  	position: absolute;
				  	right: 20px;
					top: 29px;
					vertical-align: top;
					width: 15px;
					-webkit-tap-highlight-color: rgba(0,0,0,0);
					*background: url('../assets/images/china/common-elements.png') no-repeat;
					*background-position: -2px -50px;
				}

					.svg td.description span.arrow {
					    *background: url('../assets/images/china/common-elements.svg') no-repeat;
					}

						tr.selected td.description span.arrow {
						    *background-position: -40px -50px;
						}

					.svg td.description span.arrow .arrowIcon:before {
						content: url('../assets/images/china/common-elements.svg');
						display: inline-block;
						position: absolute;
						width: 120px !important; /* Width of SVG sprite, needed for IE to ensure SVG is correctly displayed. */
					}

				  	td.description span.arrow .arrowIcon:before {
				    	content: url('../assets/images/china/common-elements.png');
				    	display: inline-block;
				  		left: -2px;
					    top: -20px;
				  	}

					  	tr.selected td.description span.arrow .arrowIcon:before {
					  		left: -40px;
						    top: -20px;
					  	}
	
		tr.selected td.description { 
			background-color: #FFFFFF;
		    margin-bottom: 8px;
		}
	
	td.minutes { 
		display: none;
	}
	
	td.scope {
		padding: 2px 0;
		padding-left: 50%;
		margin-left: 0;
	}

	  	td.scope .scopeIcon:before {
		    margin-left: 0 !important;
	  	}
	
	td.purchase { 
		padding: 10px 0 22px;
		width: 100%;
	}

		td.purchase .btnContainer {
		    padding: 0 20px;
		}

	#subscriptionHeader {
		border-top: 1px solid #CEDCE2;
	    margin: 0;
	    padding: 12px 20px;
	}

		#subscriptionHeader .row {
		    padding: 0;
		}

		#subscriptionHeader.contentBlock {
			background-color: #FFFFFF;
			overflow: visible;
		}

		#subscriptionHeader .grid.unit_2 {
		    position: absolute;
		    right: 20px;
		    top: 13px;
		}

		#subscriptionHeader .styledSelect {
		    font-size: 14px;
		}

		#subscriptionHeader h3 {
		    margin-bottom: 2px;
		}

	#creditHeader {
		border-top: 1px solid #CEDCE2;
	    margin: 0;
	    padding: 20px;
	}

		#creditHeader .row .grid {
		    padding: 0;
		}

		#creditHeader.contentBlock {
			background-color: #FFFFFF;
		}

	#videoHeader {
		border-top: 1px solid #CEDCE2;
	    margin: 0;
	    padding: 20px;
	}

		#videoHeader .row .grid {
		    padding: 0;
		}

		#videoHeader.contentBlock {
			background-color: #FFFFFF;
		}
}