@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@ColorFirst: #E1C0B3;

@NormalFont: 'PT Sans', sans-serif;
@HeaderFont: 'Terminal Dosis', sans-serif;
@TrebuchetFont: 'PT Sans', sans-serif;

/*Dark Them Variables*/
@ColorSecond: #FFFFFF;
@BackgroundColor: #000;
@ThemePrefix: "dark";
@LineColor: #6e2a11;
@OutLine: #6e2a11;
@TextColor: #cccccc;
@PasifButtonBg: #232323;

/*Light Them Variables*/
/*
@ColorSecond: #000000;
@BackgroundColor: #ffffff;
@ThemePrefix: "light";
@LineColor: #999999;
@OutLine: #000000;
@TextColor: #333333;
@PasifButtonBg: #555555;
*/

/* REF: Please Dont Change this styles*/
#REF_ColorFirst{color:@ColorFirst; display:none; }
#REF_ColorSecond{color:@ColorSecond; display:none; }
/*REF*/


/******** CSS Start ********/

/*Body Loading*/
#bodyLoading{
	width:100%;
	position:absolute;
	left:0;
	top:0;
	text-align:center;
}
#loading{
	margin:200px auto 0px auto;
	text-align:center;
}
/* General */
* {
	-webkit-user-drag: none;
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
	font-size:14px;
	line-height:1.4em;
	color: @TextColor;
	font-family: @TrebuchetFont;
}
* html .clearfix {
	height: 1%; /* IE5-6 */
	}
*+html .clearfix {
	display: inline-block; /* IE7not8 */
	}
.clearfix:after { /* FF, IE8, O, S, etc. */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
::selection {
        background: @ColorFirst; /* Safari */
		color: @ColorSecond;  
        }
::-moz-selection {
        background: @ColorFirst; /* Firefox */
		color: @ColorSecond;  
}
a{
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
a:link, a:visited{
	text-decoration:underline;
	color: darken(@TextColor, 10%);
}
a:hover, a:active{
	text-decoration:none;
}

body{
	background: @BackgroundColor;
	overflow:hidden;
}
html {
	overflow:hidden;
	background: @BackgroundColor;
}

#fullControl{
	opacity:0;
	position:absolute;
	right:10px;
	top:100px;
}

#body-wrapper{
	width:100%;
	background-color: @BackgroundColor;
	text-align:center;
	overflow:hidden;
	position:relative;
	opacity:0;
}
#content{
	opacity:0;
	display:none;
	position:absolute;
	overflow:hidden;
	width:600px;
	left:0px;
	top:20px;
	padding:20px;
	background: url('images/@{ThemePrefix}-content-bg.png');
}
#contentBox{
	position:relative;
	overflow:hidden;
	text-align:left;
	width:600px;
}
#contentBoxScroll{
	top:20px;
	position:absolute;
	display:none;
	text-align:left;
	width:27px;
	background: url('images/@{ThemePrefix}-content-scroll-bg.png');
}
#contentBoxContainer{
	position:relative;
}
.dragcontainer{
	position:relative;
	height:700px;
}
.dragger{
	position:absolute;
	left:5px;
	width:17px;
	height:100px;
	background-color:@ColorFirst;
	cursor:pointer;
}
.scroll_up, .scroll_down{
	width:5px;
	height:6px;
	background-color:@ColorFirst;
	margin:6px 0 0 6px;
	background-image:url('images/scroll_arrow_up.png');
}
.scroll_down{
	background-image:url('images/scroll_arrow_down.png');
	margin:76px 0 6px 6px;
}
#closeButton:link, #closeButton:visited{
	display:block;
	width:27px;
	height:27px;
	background-image:url('images/@{ThemePrefix}-close_btn_bg.png');
}
#closeButton:hover, #closeButton:active{
	background-position:0 -27px;
}


#bgImages{
	list-style:none;
	position:absolute;
	left:0px;
	bottom:-50px;
	height:92px;
	background: url('images/dark-bgImages.png');
}
#bgImages li{
	position:relative;
	margin:0;
	float:left;
	padding:3px;
}
#bgImages img.thumb{
	height:80px;
	margin:0;
	padding:3px 0 0 0;
	cursor:pointer;
	opacity:.30;
	border-top:3px solid #666;
}
#bgImages li .thumbType{
	opacity:0;
	position:absolute;
	width:20px;
	height:20px;
	right:3px;
	bottom:7px;
	background-color:@ColorFirst;
}
#bgImages li .thumbVideo{
	opacity:0;
	background-image: url('images/thumb_video.png');
}
#bgImages li .thumbImage{
	opacity:0;
	background-image: url('images/thumb_image.png');
}
#bgImages img.source, #bgImages iframe{
	display:none;
}
#bgImages h3, #bgImages p{
	display:none;
}
#bgImages li.active img.thumb{
	border-top:3px solid @ColorFirst;
}
#bgImage{
	position:absolute;
	left:0;
	top:0;
}
#bgText{
	display:inline-block;
	text-align:left;
	position:absolute;
	left:7px;
	bottom:64px;
	padding:10px;
}
#bgText .headerText{
	display:inline;
	font-size:54px;
	line-height:54px;
	color:@ColorFirst;
	padding:0 10px;
	font-weight:700;
	font-family: @TrebuchetFont;
	text-shadow:2px 2px rgba(0,0,0,.5);
}
#bgText .subText{
	margin-top:10px;
	display:inline;
	font-size:16px;
	line-height:30px;
	padding:0 10px;
	text-transform:uppercase;
	color:#fff;
	font-family: @TrebuchetFont;
	font-weight:700;
	text-shadow:2px 2px rgba(0,0,0,.5);
}
#bgImageWrapper{
	position:relative;
}
#bgImageWrapper img{
	position:absolute;
}
#ytVideo, #vmVideo, #jwVideo{
	position:absolute;
}
#bgPattern{
	position:absolute;
	background: url('images/pattern.png');
}
.bgCanvas{
	position:absolute;
	left:0;
	top:0;
}

/*Image Animate*/
.hoverWrapperBg{
	opacity:.50;
	background-color:@BackgroundColor;
	box-shadow: -5px -5px @ColorFirst inset, 5px 5px @ColorFirst inset;
	position:absolute;
	width:100%;
	left:0px;
	top:0px;
}
.image_frame{
	position:relative;
	cursor:pointer;
}
.image_frame > a{
	display:block;
	padding:0;
	margin:0;
	font-size:0px;
}
.hoverWrapper{
	position:absolute;
	width:100%;
	left:0;
	top:0;
}
.hoverWrapper .link:link, 
.hoverWrapper .link:visited, 
.hoverWrapper .modal:link,
.hoverWrapper .modal:visited,
.hoverWrapper .modalVideo:link,
.hoverWrapper .modalVideo:visited{
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	background-color:@ColorFirst;
	display:block;
	width:33px;
	height:33px;
	position:absolute;
	bottom:5px;
}
.hoverWrapper .link:link, .hoverWrapper .link:visited{right:15px; background-image: url('images/imageLink.png');}
.hoverWrapper .modal:link, .hoverWrapper .modal:visited{right:49px;  background-image: url('images/imageModal.png');}
.hoverWrapper .modalVideo:link, .hoverWrapper .modalVideo:visited{right:49px; background-image: url('images/imageVideo.png');}
.hoverWrapper .link:hover, .hoverWrapper .link:active,
.hoverWrapper .modal:hover, .hoverWrapper .modal:active,
.hoverWrapper .modalVideo:hover, .hoverWrapper .modalVideo:active{
background-position:0 -33px;
box-shadow: -2px -2px rgba(0,0,0,.5) inset, 2px 2px rgba(0,0,0,.5) inset;
}

.blogdatemeta{
	height:33px;
	padding:10px 0;
	border-top:1px solid @LineColor;
	border-bottom:1px solid @LineColor;
}
.blogdate{
	float:left;
	display:inline-block;
	line-height:33px;
	font-size:18px;
	color:@ColorSecond;
	font-family:@HeaderFont;
}
.hoverWrapper h3{
	opacity:0;
	text-align:left;
	padding:15px;
	margin:10px;
	font-size:18x;
	line-height:20px;
	color:@ColorSecond;
	background-color:@ColorFirst;
	font-family: @HeaderFont;
}
.hoverWrapper .enter-text{
	opacity:0;
	text-align:left;
	padding:0px 15px 10px 15px;
	font-size:11px;
}

/*Play List*/
a.playerBtn:link, a.playerBtn:visited{
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	display:block; 
	width:16px; height:16px;
	border:1px solid #000;
	background-color:@PasifButtonBg;
	box-shadow: inset -1px -1px rgba(0,0,0, 0.5), inset 1px 1px rgba(255,255,255, 0.1) ;
}
a.playerBtn:hover, a.playerBtn:active{
	background-color:@ColorFirst;
	background-position:0 -16px;
}
#playerController .play{background-image:url('images/icon_player_play.png');}
#playerController .pause{background-image:url('images/icon_player_pause.png');}
#playerController .stop{background-image:url('images/icon_player_stop.png');}
#playerController .loop{background-image:url('images/icon_player_loop.png');}
#playerController .nextsong{background-image:url('images/icon_player_nextsong.png');}
#playerController .mute{background-image:url('images/icon_player_mute.png');  margin-left:2px;}
#playerController .unmute{background-image:url('images/icon_player_unmute.png'); margin-left:2px;}

#playList{
	display:inline-block;
	left:0;
	top:0;
	background: url('images/dark-content-bg.png');
}

#playWrapper{
	display:inline-block;
	padding:10px;
	position:relative;
	width:300px;
	background-image: url('images/dark-content-bg.png');
	transition: all 0.5s ease;
	margin-right:-480px;
}

#playWrapper:hover{
	margin-right:0px;
}

#playerBar{
	position:relative;
	width:100px;
	height:16px;
}
#playerBarActive{
	position:absolute;
	top:0;
	left:0;
	height:16px;
	width:0px;
	background-color:@ColorFirst;
}
#volumeBar{
	position:relative;
	width:50px;
	height:16px;
}
#volumeBarActive{
	position:absolute;
	top:0;
	left:0;
	height:16px;
	width:0px;
	background-color:@ColorFirst;
}
#playListCloseIcon{
	padding:5px;
	position:absolute;
	font-size:14px;
	font-family: @HeaderFont;
	background-color:@ColorFirst;
	color:@ColorSecond;
}
#playerSongName{
	padding:10px 0;
	border-bottom:3px solid @ColorFirst;
	margin-bottom:10px;
	
	font-size:14px;
	line-height:14px;
	font-family: @HeaderFont;
	color:@ColorFirst;
}
#playerController{
	margin-bottom:10px;
}
#playerController a{
	float:left;
	margin-right:1px;
}
#playerLoadBar{
	float:left;
	width:100px;
	height:16px;
	border:1px solid darken(@ColorSecond, 20%);
	margin-left:4px;
}
#volumeLoadBar{
	float:left;
	width:50px;
	height:16px;
	border:1px solid darken(@ColorSecond, 20%);
}
#playerSongDuration{
	float:left;
	width:53px;
	height:18px;
	margin-left:5px;
	margin-right:5px;
}
#playerSongDuration span{
	font-size:10px;
	font-family:'Arial';
	line-height:18px;
}
#playerSongDuration span.current{ color:@ColorFirst; }
#playerSongDuration span.total{ color:@ColorSecond; }
#playerController img{float:left; margin:4px 5px 0 5px;}
#audioList{
	margin-top:10px;
	clear:both;
}
#audioList ul {
	border-top:1px solid @LineColor;
	list-style:none;
	padding:1px;
}
#audioList ul li{
	cursor:pointer;
	line-height:28px;
	border-bottom:1px solid @LineColor;
}
#audioList ul li.active{
	background-color:@ColorFirst;
	color:@ColorSecond;
	text-indent:10px;
}
#audioList ul li.active > * {
	color:@ColorSecond;
}


/*Menu*/
#logo img{
	margin:0;
	padding:0;
	line-height:1em;
	
}
#logo{
text-align:left;
float:left;
display:inline-block;
/* background-color:@ColorFirst; */
padding:10px 0 0 0;
height:85px;
top:10px;
background-image: url('images/@{ThemePrefix}-menu-bg.png');
}

#menu-container{
	position:absolute;
	padding: 0;
	border:0;
	margin-left:50px;
}


#mainmenu{
	width:287px;
	margin:2px auto;
	position:relative;	
	float:left;
	background-color:@ColorFirst;
}
.alt{
	width:287px;
	height:52px;
	top:162px;
	position:relative;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:center;
	background-image: url('images/menualt.png') ;	
}

#mainmenu ul{
	list-style:none;
	float:left;
}
#mainmenu  ul > li{
	position:relative;
	margin-bottom:1px;
	text-align:center;
}
#mainmenu ul li a:link,
#mainmenu ul li a:visited{
	padding:3px;
	display:inline-block;
	width:287px;
	text-decoration:none;
	text-align:center;
}
#mainmenu ul li a:hover,
#mainmenu ul li a:active{
}
#mainmenu ul > li.active > a:link,
#mainmenu ul > li.active > a:visited{
}
#mainmenu ul li a span.title{
	display:inline-block;
	margin:0;
	padding:3px 10px 3px 10px;
	position:relative;
	color:@ColorFirst;
	font-size:14px;
	font-family: @TrebuchetFont;
	font-weight: bold;
}
#mainmenu ul > li > a{
	background-image: url('images/@{ThemePrefix}-menu-bg.png');
}
#mainmenu ul li ul li a:link,
#mainmenu ul li ul li a:visited{
}
#mainmenu ul li ul li a:hover,
#mainmenu ul li ul li a:active{
}
#mainmenu ul li ul li a span.title{
	color:@ColorFirst;
}
#mainmenu ul li a:hover span.title,
#mainmenu ul li a:active span.title,
#mainmenu ul > li.active > a:link span.title,
#mainmenu ul > li.active > a:visited span.title{
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	color:@ColorSecond;

}
#mainmenu ul li ul li a:hover span.title,
#mainmenu ul li ul li a:active span.title{
	color:@ColorSecond;

}
#mainmenu ul .description{
	display:none;
}
#mainmenu ul ul{	
	top:0;
}
#mainmenu ul ul li{
	float:left;
	margin-left:1px;
}

/* Footer */
#footer{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	background: url('images/@{ThemePrefix}-footer.png');
	height:32px;
	padding-top:1px;
}
#footertext{
	float:left;
	padding:0 10px;
	height:30px;
	line-height:30px;
	color:@TextColor;
}
#footeraudio{
	float:right;
}
#footeraudio a{
	float:left;
	margin-left:1px;
}
#footeraudio .soundmute{ display:none;}
#bgControl{
	display:inline-block;
	position:absolute;
	right:2px;
	top:0px;
	background-color:@ColorFirst;
	padding:1px;
	height:30px;
}
#bgControlCount{
	display:inline-block;
	padding:0 15px 0 10px;
	font-size:18px;
	line-height:30px;
	vertical-align:top;
	font-family:@TrebuchetFont;
	color:@ColorSecond;
}
#bgControlButtons{
	display:inline-block;
}
#bgControlButtons a{margin-right:1px;}
#bgControl .play, #bgControl .full, #bgControl .close, #bgControl .info{display:none;}
#bgControl .next:link, #bgControl .next:visited{ background-image: url('images/bgControlRight.png');}
#bgControl .prev:link, #bgControl .prev:visited{ background-image: url('images/bgControlLeft.png');}
#bgControl .pause:link, #bgControl .pause:visited{ background-image: url('images/bgControlPause.png');}
#bgControl .play:link, #bgControl .play:visited{ background-image: url('images/bgControlPlay.png');}
#bgControl .full:link, #bgControl .full:visited{ background-image: url('images/bgControlFull.png');}
#bgControl .fitte:link, #bgControl .fitte:visited{ background-image: url('images/bgControlFit.png');}
#bgControl .soundicon:link, #bgControl .soundicon:visited{display:none; background-image: url('images/icon_sound.png');} 
#bgControl .soundmute:link, #bgControl .soundmute:visited{display:none; background-image: url('images/icon_mute.png');} 


#bgControl .close:link, #bgControl .close:visited{ background-image: url('images/bgControlClose.png');}
#bgControl .info:link, #bgControl .info:visited{ background-image: url('images/bgControlInfo.png');}
#footeraudio .soundicon:link, #footeraudio .soundicon:visited{background-image: url('images/icon_sound.png');}
#footeraudio .soundmute:link, #footeraudio .soundmute:visited{background-image: url('images/icon_mute.png');}
#footeraudio .soundplaylist:link, #footeraudio .soundplaylist:visited{background-image: url('images/icon_playlist.png');}

#share{float:left;}
#share  ul{list-style:none;}
#share li{float:left; margin-right:1px;}
a.btnCtrl:link, a.btnCtrl:visited{
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	float:left;
	display:inline;
	width:30px; 
	height:30px;
	background-color:@PasifButtonBg;
	box-shadow: inset -1px -1px rgba(0,0,0, 0.5), inset 1px 1px rgba(255,255,255, 0.1) ;
}
a.btnCtrl:hover, a.btnCtrl:active{
	background-color:@ColorFirst;
	background-position:0 -30px;
}
#share .tw{background-image: url('images/icon_tw.png');}
#share .fb{background-image: url('images/icon_fb.png');}
#share .rss{background-image: url('images/icon_rss.png');}
#circleC{
	display:none;
	position:absolute;
	left:200px;
	top:100px;
}

/*BLOG*/
.blogitem{margin-top:20px;}
#content h1.caption{
	padding:0;
	font-family: @TrebuchetFont;
	font-size:24px;
	line-height:60px;
	color: @ColorSecond;
	border-bottom:1px solid @LineColor;
	border-top:3px solid @ColorFirst;
}
.blogimage{
	margin-top:20px;
	float:left;
}
.blogdateLeft{
	font-size:12px;
	padding-right:3px;
	margin-top:15px;
	float:left;
	border-right:1px solid #000;
	width:30px;
	color:#000;
	text-align:right;
}
.blogdateRight{
	font-size:12px;
	padding-left:3px;
	margin-top:15px;
	float:left;
	width:29px;
	text-align:left;
	color:#000;
}
.blogcontent{
	margin-top:5px;
	width:430px;
	float:left;
	margin-left:20px;
}
.blogimage h3{
	color:@ColorFirst;
	font-family: @TrebuchetFont;
	font-size:18px;
	line-height:1.4em;
}
.blogTop{clear:both;}
.blogTop hr{
	float:left;
	width:770px;
	margin-top:8px;
	height:3px;
	background-color:#333;
}
.blogTop a:link,
.blogTop a:visited{
	display:block;
	float:right;
	color:#333;
	font-family: @TrebuchetFont;
	font-size:12px;
	
	text-decoration:none;
}
.blogTop a:hover,
.blogTop a:active{
	color:#ffcc00;
}
.blogcontent p{
	margin-top:20px;
	font-size:11px;
	float:left;
}
.meta-links{
	float:right;
	display:inline-block;
}
.meta-author, .meta-comments, .meta-tags{
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	display:block;
	background-color:@ColorFirst;
	width:33px;
	height:33px;
	float:right;
	margin-left:1px;
}
.meta-author:link, .meta-author:visited{ background-image:url('images/blogicon-author.png');}
.meta-comments:link, .meta-comments:visited{ background-image:url('images/blogicon-comment.png');}
.meta-tags:link, .meta-tags:visited{ background-image:url('images/blogicon-tag.png');}
.meta-author:hover, .meta-author:active,
.meta-comments:hover, .meta-comments:active,
.meta-tags:hover, .meta-tags:active{ 
background-position:0 -33px;
box-shadow: -2px -2px rgba(0,0,0,.5) inset, 2px 2px rgba(0,0,0,.5) inset;}

.morelink:link,
.morelink:visited{
	display:inline-block;
	font-size:14px;
	background-color:@ColorFirst;
	color:@ColorSecond;
	padding:5px 9px;
	text-decoration:none;
	margin-top:20px;
}
.morelink:hover,
.morelink:active{
	box-shadow: -2px -2px rgba(0,0,0,.5) inset, 2px 2px rgba(0,0,0,.5) inset;
}
.meta-tips{
	position:absolute;
	color:@ColorSecond;
	padding:5px 10px;
	background-color:@ColorFirst;
}
.meta-tips span{
	width:10px;
	height:10px;
	position:absolute;
	bottom:-6px;
	right:0px;
}
.meta-tips span svg polygon{
	fill:@ColorFirst;
}

/*About*/
.personName{display:block; float:left; padding-top:14px;}
.personName h3{font-size:12px; line-height:16px;}
.personName span{font-size:11px; line-height:11px;}
.personContact{clear:both; display:block; float:right; padding-top:16px; }
.personContact a:link, .personContact a:visited{background-color:@ColorFirst; width:33px; height:33px; display:block; float:left; margin-left:2px;}
.personContact a:hover, .personContact a:active{background-position:0 -33px; box-shadow: -2px -2px rgba(0,0,0,.5) inset, 2px 2px rgba(0,0,0,.5) inset;}
.personFacebook{background-image:url('images/person-facebook.png');}
.personTwitter{background-image:url('images/person-twitter.png');}
.personEmail{background-image:url('images/person-email.png');}

/*Portfolio*/
.portfolioitems{
	list-style:none;
	width:620px;
	overflow:hidden;
}
.portfolio1columns li{
	float:left;
	margin: 20px 0 0 0;
}
.portfolio2columns li{
	float:left;
	margin: 20px 20px 0 0;
}
.portfolio3columns li{
	float:left;
	margin: 20px 20px 0 0;
}
.portfolio4columns li{
	float:left;
	margin: 20px 20px 0 0;
}
.portfolioFilter{
	width:600px;
	list-style:none;
	margin:20px 0 0 0;
	height:30px;
	padding-bottom:20px;
	border-bottom:1px solid @LineColor;
}
.portfolioFilter li{ float:left; margin-right:10px;}
.portfolioFilter li a:link,
.portfolioFilter li a:visited{
	display:block;
	background-color:@ColorFirst; 
	text-decoration:none;
	color:@ColorSecond;
	font-family: @TrebuchetFont;
	font-size:12px;
	line-height:30px;
	padding:0 15px;
}
.portfolioFilter li a:hover,
.portfolioFilter li a:active{
	box-shadow: -2px -2px rgba(0,0,0,.5) inset, 2px 2px rgba(0,0,0,.5) inset;
}

/*Columns*/
.c1,
.c1of2, .c1of2_end, 
.c1of3, .c1of3_end, .c2of3, .c2of3_end,
.c1of4, .c1of4_end, .c2of4, .c2of4_end, .c3of4,
.c3of4_end{float:left; margin-top:20px;}

.c1{clear:both; float:left; width:600px;}
.c1of2{float:left; width:280px; margin-right:40px;}
.c1of2_end{float:left; width:280px;}
.c1of3{float:left; width:173px; margin-right:40px;}
.c1of3_end{float:left; width:173px;}
.c2of3{float:left; width:386px; margin-right:40px;}
.c2of3_end{float:left; width:386px;}
.c1of4{float:left; width:120px; margin-right:40px;}
.c1of4_end{float:left; width:120px;}
.c2of4{float:left; width:280px; margin-right:40px;}
.c2of4_end{float:left; width:280px;}
.c3of4{float:left; width:440px; margin-right:40px;}
.c3of4_end{float:left; width:440px;}

/*STYLES*/
h1, h2, h3, h4, h5, h6{
	clear:both;
	font-family: @TrebuchetFont;
	font-weight:normal;
	color: @ColorFirst;
}
h1{font-size:24px;}
h2{font-size:20px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size: 12px;}
.divider{clear:both; height:20px;}
.vericaldivider{display:inline-block; width:20px; }
hr.seperator{clear:both; float:left; margin-top:20px; height:1px; background-color:@LineColor; width:100%; }
hr.seperatorBold{clear:both; float:left; margin-top:20px; height:3px; background-color:@ColorFirst; width:100%; }
.quotes-one{
	margin-left:20px;
	border-left:3px solid @ColorFirst;
	padding-left:20px;
}
.quotes-two{
	padding-left:35px;
	background: url('images/quote-bg.png') 0px 5px no-repeat;
}
.dropcap{
	text-align:center;
	display:block;
	float:left;
	font-weight:500;
	font-size:28px;
	line-height:40px;
	width:40px;
	font-family: @TrebuchetFont;
	background-color: @ColorFirst;
	color:@ColorSecond;
	padding:0;
	margin:7px 5px 0 0;
}
.quotes-writer{color:#fff;}
.right{float:right; margin:5px 0 5px 15px;}
.left{float:left; margin:5px 15px 5px 0px;}
span.highlight{background-color:@ColorFirst; color:@ColorSecond; padding:0px 2px;}
span.textlight{color:@ColorFirst;}
ul.list{list-style:none;}
ul.list li{padding: 3px 0 3px 20px;}
ul.check li{ background:url('images/list-check.png') left 6px no-repeat;}
ul.cross li{ background:url('images/list-cross.png') left 7px no-repeat;}
ul.arrow li{ background:url('images/list-arrow.png') left 8px no-repeat;}
ul.circle li{ background:url('images/list-circle.png') left 7px no-repeat;}

.infobox, .attentionbox, .downloadbox, .crossbox{
	padding:20px 20px 20px 75px;
	border:2px solid #333;
}
.infobox{
	border-color:#0066cc;
	color:#0066cc;
	background: url('images/box-info.png') 20px 24px no-repeat;
}
.attentionbox{
	border-color:#ffcc00;
	color:#ffcc00;
	background: url('images/box-attention.png') 20px 24px no-repeat;
}
.downloadbox{
	border-color:#009900;
	color:#009900;
	background: url('images/box-download.png') 20px 24px no-repeat;
}
.crossbox{
	border-color:#ff0000;
	color:#ff0000;
	background: url('images/box-cross.png') 20px 24px no-repeat;
}

.tipbox{
	position:absolute;
	color:#000;
	padding:10px 10px;
	background-color:#ffcc00;
	border-radius:6px;
}
.tipbox span{
	width:9px;
	height:5px;
	background:url('images/tips-bottom.png') center center no-repeat;
	position:absolute;
	bottom:-5px;
	left:50%;
}

div.item_two_one{
	clear:both;
	float:left;
	width:80px;
	padding:12px 5px 12px 0;
	vertical-align:top;
	font-family: @TrebuchetFont;
	font-size:16px;
}
div.item_two_two{
	float:left;
	width:170px;
	margin-left:10px;
	padding:15px 5px;
	border-bottom: 1px solid #333;
	vertical-align:top;
}

/*Buttons*/
.buttonSmall{
	display:inline-block;
	background: url('images/button-white-left.png') left top no-repeat;
	height:26px;
	padding-left:5px;
}
.buttonSmall a{
	background: url('images/button-white-center.png') left top repeat-x;
	float:left;
	font-size:12px;
	line-height:26px;
	padding:0 10px;
	text-decoration:none;
	font-family: @TrebuchetFont;
	
	color:#ffffff;
}
.buttonSmall span{
	float:left;
	background: url('images/button-white-right.png') left top no-repeat;
	height:26px;
	width:5px;
}

.smallBlack{background-image: url('images/button-black-left.png'); }
.smallBlack a{background-image: url('images/button-black-center.png'); }
.smallBlack span{background-image: url('images/button-black-right.png'); }

.smallWhite{background-image: url('images/button-white-left.png'); }
.smallWhite a{background-image: url('images/button-white-center.png'); color:#333333;}
.smallWhite span{background-image: url('images/button-white-right.png'); }

.smallRed{background-image: url('images/button-red-left.png'); }
.smallRed a{background-image: url('images/button-red-center.png'); }
.smallRed span{background-image: url('images/button-red-right.png'); }

.smallGreen{background-image: url('images/button-green-left.png'); }
.smallGreen a{background-image: url('images/button-green-center.png'); }
.smallGreen span{background-image: url('images/button-green-right.png'); }

.smallBlue{background-image: url('images/button-blue-left.png'); }
.smallBlue a{background-image: url('images/button-blue-center.png'); }
.smallBlue span{background-image: url('images/button-blue-right.png'); }

.buttonMedium{
	display:inline-block;
	background: url('images/buttonM-white-left.png') left top no-repeat;
	height:36px;
	padding-left:5px;
}
.buttonMedium a{
	background: url('images/buttonM-white-center.png') left top repeat-x;
	float:left;
	font-size:16px;
	line-height:36px;
	padding:0 10px;
	text-decoration:none;
	font-family: @TrebuchetFont;
	
	color:#ffffff;
}
.buttonMedium span{
	float:left;
	background: url('images/buttonM-white-right.png') left top no-repeat;
	height:36px;
	width:5px;
}

.mediumBlack{background-image: url('images/buttonM-black-left.png'); }
.mediumBlack a{background-image: url('images/buttonM-black-center.png'); }
.mediumBlack span{background-image: url('images/buttonM-black-right.png'); }

.mediumWhite{background-image: url('images/buttonM-white-left.png'); }
.mediumWhite a{background-image: url('images/buttonM-white-center.png'); color:#333333;}
.mediumWhite span{background-image: url('images/buttonM-white-right.png'); }

.mediumRed{background-image: url('images/buttonM-red-left.png'); }
.mediumRed a{background-image: url('images/buttonM-red-center.png'); }
.mediumRed span{background-image: url('images/buttonM-red-right.png'); }

.mediumGreen{background-image: url('images/buttonM-green-left.png'); }
.mediumGreen a{background-image: url('images/buttonM-green-center.png'); }
.mediumGreen span{background-image: url('images/buttonM-green-right.png'); }

.mediumBlue{background-image: url('images/buttonM-blue-left.png'); }
.mediumBlue a{background-image: url('images/buttonM-blue-center.png'); }
.mediumBlue span{background-image: url('images/buttonM-blue-right.png'); }

/*CONTACT FORM*/
.dform p{
	display:block;
	clear:both;
	padding:5px 5px 5px 0;
}

.dFormInput{
	float:left;
	width:157px;
	padding:5px;
	margin-left:10px;
	border-top: 1px double #080808;
	border-left: 1px double #080808;
	border-right: 1px double #161616;
	border-bottom: 1px double #161616;
	background-color:#0D0D0D;
	
}
.dFormInputFocus{
	border:1px solid @ColorFirst;
}
.dform label{
	padding-top:0px;
	float:left;
	display:inline-block;
	width:95px;
	text-decoration:none;
	font-family: @TrebuchetFont;
	font-size:16px;
}
.dform input[type=text], .dform select, .dform textarea{
	background:none;
	width:100%;
}
.dform input[type=text]:focus, .dform select:focus, .dform textarea:focus{
}
.dform select{
}
.dform input[type=submit]{
	margin-left:10px;
}
.dform textarea{
	height:113px;
}
.dform label.error{
	clear:both;
	float:left;
	margin-left:95px;
	padding-left:10px;
	width:172px;
	color:@ColorFirst;
	font-weight:normal;
	font-size:11px;
}
.form_message{
	display:none;
	padding:5px;
	background-color:@ColorFirst;
	color:@ColorSecond;
}
div.form_input{
	float:left;
}
.dform .submitButton{
	display:block;
	margin:10px 0 0 10px;
	color:@ColorSecond;
	background-color:@ColorFirst;
	line-height:14px;
	padding:10px 20px;
	text-decoration:none;
	font-family: @HeaderFont;
	font-size:14px;
	text-transform:uppercase;
}
.dform .submitButton:hover{
	box-shadow: -2px -2px rgba(0,0,0,.5) inset, 2px 2px rgba(0,0,0,.5) inset;
}

/* Single Page **/
#singleRight{
	float:right;
	width:163px;
	padding-left:20px;
}
#singleLeft{
	float:left;
	margin-right:20px;
	width:394px;
}
#singleRight ul{
	padding-top:20px;
	list-style:none;
}
#singleRight ul li{
	padding-top:3px;
	height:33px;
	line-height:33px;
	margin-bottom:10px;
}
#singleRight ul li span{
	float:left;
	display:block;
	height:33px;
	line-height:33px;
}
#singleRight .singleAuthor,
#singleRight .singleComments,
#singleRight .singleTags{
	float:left;
	display:block;
	background-color:@ColorFirst;
	width:33px;
	height:33px;
	margin-right:10px;
}
#singleRight .singleAuthor{background-image:url('images/blogicon-author.png');}
#singleRight .singleComments{background-image:url('images/blogicon-comment.png');}
#singleRight .singleTags{background-image:url('images/blogicon-tag.png');}
#singleRight .singleDateBlock{
	height:33px;
	padding:10px 0;
	border-top:1px solid @LineColor;
	border-bottom:1px solid @LineColor;
}
#singleRight .singleDate{
	float:left;
	display:inline-block;
	line-height:33px;
	font-size:18px;
	color:@ColorSecond;
	font-family:@HeaderFont;
}
#thumbOpener{
	position:absolute;
	display:none;
	width:160px;
	height:15px;
	bottom:45px;
	left:20px;
	background-image:url('images/@{ThemePrefix}-thumbOpener.png');
}



/*DEMO CSS*/
#palette{
	display:none;
	position:absolute;
	right:20px;
	top:80px;
	background-color:#000000;
	border:1px solid #333333;
}
#paletteBody{
	width:186px;
	position:relative;
}
#colorPalette{
	margin-left:18px;
}
#colorPicker{
	position:absolute;
	left:92px;
	top:36px;
	width:10px;
	height:10px;
	border:1px solid #000000;
	border-radius:50%;
}
#paletteHeader{
	margin:1px;
	padding:3px;
	height:22px;
}
#colorResult{
	background-color:@ColorFirst;
	float:left;
	color:#000000;
	padding:2px;
}
#paletteHeader .closeButton:link, #paletteHeader  .closeButton:visited,
#paletteHeader  .openButton:link, #paletteHeader  .openButton:visited
{
	display:block;
	float:right;
	width:20px;
	height:20px;
}
#paletteHeader  .closeButton:hover, #paletteHeader  .closeButton:active,
#paletteHeader  .openButton:hover, #paletteHeader  .openButton:active{
	background-position:0 -20px;
}
#paletteHeader  .closeButton:link, #paletteHeader  .closeButton:visited{background-image:url('images/paletteClose.png');}
#paletteHeader  .openButton:link, #paletteHeader .openButton:visited{background-image:url('images/paletteOpen.png');}
#paletteHeader .openButton:link, #paletteHeader  .openButton:visited{ display:none; }
#ThemeSwitch{
	height:40px;
	width:122px;
	margin:0 auto;
}
#ThemeSwitch .themeBtn:link, #ThemeSwitch .themeBtn:visited{
	float:left;
	display:block;
	padding:2px 10px;
	text-decoration:none;
	margin:5px;
	color:#dddddd;
}

#ThemeSwitch .selected:link, #ThemeSwitch .selected:visited,
#ThemeSwitch .selected:hover, #ThemeSwitch .selected:active {
	border-bottom:2px solid @ColorFirst;
}
#logo_min{
	display:none;
}



@media only screen and  (max-width: 999px) {	
#menu-container{
	position:absolute;
	padding: 0;
	border:0;
	margin-left:0px;
}
#bgText{
	display:inline-block;
	text-align:left;
	position:absolute;
	left:7px;
	bottom:34px;
}
#bgText .headerText{
	display:inline;
	font-size:86px;
	line-height:54px;
	color:@ColorFirst;
	padding:0 5px;
	font-weight:700;
	font-family: @TrebuchetFont;
	text-shadow:2px 2px rgba(0,0,0,.5);
}
#bgText .subText{
	margin-top:10px;
	display:inline;
	font-size:36px;
	line-height:60px;
	padding:0 5px;
	text-transform:uppercase;
	color:#fff;
	font-family: @TrebuchetFont;
	font-weight:700;
	text-shadow:2px 2px rgba(0,0,0,.5);
}
#mainmenu{
	width:187px;
	margin:2px auto;
	position:relative;	
	float:left;
	background-color:@ColorFirst;
}
#logo{
	display:none;
}
#logo_min img{
	margin:0;
	padding:0;
	line-height:1em;
	
}
#logo_min{
text-align:left;
float:left;
display:inline-block;
/* background-color:@ColorFirst; */
padding:10px 0 0 0;
height:50px;
background-image: url('images/@{ThemePrefix}-menu-bg.png');
}




#mainmenu{
	width:187px;
	margin:2px auto;
	position:relative;	
	float:left;
	background-color:@ColorFirst;
}

#mainmenu ul{
	list-style:none;
	float:left;
}
#mainmenu  ul > li{
	position:relative;
	margin-bottom:1px;
	text-align:center;
}
#mainmenu ul li a:link,
#mainmenu ul li a:visited{
	padding:3px;
	display:inline-block;
	width:181px;
	text-decoration:none;
	text-align:center;
}
#mainmenu ul li a:hover,
#mainmenu ul li a:active{
}
#mainmenu ul > li.active > a:link,
#mainmenu ul > li.active > a:visited{
}
#mainmenu ul li a span.title{
	display:inline-block;
	margin:0;
	padding:3px 10px 3px 10px;
	position:relative;
	color:@ColorFirst;
	font-size:14px;
	font-family: @TrebuchetFont;
	font-weight: bold;
}
#mainmenu ul > li > a{
	background-image: url('images/@{ThemePrefix}-menu-bg.png');
}
#mainmenu ul li ul li a:link,
#mainmenu ul li ul li a:visited{
}
#mainmenu ul li ul li a:hover,
#mainmenu ul li ul li a:active{
}
#mainmenu ul li ul li a span.title{
	color:@ColorFirst;
}
#mainmenu ul li a:hover span.title,
#mainmenu ul li a:active span.title,
#mainmenu ul > li.active > a:link span.title,
#mainmenu ul > li.active > a:visited span.title{
	-moz-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	color:@ColorSecond;

}
#mainmenu ul li ul li a:hover span.title,
#mainmenu ul li ul li a:active span.title{
	color:@ColorSecond;

}
#mainmenu ul .description{
	display:none;
}
#mainmenu ul ul{	
	top:0;
}
#mainmenu ul ul li{
	float:left;
	margin-left:1px;
}
#playList{
	top:20px;
	width:400px;
}
.alt{
	width:187px;
	height:50px;
	top:0px;
	position:relative;
	margin:0 auto;
	background-repeat:no-repeat;
	background-position:center;
	background-image: url('images/amenualt.png') ;	
}
}