/* ------------------------------------------------------------ */
/* ----------- GREPTEM HTML 5 simple, unique template --------- */
/* ------------------------------------------------------------ */
/* ------------- http://themeforest.net/user/Grep ------------- */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* ------------------------- CONTENT -------------------------- */
/* ------------------------------------------------------------ */
/* --- 1. RESET ----------------------------------------------- */
/* --- 2. MAIN ------------------------------------------------ */
/* --- 3. HOME ------------------------------------------------ */
/* --- 3-1. LOGO ---------------------------------------------- */
/* --- 3-2. SHARE BOX ----------------------------------------- */
/* --- 3-3. NAVIGATION ---------------------------------------- */
/* --- 4. INNER ----------------------------------------------- */
/* --- 4-1. BACK BTN ------------------------------------------ */
/* --- 5. TYPHOGRAPHY ----------------------------------------- */
/* --- PAGES -------------------------------------------------- */
/* --- 6. ABOUT PAGE ------------------------------------------ */
/* --- 7. BLOG PAGE ------------------------------------------- */
/* --- 8. WORK PAGE ------------------------------------------- */
/* --- 9. SERVICES PAGE --------------------------------------- */
/* --- 10. CONTACT PAGE --------------------------------------- */
/* --- 11. FOOTER  -------------------------------------------- */
/* --- 12. PAGINATION ----------------------------------------- */
/* --- 13. jQuery SCROLLBAR ----------------------------------- */
/* --- 14. PRINT MEDIA ---------------------------------------- */
/* --- 15. FONT-FACE ------------------------------------------ */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

/* --------------------------- */
/* --------- 1. RESET -------- */
/* --------------------------- */

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display:block;}
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

body { font:13px/18px Arial, Helvetica, sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family:monospace, sans-serif; }

a:hover, a:active { outline:none; }
ol { list-style-type:decimal; }
nav ul, nav li { margin:0; list-style:none; list-style-image:none; }
small { font-size:85%; }
strong, th { font-weight:bold; }
td { vertical-align:top; }

sub, sup { font-size:75%; line-height:0; position:relative; }
sup { top:-0.5em; }
sub { bottom:-0.25em; }

pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word; padding:15px; }
textarea { overflow:auto; }
.ie6 legend, .ie7 legend { margin-left:-7px; } 
input[type="radio"] { vertical-align:text-bottom; }
input[type="checkbox"] { vertical-align:bottom; }
.ie7 input[type="checkbox"] { vertical-align:baseline; }
.ie6 input { vertical-align:text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor:pointer; }
button, input, select, textarea { margin:0; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { border-radius:1px; -moz-box-shadow:0px 0px 5px red; -webkit-box-shadow:0px 0px 5px red; box-shadow:0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color:#f0dddd; }

::-moz-selection{ background:rgba(0, 0, 0, 0.5); color:#fff; text-shadow:none; }
::selection { background:rgba(0, 0, 0, 0.5); color:#fff; text-shadow:none; }
a:link { -webkit-tap-highlight-color:rgba(0, 0, 0, 0.5); }

button { width:auto; overflow:visible; }
.ie7 img { -ms-interpolation-mode:bicubic; }

body {  color:#fff; }
select, input, textarea { color:#333; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; line-height: normal; }
a, a:active, a:visited { color:#000; text-decoration:none; }
a:hover { color:rgba(0, 0, 0, 0.7); }

/* --------------------------- */
/* --------- 2. MAIN --------- */
/* --------------------------- */

#wrap {
	min-height: 740px;
	min-width: 960px;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: url(../images/bgr_shadow.png) no-repeat 50% 50% #4b596a;
}
#home {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background: url(../images/bgr_pattern.png) repeat 50% 50%;
}
#home .header {
	position: absolute;
	top: 25%;
	width: 100%;
	margin: -170px 0 0;
	left: 0;
}
.content_box {
	overflow :hidden;
	width: 940px;
	height: 530px;
	margin: -290px 0 0 -488px;
	position: absolute;
	top: 50%;
	padding: 25px;
	left: 50%;
}

/* --------------------------- */
/* --------- 3. HOME --------- */
/* --------------------------- */

#home {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background: url(../images/bgr_pattern.png) repeat 50% 50%;
}
#home .header {
	position: absolute;
	top: 25%;
	width: 100%;
	margin: -170px 0 0;
	left: 0;
}

	/* ------- 3-1. LOGO --------- */
	#logo {
		display: block;
		margin: 0 auto;
		width: 320px;
		height: 71px;
		background: url(../images/banner_visuallink.jpg) no-repeat;
		text-indent: -999em;
	}

#fondologo 
{
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 71px;
	/*background: url(../images/fondologo.jpg) no-repeat 50% 50% #4b596a;*/
	background: url(../images/fondologo.jpg);
}	
	
img.main-image{margin-top:-5px;width:100%;display:block}

	
	/* ----- 3-2. SHARE BOX ------ */
	.share_box {
		position: absolute;
		top: 52px;
		left: -170px;
		font-family: 'WebSymbolsRegular', cursive;
		z-index: 9;
		opacity: 0.5;
		filter: alpha(opacity=50);
		font-size: 16px;
		overflow: hidden;
		height: 40px;
		color: #000;
		text-align: center;
		line-height: 40px;
		background: #fff;
		-webkit-transition: all 300ms linear;
		-moz-transition: all 300ms linear;
		-o-transition: all 300ms linear;
		-ms-transition: all 300ms linear;
		transition: all 300ms linear;
	}
	.share_box:hover {
		left: 0;
	}
	.share_box ul {
		display: inline-block;
		padding: 0 0 0 10px;
		width: 160px;
		overflow: hidden;
	}
	.share_box li {
		display: inline-block;
		padding: 0 5px;
		list-style: none;
	}
	.share_box .btn_share {
		font-family: 'WebSymbolsRegular', cursive;
		overflow: hidden;
		height: 40px;
		width: 40px;
		float: right;
		text-align: center;
		cursor: default;
		line-height: 40px;
		background: #fff;
	}

	/* ----- 3-3. NAVIGATION ----- */
	nav {
		height: 250px;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 960px;
		margin: -125px 0 0 -480px;
	}
	nav ul {
		overflow: hidden;
		text-align: center;
		padding: 40px 0;
		margin: -40px 0;
		width: 960px;
	}
	nav li {
		width: 150px;
		opacity: 0.5;
		filter: alpha(opacity=50);
		height: 250px;
		overflow: hidden;
		position: relative;
		display: inline-block;
		background: #fff;
		margin-right: 10px;
	}
	nav li:last-child {
		margin-right: 0px;
	}
	nav li a {
		width: 100%;
		height: 100%;
		display: block;
		color: #000;
		position: relative;
	}
	nav li .ca-icon {
		font-family: 'WebSymbolsRegular', cursive;
		font-size: 60px;
		color: #333;
		text-shadow: 0px 0px 1px #333;
		line-height: 150px;
		position: absolute;
		width: 100%;
		height: 50%;
		left: 0px;
		top: 0px;
		text-align: center;
	}
	nav li .ca-main {
		font-size: 30px;
		color: #000;
		opacity: 0.8;
		filter: alpha(opacity=80);
		position: absolute;
		width: 100%;
		text-transform: uppercase;
		top: 158px;
		left:0;
		text-align:center;
	}
	nav li:hover {
		background-color:#000;
		z-index:999;
		-webkit-transform:scale(1.1);
		-moz-transform:scale(1.1);
		-ms-transform:scale(1.1);
		-o-transform:scale(1.1);
		transform:scale(1.1);
	}
	nav li:hover .ca-icon {
		color:#fff;
		font-size:80px;
		filter:alpha(opacity=80);
		opacity:0.8;
	}
	nav li:hover .ca-main {
		color:#fff;
		top: 152px;
	}

/* --------------------------- */
/* -------- 4. INNER --------- */
/* --------------------------- */

#section_load {
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 10;
	background: url(../images/bgr_shadow.png) no-repeat 50% 50% #73a711;
}
#section_load:before, #section_load:after {
	content: "";
	position: absolute;
	top: 0;
	left: -23px;
	width: 23px;
	height: 100%;
	background: url(../images/bgr_shadow_w.png) repeat-y 0 0;
}
#section_load: before {
	background-position: -23px 0;
	left: auto;
	right: -23px;
}
#section_load .inner_wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/bgr_pattern.png) repeat 50% 50%;
}

	/* ------ 4-1. BACK BTN ------ */
	#back {
		position: absolute;
		z-index: 9999;
		opacity: 0.5;
		filter: alpha(opacity=50);
		left: 40px;
		text-align: center;
		overflow: hidden;
		background: #fff;
		display: block;
		color: #000;
		font-family: 'WebSymbolsRegular', cursive;
		font-size: 45px;
		color: #333;
		text-shadow: 0px 0px 1px #333;
		line-height: 50px;
		width: 60px;
		top: 40px;
		height: 60px;
		text-align: center;
	}
	.finished #back {
		position: fixed;
	}
	.ie #back {
		line-height: 55px;
	}
	.ie9 #back {
		line-height: 62px;
	}
	#back:hover {
		background: #000;
		color: #fff;
	}

/* --------------------------- */
/* ------ 5. TYPHOGRAPHY ----- */
/* --------------------------- */

h1 {
	font-size:42px;
	color:#fff;
	text-transform:uppercase;
}
h2 {
	font-size:18px;
	padding:0 0 20px;
	color:#fff;
}
h2 strong {
	color:#000;
	font-weight:normal;
}
.entry {
	height:390px;
}
.entry p {
	padding:0 0 18px;
}
.entry h2 {
	font-size:20px;
	padding:0 0 20px;
	color:#fff;
}
.entry h3 {
	font-size:18px;
	padding:0 0 20px;
	color:#fff;
}
.entry h4 {
	font-size:16px;
	padding:0 0 20px;
	text-transform:uppercase;
	color:#000;
}
.entry .dropcap {
	float:left;
	font-size:41px;
	padding:8px 10px 0 0;
}
.entry blockquote {
	font-style:italic;
	background:url(../images/bgr_quote.png) no-repeat 0 0;
	padding:0 0 0 25px;
}
.entry ul {
	padding:0 0 10px 14px;
}
.entry ul li {
	padding:0 0 10px 30px;
	line-height:20px;
	position:relative;
	list-style:none;
	cursor:default;
	margin:0;
}
.entry ul li:before {
	width:10px;
	height:10px;
	content:'\0000a0';
	position:absolute;
	left:4px;
	top:5px;
	background:rgba(0, 0, 0, 0.5);
}
.entry .highlight {
	color:#000;
	background:rgba(255, 255, 0, 0.7);
}
.entry .highlight.dark {
	background:rgba(0, 0, 0, 0.5);
	color:#FFF;
}
.entry img {
	display:block;
}
.entry .left_image {
	padding:0 18px 18px 0;
	float:left;
}
.entry .right_image {
	padding:0 0 18px 18px;
	float:right;
}
.entry .table_style {
	padding:2px 0 24px;
}
.entry .table_style table {
	text-align:left;
	border-collapse:collapse;
	width:100%;
	padding:0;
	margin:0;
}
.entry .table_style th {
	text-align:center;
	padding:10px 9px;
	font-size:18px;
	font-weight:normal;
	color:#fff;
	border-bottom:1px solid rgba(0, 0, 0, 0.1);
	background:url(../images/bgr_scroller.png) repeat;
}
.entry .table_style tbody {
	background:url(../images/bgr_scroller.png) repeat;
}
.entry .table_style td {
	text-align:center;
	padding:9px 10px;
}
.entry .table_style tbody tr:hover td {
	background:url(../images/bgr_scroller.png) repeat;
}

/* --------------------------- */
/* ------ 6, ABOUT PAGE ------ */
/* --------------------------- */

.about_content .text_content {
	float:left;
	width:480px;
}
.about_content.full_width .text_content {
	float:none;
	width:940px;
}
.about_content.full_width .text_content .entry {
	padding:0 0 40px;
}
.about_content .image_content {
	float:right;
	width:400px;
	margin:11px 0 0;
}
.about_content .image_content img {
	display:block;
	-moz-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);
	box-shadow:0 0 25px rgba(0, 0, 0, 0.5);
}

/* --------------------------- */
/* ------- 7, BLOG PAGE ------ */
/* --------------------------- */

.blog_content h1 {
	padding:0 0 20px;
}
.blog_content h2 {
	font-size:30px;
	padding:0 0 5px;
	color:#fff;
}
.blog_content h3 {
	font-size:18px;
	padding:0 0 20px;
	color:#fff;
}
.blog_content h3 strong {
	color:#000;
	font-weight:normal;
}
.blog_content .posts {
	float:left;
	width:940px;
}
.blog_content .post {
	float:left;
	width:940px;
}
.blog_content .text_content {
	float:left;
	width:480px;
	height:310px;
}
.blog_content .text_content .entry {
	height:325px;
}
.blog_content .post_full .text_content {
	width:940px;
}
.blog_content .image_content {
	float:right;
}
.blog_content .image_content img {
	display:block;
	height:325px;
	width:400px;
	cursor:pointer;
	-moz-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:0 0 25px rgba(0, 0, 0, 0.5);
	box-shadow:0 0 25px rgba(0, 0, 0, 0.5);
}
.blog_content .image_content img.click {
	cursor:pointer;
}

/* --------------------------- */
/* ------- 8. WORK PAGE ------ */
/* --------------------------- */

.work_content ul {
	margin:-10px -80px -50px -40px;
	overflow:hidden;
	padding:25px 0 0 40px;
}
.ie7 .work_content ul {
	width:1200px;
}
.work_content .pagination_nav {
	right:4px;
}
.work_content li {
	list-style:none;
	float:left;
	height:180px;
	width:440px;
	margin:0 41px -5px -27px;
	padding:23px;
	background:url(../images/bgr_work_item.png) no-repeat;
}
.work_content li a {
	float:left;
	height:176px;
	width:440px;
	position:relative;
}
.work_content li img {
	margin:0;
	padding:0;
	height:176px;
	width:440px;
	display:block;
}
.work_content li a:hover:after {
	content:"";
	float:left;
	height:176px;
	width:440px;
	background:rgba(0, 0, 0, 0.2);
	position:absolute;
	top:0;
	left:0;
}

/* --------------------------- */
/* ----- 9. SERVICES PAGE ---- */
/* --------------------------- */

.services_content .text_content {
	float:left;
	width:580px;
}
.services_content .list_content {
	float:right;
	padding:51px 0 0;
	width:300px;
}
.services_content .list_content li {
	background:url(../images/bgr_nav.png) no-repeat -58px 0;
	padding:0 0 10px 30px;
	line-height:20px;
	position:relative;
	list-style:none;
	cursor:default;
	margin:0;
}
.services_content .list_content li:before {
	width:10px;
	height:10px;
	content:'\0000a0';
	position:absolute;
	left:4px;
	top:5px;
	background:rgba(0, 0, 0, 0.5);
}

/* --------------------------- */
/* ---- 10, CONTACT PAGE ----- */
/* --------------------------- */

.contact_content .text_content {
	float:left;
	width:360px;
}
.contact_content .entry {
	width:360px;
	font-size:18px;
	padding:15px 25px 0;
	height:140px;
	margin:0 -25px;
}
.contact_content .entry p {
	display:block;
	padding:0 0 16px;
	line-height:22px;
}
.contact_content .entry span {
	float:right;
	color:#000;
}
.contact_content p.note {
	padding:0 0 10px;
	line-height:22px;
	margin:-10px 0 0;
}
.contact_content form {
	position:relative;
}
.contact_content form fieldset {
	position:relative;
}
.contact_content .notification_ok {
	width:360px;
	display:block;
	text-align:center;
	color:#fff;
	font-size:14px;
	height:18px;
	padding:8px 0;
	line-height:18px;
	background:rgba(0, 0, 0, 0.5);
}
.contact_content .name_border, .contact_content .email_border, .contact_content .message_border {
	width:344px;
	display:block;
	position:absolute;
	top:0;
	opacity:0.5;
	filter:alpha(opacity=50);
	padding:8px;
	height:18px;
	left:0;
	background:#F00;
}
.contact_content .name_border {
	top:0;
}
.contact_content .email_border {
	top:49px;
}
.contact_content .message_border {
	height:117px;
	top:98px;
}
.contact_content form input[type=text] {
	background:rgba(0, 0, 0, 0.5);
	border:0;
	display:block;
	width:344px;
	position:relative;
	z-index:9;
	margin:0 0 15px;
	padding:8px;
	height:18px;
	color:rgba(225, 225, 225, 0.7);
	font-size:12px;
	line-height:18px;
}
.contact_content form input[type=submit] {
	background:rgba(225, 225, 225, 0.5);
	border:0;
	display:block;
	position:relative;
	z-index:9;
	float:left;
	cursor:pointer;
	margin:0;
	height:30px;
	padding:0 10px;
	color:rgba(0, 0, 0, 0.7);
	font-size:15px;
	line-height:30px;
}
.contact_content form input[type=submit]:hover {
	background-color:rgba(0, 0, 0, 0.5);
	color:#fff;
}
.contact_content form textarea {
	background:rgba(0, 0, 0, 0.5);
	border:0;
	position:relative;
	z-index:9;
	display:block;
	width:344px;
	margin:0 0 15px;
	padding:8px;
	resize:none;
	height:117px;
	color:rgba(225, 225, 225, 0.7);
	font-size:12px;
	line-height:18px;
}
.contact_content .map_content {
	float:right;
	width:520px;
	height:480px;
	margin:-12px -23px -23px;
	text-align:center;
	color:#000;
	padding:23px;
	background:	url(../images/bgr_map.png) no-repeat;
}
.contact_content .map_content h2 {
	color:#000;
}
.contact_content .map_content .bMapLoadMsg h2 {
	color:#000;
	line-height:480px;
}

/* --------------------------- */
/* ------- 11. FOOTER -------- */
/* --------------------------- */

#footer-container {
	position:fixed;
	background-color:rgba(0, 0, 0, 0.2);
	bottom:0;
	border-top:1px solid rgba(0, 0, 0, 0.3);
	left:0;
	width:100%;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	padding:15px 0;
	text-align:center;
	color:#fff;
	z-index:99;
}
.ie7 #footer-container, .ie8 #footer-container {
	border:0;
	background:transparent;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000, endColorstr=#30000000);
	zoom:1;
}
#footer-container p, #footer-container ul, #footer-container li {
	display:inline;
}
#footer-container ul li {
	padding:0 5px;
}
#footer-container a.home {
	margin:0 4px 0 15px;
}
#footer-container a.home:before {
	display:inline;
	content:"·";
	position:relative;
	left:-8px;
	color:#fff;
}
#footer-container a {
	color:#fff;
}
#footer-container a.current, #footer-container a:hover {
	color:#000;
}

/* --------------------------- */
/* ------ 12. PAGINATION ----- */
/* --------------------------- */

.pagination_nav {
	float:right;
	height:30px;
	position:absolute;
	top:15px;
	right:2px;
	padding:23px;
	z-index:9;
}
.pagination_nav .innernav {
	float:left;
}
.pagination_nav a {
	float:left;
	opacity:0.5;
	filter:alpha(opacity=50);
	overflow:hidden;
	position:relative;
	margin:0 0 0 10px;
	float:left;
	background:#fff;
	position:relative;
	font-size:15px;
	color:#333;
	text-shadow:0px 0px 1px #333;
	line-height:30px;
	width:30px;
	height:30px;
	text-align:center;
}
.pagination_nav a.next, .pagination_nav a.prev {
	font-family:'WebSymbolsRegular', cursive;
	font-size:20px;
	line-height:27px;
}
.ie .pagination_nav a.next, .ie .pagination_nav a.prev {
	line-height:31px;
}
.pagination_nav a.activeSlide, .pagination_nav a:hover {
	background-color:rgba(0, 0, 0, 0.5);
	z-index:999;
	color:#fff;
	opacity:0.8;
	filter:alpha(opacity=80);
}
.pagination_nav a.next {
	float:right;
}

/* --------------------------- */
/* --- 13. jQuery SCROLLBAR -- */
/* --------------------------- */

.jspContainer {
	overflow:hidden;
	position:relative;
}
.jspPane {
	position:absolute;
	overflow:hidden;
	outline:none;
}
.jspScrollable {
	outline:none;
}
.jspVerticalBar {
	position:absolute;
	top:0;
	right:0;
	width:10px;
	height:100%;
}
.jspTrack {
	background:url(../images/bgr_scroller.png) repeat;
	position:relative;
}
.jspDrag {
	background:url(../images/bgr_scroller.png) repeat;
	position:relative;
	top:0;
	left:0;
	cursor:pointer;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
	float:left;
	height:100%;
}
.jspHorizontalBar {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:10px;
	background:url(../images/bgr_scroller.png) repeat;
}
.jspHorizontalBar .jspCap {
	float:left;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
	float:left;
	background:url(../images/bgr_scroller.png) repeat;
	height:100%;
}

/* --------------------------- */
/* ----- 14. PRINT MEDIA ----- */
/* --------------------------- */

@media print {
	* { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important;
	-ms-filter:none !important; } 
	a, a:visited { color:#444 !important; text-decoration:underline; }
	a[href]:after { content:" (" attr(href) ")"; }
	abbr[title]:after { content:" (" attr(title) ")"; }
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }  
	pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
	thead { display:table-header-group; }
	tr, img { page-break-inside:avoid; }
	@page { margin:0.5cm; }
	p, h2, h3 { orphans:3; widows:3; }
	h2, h3{ page-break-after:avoid; }
	.share_box, #back{ display:none; }
}

/* --------------------------- */
/* ------ 15. FONT-FACE ------ */
/* --------------------------- */

@font-face {
	font-family:'WebSymbolsRegular';
	src:url('fonts/websymbols-regular-webfont.eot');
	src:url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('fonts/websymbols-regular-webfont.woff') format('woff'),
		url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
		url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	font-weight:normal;
	font-style:normal;
}

/* --------------------------- */
/* ----- TEMPLATE STYLE ------ */
/* --------------------------- */

.template_select {
	position:fixed;
	top:50px;
	right:-30px;
	color:#000;
	width:30px;
	padding:0 0 0 65px;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	z-index:9999;
}
#picker, #picker2 {
	display:none;
	margin:0 0 0 -10px;
}
.template_select .feature_color {
	overflow:hidden;
}
.template_select .control {
	float:left;
	background:url(../images/ico_ts_control.png) no-repeat 0 -50px;
	height:50px;
	width:50px;
	position:absolute;
	left:15px;
	top:0;
}
.template_select .control_hide {
	background:url(../images/ico_ts_control.png) no-repeat;
}
.template_select form {
	padding:8px 20px 10px 30px;
	width:180px;
	background:#fff;
}
.template_select ul {
	float:left;
	padding:0 0 10px;
	overflow:hidden;
	margin:0 -10px 0 0;
	list-style:none;
}
.template_select li {
	float:left;
	width:27px;
	height:15px;
	margin:0;
	padding:7px 10px 0 0;
	list-style:none;
}
.template_select li a {
	display:block;
	width:27px;
	height:15px;
}
.template_select h3 {
	margin:0 0 10px -10px;
	display:block;
	padding:10px 0 0;
	line-height:14px;
	font-size:14px;
}
.template_select label {
	margin:0 0 10px -10px;
	display:block;
	padding:10px 0 0;
	line-height:14px;
	font-size:14px;
}
.template_select input {
	display:block;
	width:27px;
	height:15px;
	border:0;
	padding:0;
	cursor:pointer;
	text-indent:-999em;
	background-image:url(../images/ico_colors.png);
}
.template_select select {
	margin:0 0 10px;
	font-size:11px;
	width:180px;
	color:#000;
	padding:3px 5px;
	line-height:11px;
}
.template_select form {
	position:relative;
}