/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

@import url(../warp/css/tools.css);


/* Buttons (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

/* Default */
.button-default {
	padding: 3px 10px;
	border: 1px solid #ddd;
}

/* Primary */
.button-primary {
	padding: 3px 10px;
	background: #dc5800;
	color: #FFF;
}

.button-primary:hover {
	color: #FFF;
	background: #383838;
}


.button, .button:visited {
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}

.mybutton, .mybutton:visited {
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	box-shadow: 0 1px 2px rgba(0,0,0,.5);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        border-bottom: 1px solid rgba(0,0,0,0.25);
	text-decoration: none;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}
 
	.mybutton:hover							{ color: #fff; }
	.mybutton:active							{ top: 1px; }
	.small.mybutton, .small.mybutton:visited 			{ font-size: 11px}
	.mybutton, .mybutton:visited,
	.medium.mybutton, .medium.mybutton:visited 		{ font-size: 13px; 
												  font-weight: bold; 
												  line-height: 1; 
												  text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
												  }
												  
	.large.mybutton, .large.mybutton:visited 			{ font-size: 14px; 
													  padding: 8px 14px 9px; }
													  
	.big.mybutton, .big.mybutton:visited 			{ font-size: 34px; 
													  padding: 8px 14px 9px; }
	
	.pink.mybutton, .pink.mybutton:visited		        { background-color: #fa44af; }
	.pink.mybutton:hover							{ background-color: #c0428c; }
	.green.mybutton, .green.mybutton:visited		{ background-color: #83b742; }
	.green.mybutton:hover						        { background-color: #66a334; }
	.red.mybutton, .red.mybutton:visited			{ background-color: #d71500; }
	.red.mybutton:hover							{ background-color: #b41301; }
	.orange.mybutton, .orange.mybutton:visited		{ background-color: #fd550f; }
	.orange.mybutton:hover						{ background-color: #ce4e20; }
	.blue.mybutton, .blue.mybutton:visited		        { background-color: #279ce5; }
	.blue.mybutton:hover							{ background-color: #1e72d0; }
	.yellow.mybutton, .yellow.mybutton:visited		{ background-color: #ffd015; }
	.yellow.mybutton:hover						{ background-color: #d4ac0e; }
	.purple.mybutton, .purple.mybutton:visited		{ background-color: #d800ff; }
	.purple.mybutton:hover						{ background-color: #c130db; }
	.pattern.mybutton, .pattern.mybutton:visited		        { background-image: url(../images/pattern.png); }
	.pattern.mybutton:hover						        { background-image: url(../images/pattern-lite.png); }
	.dark.mybutton, .dark.mybutton:visited		        { background-color: #424446; }
	.dark.mybutton:hover						        { background-color: #2f3132; }
	.lite.mybutton, .lite.mybutton:visited		        { background-color: #9ea0a2; }
	.lite.mybutton:hover						        { background-color: #949698; }


/* Images and Objects (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

img.border-box { border: 1px solid #ddd; }


/* Lists and Tables (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

/* Line */
ul.line > li { border-top: 1px solid #ddd; }
ul.line > li:first-child { border: none; }

/* Check */
ul.check > li {
	padding: 4px 0 0 30px;
	background: url(../images/tools/list_check.png) 0 0 no-repeat;
}

/* Zebra List and Table */
ul.zebra > li,
table.zebra tbody td { border-bottom: 1px solid #ddd; }
ul.zebra > li:first-child,
table.zebra tbody tr:first-child td { border-top: 1px solid #ddd; }

ul.zebra > li.odd,
table.zebra tbody tr.odd { background: #fafafa; }
ul.zebra > li:nth-of-type(odd),
table.zebra tbody tr:nth-of-type(odd) { background: #fafafa; }

table.zebra caption { color: #999; }


/* Definition Lists
----------------------------------------------------------------------------------------------------*/

dl.separator dt {	
	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;
	text-transform: uppercase;
}

/* border code because of RTL */
dl.separator dd {
	padding-top: 5px;
	padding-bottom: 5px;
	border-width: 0 0 0 1px;
	border-style: solid;
	border-color: #DDD;
}

dl.separator dt:before {
	content: "";
	position: absolute;
	top: 0;
	right: -15px;
	width: 30px;
	border-top: 1px solid #DDD;
}

dl.separator dt:after {
	content: "";
	position:absolute;
	top: -3px;
	right: -3px;
	width: 5px;
	height: 5px;
	background: #FFF;
	border: 1px solid #DDD;
	border-radius:6px;
}

dl.separator dt:first-child:before,
dl.separator dt:first-child:after { display: none; }


/* Text
----------------------------------------------------------------------------------------------------*/

/* Inline Text Box */
em.box { 
	border: 1px dotted #bbb;
	background: #fafafa;
	color: #444;
}

/* Dotted Horizontal Rule */
hr.dotted { background: url(../images/tools/line_dotted.png) 0 0 repeat-x; }


/* Boxes
----------------------------------------------------------------------------------------------------*/

.box-content {
	background: #fafafa;
	border: 1px solid #ddd;
}

.box-note,
.box-info,
.box-warning,
.box-hint,
.box-download {
	background: #fafafa;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.box-info {
	background: #ebf5fa url(../images/tools/box_info.png) 0 0 no-repeat;
	border-color: #d2dce1;
}

.box-warning {
	background: #fff0eb url(../images/tools/box_warning.png) 0 0 no-repeat;
	border-color: #ffd7cd;
}

.box-hint {
	background: #fffae6 url(../images/tools/box_hint.png) 0 0 no-repeat;
	border-color: #fae6be;
}

.box-download {
	background: #faffe6 url(../images/tools/box_download.png) 0 0 no-repeat;
	border-color: #dce6be;
}


/* Forms (Needed for System Markup)
----------------------------------------------------------------------------------------------------*/

form.box fieldset { border: 1px solid #ddd; }
form.box legend { background: #fff; }

form.style input[type="button"],  
form.style input[type="submit"],  
form.style button  {
border: none;
        padding: 3px 10px;
        height: 40px;
	background: #dc5800;
        text-transform:uppercase;
	color: #FFF;

}

form.style input[type="button"],  
form.style input[type="submit"],   
form.style button:hover {
       height: 40px;
       text-transform:uppercase;
       color: #FFF;
       background: #383838;
}


/* Social Icons
----------------------------------------------------------------------------------------------------*/
ul.social-icons {
 list-style: none;
 padding: 5px;
 overflow: hidden;
}
 
.social-icons li { 
 float: left;
 margin-left: 5px; 
}
 
.social-icons li:first-child { margin-left: 0; }
 
.social-icons li a {
 display: block;
 width: 40px;
 height: 40px;
 background: url(../images/icons_social.png) 0 0 no-repeat;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .deviantart a:hover { background-position: 0 -40px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .digg a { background-position: 0 -80px; }
.social-icons .digg a:hover { background-position: 0 -120px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .dribbble a { background-position: 0 -160px; }
.social-icons .dribbble a:hover { background-position: 0 -200px;
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
 }
 
.social-icons .facebook a { background-position: 0 -240px; }
.social-icons .facebook a:hover { background-position: 0 -280px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .flickr a { background-position: 0 -320px; }
.social-icons .flickr a:hover { background-position: 0 -360px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .google-plus a { background-position: 0 -400px; }
.social-icons .google-plus a:hover { background-position: 0 -440px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .icq a { background-position: 0 -480px; }
.social-icons .icq a:hover { background-position: 0 -520px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
 
.social-icons .linkedin a { background-position: 0 -560px; }
.social-icons .linkedin a:hover { background-position: 0 -600px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .picasa a { background-position: 0 -640px; }
.social-icons .picasa a:hover { background-position: 0 -680px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .pinterest a { background-position: 0 -720px; }
.social-icons .pinterest a:hover { background-position: 0 -760px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .rss a { background-position: 0 -800px; }
.social-icons .rss a:hover { background-position: 0 -840px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .skype a { background-position: 0 -880px; }
.social-icons .skype a:hover { background-position: 0 -920px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .twitter a { background-position: 0 -960px; }
.social-icons .twitter a:hover { background-position: 0 -1000px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .vimeo a { background-position: 0 -1040px; }
.social-icons .vimeo a:hover { background-position: 0 -1080px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .wordpress a { background-position: 0 -1120px; }
.social-icons .wordpress a:hover { background-position: 0 -1160px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.social-icons .youtube a { background-position: 0 -1200px; }
.social-icons .youtube a:hover { background-position: 0 -1240px; 
-moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); 
  -o-transform: rotateY(0deg); 
  -ms-transform: rotateY(0deg); 
  transform: rotateY(0deg); 
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/*  
 * blockquotes  
 */  
 
blockquote:before,
blockquote:after { content: ""; }
 
blockquote {
 padding-left: 60px;
 padding-right: 0;
 font-style: normal;
 line-height: 60px;
 font-size: 20px;
 background-image: url(../images/block.png);
 background-position:  0 -5px;
 background-repeat: no-repeat;
 border-right: 3px solid;
} 
 
blockquote:hover {
 padding-left: 60px;
 padding-right: 0;
 font-style: normal;
 line-height: 60px;
 font-size: 20px;
 background-image: url(../images/block-over.png);
 background-position: 0 -5px;
 background-repeat: no-repeat;
 border-right: 3px solid;
 border-right-color: #a8a8a8;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }


/*  GRID OF TWO   */

.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

@media only screen and (max-width: 767px) {
	.span_2_of_2 { width: 100%;}
	.span_1_of_2 { width: 100%; }
}

/*  GRID OF THREE  */

.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

@media only screen and (max-width: 767px) {
.span_3_of_3 { width: 100%;}
.span_2_of_3 { width: 100%; }
.span_1_of_3 { width: 100%; }
}


/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

@media only screen and (max-width: 767px) {
.span_4_of_4 { width: 100%; }
.span_3_of_4 { width: 100%; }
.span_2_of_4 { width: 100%; }
.span_1_of_4 { width: 100%; }
}

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}