/*
Copyright (c) 2012 VPNSecure.me
This work is based on:
*"Switchy! Chrome Proxy Manager and Switcher" (by Mohammad Hejazi (mohammadhi at gmail d0t com))
*"SwitchyPlus" by @gh05tw01f (http://twitter.com/gh05tw01f)
*/
body {
	margin: 0px;
	color: #345;
	font: menu;
	font-size: 9pt;
	-webkit-user-select: none;
	
	visibility: hidden;
}

body, td, th, input, select, textarea, button {
	font: menu;
	font-size: 9pt;
}

body * {
	white-space: nowrap;
	?outline: solid 1px #abc;
}

hr {
	height: 0px;
	margin: 0px 0px;
	border: none;
	border-top: solid 1px #eef;
}

.ltr, .ltr * {
	direction: ltr !important;
	text-align: left !important;
}

#menu {
	margin: 2px 0px;
}

#menu .templateItem {
	display: none;
}

#menu .item {
	?padding: 4px 25px 4px 6px;
	padding: 4px 25px;
	-webkit-padding-start: 6px;
	margin: 0px 2px;
	white-space: nowrap;
	cursor: pointer;
	?text-shadow: #ccc -1px 0px 2px;	
}

#menu .item:hover {
	?padding: 3px 24px 3px 5px;
	padding: 3px 24px;
	-webkit-padding-start: 5px;
	border: solid 1px #bcd;
	border-radius: 3px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0f5fc), color-stop(1, #e0e9f4));
	background: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0, #fff),  color-stop(0.4, hsl(215, 67%, 97%)), color-stop(0.41, hsl(213, 48%, 95%)));

	?border: solid 1px #c5cdd3;
	?background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f5f9fe), color-stop(1, #e8f1f9));
}

#menu .item:active {
	?padding: 3px 24px 3px 5px;
	padding: 3px 24px;
	-webkit-padding-start: 5px;
	border: solid 1px #abc;
	border-radius: 3px;
	background: #dde7f2 none;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8eef4), color-stop(1, #f5f9f4));
}

#menu .item img {
	vertical-align: text-top;	
}

#menu .blue {
	color: #47b;
}

#menu .green {
	color: #5b5;
}

#menu .red {
	color: #d63;
}

#menu .yellow {
	color: #ca0;
}

#menu .purple {
	color: #a407be;
}

#menu .icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	?background: url(../images/checked.png);
}

#menu .checked .icon {
	background: url(../images/checked.png) !important;
}

#menu .loading {
	background: url(../images/loading.gif) !important;
}

#menu #automaticMode .icon {
	background: url(../images/switch.png);
}

#menu .proxy span {
	?vertical-align: middle;
}

#menu .item span {
	-webkit-padding-start: 4px;
}

#menu .separator {
	height: 0px;
	margin: 3px 2px;
	border: 0;
	border-top: 1px solid #ddd;
}

#menuError, #separatorError {
	display: none;
}

#about {
	font-size: 10pt;
	padding: 10px;
	display: none;
}

#about * {
	color: #578;
	cursor: default;
}

#about a {
	cursor: pointer;
}

#about .header {
	text-shadow: #ccc 1px 1px 3px;	
}

#about .header td {
	padding: 0px 10px;
	-webkit-padding-start: 0px;
}

#about .header .title {
	font-size: 26pt;
	margin-top: -6px;
	direction: ltr;
}

#about .header .titleTable {
	border-collapse: collapse;
	border-spacing: 0px;
}

#about .header .titleTable td {
	padding: 0px;
}

#about .header .version {
	font-size: 11pt;
	?margin-top: -6px;
	padding: 0px;
	text-shadow: #ddd 1px 1px 2px;
	-webkit-padding-start: 3px !important;
	-webkit-user-select: text;
}

#about .header .versionNumber {
	font-weight: bold;
	?font-size: 80%;
	-webkit-padding-start: 5px;
}

#about .header img {
	vertical-align: middle;
}

#about .body {
	padding: 10px 8px;
	white-space: nowrap;
	-webkit-user-select: text;
}

#about .body * {
	color: #679;
}

#about .body span {
	white-space: nowrap;
}

#about .footer {
	height: 15px;
	color: #789;
	margin: 5px;
	padding-top: 3px;
	border-top: solid 1px #eef;
	white-space: nowrap;
}

#about .footer div {
	?margin: 0px 10px;
}

#about .close, #addRule .close {
	position: absolute;
	right: 10px;
	cursor: pointer;
}

#addRule .close {
	top: 10px;
	padding: 10px;
}

#about .close img, #addRule .close img {
	cursor: pointer;
}

#about .important {
	direction: ltr;
	color: #080;
	padding: 5px;
	padding-left: 28px;
	margin: 2px 0px;
	font-weight: bold;
	font-size: 115%;
	white-space: nowrap;
	text-align: left;
	border: solid 1px #acb;
	border-radius: 2px;
	background: #f0fdf0 url(/assets/images/accept.png) 5px center no-repeat;
	background: url(/assets/images/accept.png) 7px center no-repeat, 
				-webkit-gradient(linear, left top, left bottom, 
				color-stop(0, #fff),  color-stop(0.4, hsl(115, 67%, 97%)), color-stop(0.41, hsl(113, 48%, 94%)));
}

#developer {
	padding-bottom: 12px;
}

#developer .name {
	padding: 5px 0px;
}

#developer .name * {
	font-size: 10pt;
}

#changeLog {
	display: none;
	padding: 5px;
	padding-bottom: 12px;
	margin: 8px 0px;
	white-space: nowrap;
	font-size: 100%;
	border-bottom: solid 1px #eef;
	border: solid 1px #acb;
	border-radius: 2px;
	?background: -webkit-gradient(linear, left top, left bottom, 
				color-stop(0, #fff),  color-stop(0.4, hsl(115, 67%, 97%)), color-stop(0.41, hsl(113, 48%, 94%)));
}

#changeLog * {
	direction: ltr;
	text-align: start;
	color: #080 !important;
}

#changeLog .title {
	margin-bottom: 8px;
	font-weight: bold;
}

#changeLog .item {
	margin-top: 4px;
	font-size: 90%;
}

#addRule {
	padding: 7px;
	display: none;
	height: 20px;
}

#addRule * {
	color: #5e708d;
}

#addRule table {
	?width: 100%;
	?border: solid 1px #ccc;
	border-spacing: 1px;
	padding: 7px;
	table-layout: fixed;
}

#addRule table th {
	text-align: start;
}

#addRule table th {
	height: 28px;
	padding-left: 8px;
	padding-right: 8px;
	-webkit-padding-start: 0px;
	font-size: 9pt;
	font-weight: normal;
	?border: solid 1px #e0e4e6;
	?background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f7fe), color-stop(1, #e1eaf6));
}

#addRule table td {
	height: 28px;
	overflow: hidden;
	vertical-align: middle;
	?cursor: pointer;
	?border: solid 1px #e0e4e6;
	?background-color: #fafcff;
	?background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f8fbfe), color-stop(1, #eef3fd));
}

#addRule input, #addRule select {
	width: 250px;
	min-height: 24px;
	height: 100%;
	-webkit-padding-start: 3px;
}

#addRule .button {
	width: 100px;
	color: #567;
	display: inline-block;
	cursor: pointer;
	text-align: center;
	padding: 5px;
	border: solid 1px #abc;
	border-radius: 2px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0f5fc), color-stop(1, #e0e9f4));
	background: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0, #fff), color-stop(0.4, hsl(0, 0%, 97%)), color-stop(0.41, hsl(0, 0%, 94%)));
	-webkit-box-shadow: 0px 1px 2px #ddd;
}

#addRule .button.bold {
	font-weight: bold;
}

#addRule .button:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f6fafe), color-stop(1, #e3ebf7));
	background: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0, #fff),  color-stop(0.4, hsl(215, 67%, 97%)), color-stop(0.41, hsl(213, 48%, 94%)));
}

#addRule .button:active {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e9f4), color-stop(1, #f5f9f4));
}

#addRule .button img {
	vertical-align: text-bottom;;
}

#addRule .header {
	?font-size: 10pt;
	font-weight: bold;
	?text-shadow: #ccc 1px 1px 3px;
	border: solid 1px #abc;
	border-radius: 2px;
	padding: 8px;
	padding-bottom: 8px;
	margin-bottom: 9px;
	background-color: #eaeeff;
	?background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f4f9ff), color-stop(1, #e5ecf9));
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafcff), color-stop(1, #eff3fe));
	background: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0, #fff), color-stop(0.48, hsl(217, 73%, 98%)), color-stop(0.51, hsl(217, 62%, 96%)));
	?-webkit-box-shadow: 0px 1px 2px #ddd;
}

#addRule .header.light {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafcff), color-stop(1, #eff3fe));
}

#addRule .header.title {
	-webkit-padding-start: 14px;
}

#addRule .note {
	display: none;
}

#addRule .note > * {
	height: auto !important;
	padding-bottom: 6px;
}

#addRule .control {
	border-collapse: collapse;
	border-spacing: 0px;
	padding: 0px;
}

#addRule .control td {
	padding: 0px;
}

#addRule input.invalid {
	color: inherit;
	background-color: #fed;
	border: solid 1px #ccc;
	padding: 2px 4px;
}

#addRule .invalid {
	color: #d63;
}
