/* Insert all your custom style in this sheet */
/*************
Please dont touch the original CSS files because they will be lost if youre updating the theme
********************/

.container {
  padding: 0;
}

.jp-topmenu {
	margin-right: -10px;
}

.jp-topmenu li.item-28 a{
	background:#5e3db0;
}
.jp-topmenu li.item-29 a{
	background:#650000;
}
.jp-topmenu li.item-18 a{
	background:#388e09;
}
.jp-topmenu li.item-30 a{
	background:#db005f;
}
.jp-topmenu li.item-53 a{
	background:#f98714;
}

.jp-topmenu li a {
	padding: 3px 4px 4px;
}

.jp-top{
	background-color: #d3c3fe!important;
	border-bottom: 5px solid #5e3db0 !important;
}

.jp-top .container{
	padding: 0 30px;
}

.jp-mainmenu {
  margin: 0;
  background:#e2e2e2;
  border-bottom: 25px solid #5e3db0 !important;
}

.jp-mainmenu li {
	border-bottom: none !important;
	background: url(../images/menu_divider.gif) no-repeat right 8px;
}

.jp-mainmenu li a {
	padding: 4px 25px 0; /*from 20px*/
}

.jp-mainmenu li.active ul {
	display: block !important;
	left: initial;
}

.jp-mainmenu li.active ul:hover {
	display: block !important;
	left: initial;
}

.jp-mainmenu li:hover {
	border-bottom: none !important;
}

.jp-mainmenu ul{
  height: 30px;
  padding: 3px 20px 3px 10px;
}

.jp-mainmenu li ul {
	width: 100%;
	background: none;
	margin: 4px 0 0 0;

	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.jp-mainmenu li ul li {
border: none!important;
border-top: none!important;
padding-top: 2px;
}

.jp-mainmenu li li {
	width: auto;
	height: 23px;
	padding: 0 0 0 0;
}

.jp-mainmenu li li.active{
	background: #815BEB;
}

.jp-mainmenu li li a{
	color: white !important;
	padding: 2px 20px;
	font-size: 14px;
}

.jp-mainmenu li li a:hover{
	color: #FFF !important;
}

.jp-mainmenu li ul ul {
	margin: 3px 0 0 0;
	background: #3e00ab;
	width: 18em; /*Increase the width for horizontal subsubmenu*/
	padding: 0;
}

.jp-mainmenu li ul ul li{
	height: 21px;
}

.jp-mainmenu li.active ul ul{
	/*display: none !important;*/
	left: -999em;
}

.jp-mainmenu li li:hover ul
{
	left: auto !important;
}

.jp-mainmenu li li li a
{
	left: auto !important;
	padding: 1px 20px;
}

.jp-mainmenu ul ul li:hover {
	background-color: #815BEB !important;
	color: #FFF !important;
}

div#live-streaming div.moduletable {
    background: none;
}

.moduletable h3 {
  background: #3e00ab;
  color: #ffffff !important;
  padding: 5px;
}

.blog-featured h2{
  background: #803db1;
  padding: 5px;
  margin: 0 0 10px 0;
  color: #ffffff !important;
}

.search {
	float: right;
	margin: 5px 20px -4px; /* from 4px 28px -4px*/
}

.joomla-content-inner .search {
	float: none;
}

.form-inline label{
  display: none;
}

#left {
	margin: 0 10px 0 0 !important;
}

#left .moduletable {
	margin-bottom: 0;
	padding-bottom: 10px; /*from 15px*/
}

#left .moduletable ul.menu{
	margin-left: 15px;
}

.jp-content {
	margin: 10px;
	padding: 0;
}
.joomla-content-outer {
	margin-right: 10px; /*from 20px*/
}

.camera_wrap {
	margin-bottom: 0 !important;
}

.camera_wrap img {
    width: 100% !important;
}

.joomla-content-outer div div.moduletable {
	padding: 7px 0 0 0; /*from 20px*/
	margin-bottom: 0;
}

.jp-user-outer {
	background: #d3c3fe;
	padding: 0;
}

.camera_pag {
	margin-top: -10px;
}

.cols-2 .column-1 {
	width: 50%;
}

.cols-2 .column-2 {
	width: 50%;
	padding-right: 0;
	padding-left: 0;
}

article.item-page table{
	width: 730px;
}

article.item-page h2 {
	margin-top: 10px;
}

.items-row {
	overflow: hidden;
	margin-bottom: 0;
	padding-bottom: 12px; /* from 20px*/
}

.vmyjsp_onepage { /*BS MyJspace page*/
	margin-bottom: 10px; /*from 20px*/
}

.footer, .footer a {
	color: #3e00aa;
}

@media (min-width:1025px) {
	.jp-wrapper {
		width: 100% !important;
		max-width: 100% !important;
		background: #e2e2e2;

		background-image: url("../images/top_back.jpg");
		background-repeat: repeat-x;
		background-position: center top;
	}

	.jp-mainmenu {
		margin: 0 auto;
		border-bottom: 25px solid #5e3db0 !important;
		width: 1060px;
		float: none;
		height: 35px;
		box-shadow: 0 0 10px #888888;
		-webkit-box-shadow: 0 0 10px #888888;
		-moz-box-shadow: 0 0 10px #888888;
	}

	.jp-content {
		margin: 0 auto;
		padding: 10px 10px;
		max-width: 1040px;
		background:	#FFFFFF;

		box-shadow: 0 0 10px #888888;
		-webkit-box-shadow: 0 0 10px #888888;
		-moz-box-shadow: 0 0 10px #888888;
	}

	.jp-top .container{
		max-width: 1000px;

		box-shadow: 0 0 10px #888888;
		-webkit-box-shadow: 0 0 10px #888888;
		-moz-box-shadow: 0 0 10px #888888;
	}

	#camera_wrap_127 {
		max-width: 95% !important;
		height: auto;
	}
}

@media (max-width: 1025px) {

	article.item-page table {
		width: 100% !important;
	}
}

@media (max-width: 1024px){
	.jp-mainmenu ul {
		padding: 3px 0 3px 10px;
	}
	.jp-mainmenu li a {
		padding: 4px 15px 0;
	}
	.search {
		float: right;
		margin: 4px 10px -4px;
	}
}

@media (max-width: 925px){
	.search input {
		width: 150px;
	}
}

@media (max-width: 885px){
	.search input {
		width: 115px;
	}
}

@media (max-width: 860px){
	.search input {
		width: 70px;
	}
}

@media screen and (min-width : 768px){
	#camera_wrap_127 {
		max-width: 90%;
		height: 100%;
	}

	.jp-content {
		margin-top: 0px; /* from 0*/
	}
}

@media screen and (max-width : 768px){
	/*#left .moduletable {
		padding: 3px 0 0 0 !important;
	}

	#left .moduletable h3 {
		margin-bottom: 0;
	}*/

	.joomla-content-outer div div.moduletable {
		padding: 0 0 0 0;
		margin-bottom: 0;
	}

	.search {
		float: none;
		margin: 0;
	}

	.jp-mainmenu {
		display: none !important;
	}

	.jp-mainmenu select {
		padding: 5px;
	}

	.joomla-content-outer {
		margin-right: 0;
	}

	.blog-featured table {
		width: 100%;
	}
}

@media screen and (max-width : 480px){

	/*#left .moduletable {
		padding-top: 0;
		padding-bottom: 15px;
	}*/

	.joomla-content-outer div:first-child {
		padding-bottom: 3px !important;
	}

	.jp-content {
		margin: 5px;
		padding: 0;
	}
	 .camera_caption_desc {
		font-size: 80%;
	 }

	 .camera_caption > div {
		padding: 0 20px !important;
	}

	.blog-featured h2{
	  margin: 0 0 6px 0;
	}

  .slideshowck_news_slider {
    height: 230px !important;
  }

  .slideshowck_news_slider .camera_caption > div {
    padding: 10px 20px !important;
  }
}

/**** Left Slide Box ****/

.logo .logo-img, .logo-title {display: none;}
#mobilemenu {display: none;}
#menuIsActive {display: none;}
#topMenuIsActive {display: none;}
#siteNav {display: none;}
#sideTopNav {display: none;}
#sideTopNav .mobilemenu{display: none;}
#leftNav {display: none;}
#siteNav .search {visibility: hidden;}
#siteNav .search .icon-search{position: absolute; top: 7px; left: 78%;}
#leftNav {visibility: hidden;}
.show-on-small { display: none; }
/*.topNav {display: none; margin-top: -25px; margin-right: 10px;}*/

/* main menu */

#siteNav .search input{width: 80%; padding: 5px; margin: 2px 0 2px 10px; border-color: #5C5C5C;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

/******* siteNav - side Main Menu on mobile *******/

#siteNav ul.menu { background-color: #fff; margin: 0; font-size: 12px;}
#siteNav ul.small {font-size: inherit;}

	/* second level */
	#siteNav ul.menu ul {left: -9999em; opacity: 0; position: absolute; width: 250px; background: #FFF; margin: 0; padding: 0; top: 40px;
				/* the transitions */
         -webkit-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
            -moz-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
                 transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
	}
	#siteNav ul.menu ul ul { background: #FAFAFA; }

	#siteNav ul.menu ul ul li{padding-left: 15px; background-position: 40px center;}

	#siteNav li {border-bottom: 1px solid #ffffff; border-top: 1px solid #ffffff;}

	#siteNav ul.menu > li { display: inline-block; margin-left: 0; vertical-align: middle; position: relative; background-color: #F0F0F0; width: 98.5%; margin: 0 auto; /* top level links only in order to avoid overriding */ }
	#siteNav ul.menu > li:first-child {clear: both;}
	#siteNav ul.menu > li > a { display: inline-block; vertical-align: middle; }
	#siteNav ul.menu > li > a:hover,
	#siteNav ul.menu > li:hover > a { background: #e6e6e6; }

	/* setting the visibility */
	#siteNav ul.menu > li:hover > ul { opacity: 1; top: 30px; left: 0; }
	#siteNav ul.menu > li > ul > li:hover ul { opacity: 1; top: 36px; left: 300px; }

		/* second and third level */
		#siteNav ul.menu ul > li { display: block; pbackground-color: #eeeeee; text-indent: 0;}
		#siteNav ul.menu ul > li a { display: block; padding-left: 40px;}
		#siteNav ul.menu ul > li a:before { content: '\2022'; font-size: 20px; padding-right: 7px; line-height: 15px;}

		#siteNav ul.menu ul > li a:hover,
		#siteNav ul.menu ul > li:hover a { background: #bfbfbf; }
		#siteNav ul.menu ul ul li a:hover { background: #a6a6a6; }

		/* Active and parent classes- using Joomla! menu classes - use the :after pseudo-classes to add images or icon fonts. You can safely remove this part since it's completely optional - remove at will */
		/* active states */
		#siteNav ul.menu > li.parent > a { }
		#siteNav ul.menu > li.active { }
			/* lower levels */
			#siteNav ul.menu > li.active > a { }
			#siteNav ul.menu > li.active > ul > li.active > a { }
			#siteNav ul.menu > li.active > ul > li.active > ul > li.active > a { }

.hamburger-menu
{
    width:38px;
    height:7px;
    background-color:#5E3DB0;
    /*border-radius:5px;*/
    position:relative;
}

.hamburger-menu:after, .hamburger-menu:before
{
    content: '';
    width: 100%;
    height:7px;
    background-color:#5E3DB0;
    position:absolute;
    /*border-radius:5px;*/
}

.hamburger-menu:after
{
    top:12px;
}

.hamburger-menu:before
{
    top:24px;
}



.x-close:after
{
    content: '\2716';
    width: 100%;
    height:7px;
    position:absolute;
	font-size: 28px;
    color: #5E3DB0;
}

/******* end siteNav - side Main Menu on mobile *******/


/******* leftNav - left Module Menu on mobile *******/

#leftNav .moduletable {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

#leftNav .moduletable h3{
	margin: 1px 0 2px 0;
	padding: 5px 8px 5px;
	font-size: 14px;
}

#leftNav .moduletable h3:before{
	content: '\2022';
	font-size: 25px;
    padding-right: 7px;
}

#leftNav .moduletable h3 .firstWord {
	float: right;
	font-weight: bold;
    font-size: 22px;
	line-height: 20px;
	padding-left: 2px;
}
.mobilemenu .arrow-down {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	writing-mode: tb-rl;
}

#leftNav .moduletable ul{
    border-top: none !important;
}

#leftNav ul li {
	background-image: none !important;
}

#leftNav ul li a{
	padding-left: 20px !important;
}

#leftNav ul li a:before{
	content: '' !important;
}


/******* end leftNav - left Module Menu on mobile *******/

/******* sideTopNav - side Top Menu on mobile *******/

a#topMenuToggler {
	display: none;
	width: 25px;
}

#sideTopNav ul.menu { background-color: #fff; margin: 0; font-size: 12px; text-align:	left;}
#sideTopNav ul.small {font-size: inherit;}

	/* second level */
	#sideTopNav ul.menu ul {right: -9999em; opacity: 0; position: absolute; width: 250px; background: #F0F0F0; margin: 0; padding: 0; top: 40px;
				/* the transitions */
         -webkit-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
            -moz-transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
                 transition: opacity 300ms ease-in-out, top 200ms ease-in-out;
	}
	#sideTopNav ul.menu ul ul { background: #F5F5F5; }

	#sideTopNav li {
		border-bottom: 1px solid #ffffff;
		border-top: 1px solid #ffffff;
		padding-left: 0;
		background-image: none;
		/*background-image: url('../images/radio_button.png');
		background-repeat: no-repeat;
		background-position: 15px center;*/
	}

	/*#sideTopNav li:hover {
		background-image: url('../images/radio_button_on.png');
		background-repeat: no-repeat;
		background-position: 15px center;
	}*/

	#sideTopNav ul.menu > li { display: inline-block; margin-left: 0; vertical-align: middle; position: relative; background-color: #FFF;  /* top level links only in order to avoid overriding */ }
	#sideTopNav ul.menu > li > a { display: inline-block; vertical-align: middle; padding-left: 35px !important; }
	#sideTopNav ul.menu > li > a:hover,
	#sideTopNav ul.menu > li:hover > a { background: #e6e6e6; }

	/* setting the visibility */
	#sideTopNav ul.menu > li:hover > ul { opacity: 1; top: 30px; left: 0; }
	#sideTopNav ul.menu > li > ul > li:hover ul { opacity: 1; top: 36px; left: 300px; }

		/* second and third level */
		#sideTopNav ul.menu ul > li { display: block; pbackground-color: #eeeeee; text-indent: 0;}
		#sideTopNav ul.menu ul > li a { display: block; }
		#sideTopNav ul.menu ul > li a:hover,
		#sideTopNav ul.menu ul > li:hover a { background: #bfbfbf; }
		#sideTopNav ul.menu ul ul li a:hover { background: #a6a6a6; }

		/* Active and parent classes- using Joomla! menu classes - use the :after pseudo-classes to add images or icon fonts. You can safely remove this part since it's completely optional - remove at will */
		/* active states */
		#sideTopNav ul.menu > li.parent > a { }
		#sideTopNav ul.menu > li.active { }
			/* lower levels */
			#sideTopNav ul.menu > li.active > a { }
			#sideTopNav ul.menu > li.active > ul > li.active > a { }
			#sideTopNav ul.menu > li.active > ul > li.active > ul > li.active > a { }

		#sideTopNav ul.menu li a:before {
			content: '\25CF' !important;
			font-size: 17px !important;
			position: fixed;
			left: 15px;
			line-height: 15px;
		}

		#sideTopNav ul.menu li a:hover:before{
			content: '\25C9' !important;
			font-size: 22px !important;
			left: 14px;
		}

/******* end sideTopNav - side Top Menu on mobile *******/

@media screen and (max-width: 800px) {

	.jp-top .container{
		margin: 0 !important;
		width: 100%!important;
		max-width: 100%!important;
		margin: auto;
		padding: 0 !important;
	}

  .jp-mainmenu .mobilemenu, .jp-mainmenu .search {display: none;} /* remove .jp-top .jp-topmenu */
  .jp-top .jp-topmenu {margin-right: 5px;}
  .jp-topmenu li a {
      margin-top: 10px !important;
  }

	img.logo {display: none;}
    .logo .logo-img, .logo-title {display: inline-block;}
  	#siteNav {display: block; float: left; margin: 0; padding: 0; width: 15%} /* float left instead of right */
	div.logo {margin: 0; padding: 0; width: 23%}
	div.logo-title {float: left; width: 50%; text-align: center;}
	div.logo-title h1{margin-bottom: 0; font-size: 32px; line-height: 42px; padding-top: 3px;}
	div.logo-title h1 a{ color: #352262; font-weight: 600; text-decoration: none; letter-spacing: 4px;}
  	#sideTopNav {display: block; float: right; margin: 0; padding: 0; text-align: right; margin: 3px 0 -3px 0; width: 11%;}
  	#leftNav {display: block;}
	#left {display: none;}

	/*#left .moduletable ul {display: none;}*/

	.jp-top {
		padding-top: 10px;
		padding-bottom: 10px; /* from 10px*/
		max-height: 80px;
	}

	/*div.logo {
		width: 85%;
	}*/

	.contentOverlay{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 10;
	  margin-top: 100px;
	  background-color: rgba(0,0,0,0.7); /*dim the background*/
	  transition: background-color 0.7s ease;
	}

	.show-on-small { display: block; }

	#siteNav ul li > span {
		float: right;
		clear: both;
		width: 33px;
		height: 33px;
		line-height: 33px;
		text-align:	center;
		color: #333333;
		font-size: 22px;
		font-weight: bold;
		font-family: Quicksand,Arial, Helvetica, sans-serif;
	}

  /****** siteNav on mobile *****/
  #siteNav ul.menu { top: 70px; left: -110%; padding: 0; width: 100%; z-index: 10009; line-height: 1.8; position: absolute; z-index: 9999; /* resetting and blocking the elements in order to have a large touch surface */
		/* the transitions */
  	 -webkit-transition: all 300ms ease-in-out;
     		-moz-transition: all 300ms ease-in-out;
             transition: all 300ms ease-in-out;
   }

  	/* the open state -  here we are using the CSS 3D Transforms */
  	#siteNav ul.menu.menuIsActive {
			padding-top: 0;

			-webkit-transform: translate3d(110%, 0, 0);
	       -moz-transform: translate3d(110%, 0, 0);
	            transform: translate3d(110%, 0, 0);
	     -webkit-overflow-scrolling: touch; }

	 #siteNav ul.menu.movedown{
		-webkit-transform: translate3d(110%, 130px, 0);
	   -moz-transform: translate3d(110%, 130px, 0);
			transform: translate3d(110%, 130px, 0);
	 -webkit-overflow-scrolling: touch; }

  #siteNav ul.menu ul { display: none; position: static; opacity: 1; width: 100%; border-top: 5px solid #9B9B9B;}
  #siteNav ul.menu ul.subMenuIsActive {display: block;}
  #siteNav ul.menu ul li { text-indent: 0; margin: 0; /*background-image: url('../images/radio_button.png'); background-repeat: no-repeat; background-position: 25px center;*/ border-bottom: 1px solid #AFAFAF;}
  #siteNav ul.menu > li, #siteNav ul.menu li,
  #siteNav ul.menu a, #siteNav ul.menu li > a { display: block; font-size: 14px;}

  /* globally reset all paddings */
  #siteNav ul.menu a { color: #373737; padding: 5px 15px;}
  #siteNav ul.menu ul a {}
  #siteNav ul.menu ul ul a {}

  /* resetting all the hover states - can be omitted in live sites */
  #siteNav ul.menu a:hover,
  #siteNav ul.menu li:hover a { background: none !important; }

  /* support for browsers which do not support 3D transforms - must use Modernizr for this feature */
	.no-csstransforms3d #siteNav ul.menu.menuIsActive { left: 0; }

/***** End siteNav on mobile ******/

  /****** sideTopNav on mobile *****/
  #sideTopNav ul.menu { right: -110%; width: 100%; z-index: 10009; line-height: 1.8; position: absolute; z-index: 9999; /* resetting and blocking the elements in order to have a large touch surface */
		/* the transitions */
  	 -webkit-transition: all 300ms ease-in-out;
     		-moz-transition: all 300ms ease-in-out;
             transition: all 300ms ease-in-out;
   }

  	/* the open state -  here we are using the CSS 3D Transforms */
  	#sideTopNav ul.menu.topMenuIsActive {
			position: absolute;
			width: 200px;
			top: 25px;
			left: 400px;
			display: block;
			padding-top: 0;
			margin-top: 5px;/*from 5px*/

			-webkit-transform: translate3d(-110%, 0, 0);
	       -moz-transform: translate3d(-110%, 0, 0);
	            transform: translate3d(-110%, 0, 0);
	     -webkit-overflow-scrolling: touch; }

	 #sideTopNav ul.menu.movedown{
		-webkit-transform: translate3d(110%, 130px, 0);
	   -moz-transform: translate3d(110%, 130px, 0);
			transform: translate3d(110%, 130px, 0);
	 -webkit-overflow-scrolling: touch; }

  #sideTopNav ul.menu ul { display: none; position: static; opacity: 1; width: 100%;}
  #sideTopNav ul.menu ul.subtopMenuIsActive {display: block;}
  #sideTopNav ul.menu ul li { text-indent: 0; margin: 0; }
  #sideTopNav ul.menu > li, #sideTopNav ul.menu li,
  #sideTopNav ul.menu a, #sideTopNav ul.menu li > a { display: block;}

  /* globally reset all paddings */
  #sideTopNav ul.menu a { color: #373737; padding: 5px 15px;}
  #sideTopNav ul.menu ul a {}
  #sideTopNav ul.menu ul ul a {}

  /* resetting all the hover states - can be omitted in live sites */
  #sideTopNav ul.menu a:hover,
  #sideTopNav ul.menu li:hover a { background: none !important; }

  /* support for browsers which do not support 3D transforms - must use Modernizr for this feature */
	.no-csstransforms3d #sideTopNav ul.menu.topMenuIsActive { left: 0; }

/***** End sideTopNav on mobile ******/

  /**** the visibility toggler *****/
	a#menuToggler {
		display: inline-block;
	}
	#menuToggler .icon { display: inline-block; vertical-align: middle; }
	#menuToggler span { display: inline-block; vertical-align: middle; font-weight: 800; font-size: 12px; line-height: 28px; }
	#menuToggler a:hover { text-decoration: none; }

	/***** End the visibility toggler ****/

	  /**** the TopMenu visibility toggler *****/
	a#topMenuToggler {
		display: inline-block;
		padding: 0 5px 0 0 !important; /*from 10px*/
	}

	#topMenuToggler .icon { display: inline-block; vertical-align: middle; }
	#topMenuToggler span { display: inline-block; vertical-align: middle; font-weight: 800; font-size: 12px; line-height: 28px; }
	#topMenuToggler a:hover { text-decoration: none; }

	/***** End the TopMenu visibility toggler ****/

}

@media screen and (max-width : 480px){

	.jp-top .container{
		margin: 0 !important;
		width: 100%!important;
		max-width: 100%!important;
		margin: auto;
		padding: 0 !important;
	}

	div.logo-title h1{font-size: 26px; line-height: 32px; padding-top: 0;}

	a#menuToggler {
		width: 45px;
	}

	a#topMenuToggler {
		width: 25px;
		padding: 0 5px 0 0 !important;
	}

	#menuToggler span {vertical-align: top;}

	#siteNav ul.menu { top: 60px; }

	.hamburger-menu
	{
		top: 2px;
		width:34px;
		height:6px;
	}

	.hamburger-menu:after, .hamburger-menu:before
	{
		height:6px;
	}

	.hamburger-menu:after
	{
		top:10px;
	}

	.hamburger-menu:before
	{
		top:20px;
	}

	#siteNav ul.menu ul > li a:before { font-size: 25px; }

}

@media screen and (max-width : 470px){

	#siteNav{
		width: 15%;
	}

	div.logo{
		width: 25%;
	}

	div.logo img.logo-img{
		margin-left: 20px !important;
		float: left;
		width: 35px;
	}

	div.logo img.logo-title{
		width: 160px;
	}

	/*#sideTopNav {
		width: 18%;
	}*/

}

@media screen and (max-width : 330px){
	div.logo {
		width: 20%;
	}

	div.logo-title {
		width: 60%;
	}

	div.logo-title h1 a {
		letter-spacing: 1px;
	}


}

/************** Article Content Div Style *****************/

.article-content {
	line-height: 25px;
	font-size: 14px;
}

.article-row {
	clear: both;
}

.article-row:first-child {
	clear: none;
}

.column-left {
	float: left;
}

.column-big {
	width: 60%;
}

.column-bigger{
	width: 69%;
}

.column-right {
	float: right;
}

.column-small {
	width: 37.5%;
}

.column-smaller {
	width: 28%;
}

.column-even {
	width: 49%;
}

.column-wide {
	clear: both;
}

.column-wide2 {
	clear: left;
}

.article-content h2 {
	font-size: 20px;
	color: #3e00aa;
}

.article-content h5 {
	font-size: 14px;
	color: #3e00aa;

	padding: 25px 0 0 0;
	margin: 0;
	line-height: 25px;
}

.article-content h4 {
	font-size: 15px;
	color: #3e00aa;

	padding: 25px 0 0 0;
	margin: 0;
	line-height: 25px;
}

.article-content p {
	font-size: 14px;
	color: #000000;

	margin: 5px 0 0 0;
	line-height: 25px;
}

.article-content ul.list_right li{
	padding-left: 10px;
}

.table1 {
    table-layout: auto;
}

.text-box {
	width: 550px;
	padding: 10px;
	border: 1px solid black;
	margin: 0;
}



.horizontal_dotted_line hr{
	border:#41464e 1px dotted;
	border-style: none none dotted;
	width: 95%;
	text-align: left;
	margin-left: 0;
}

.article-content .pic-profile {
	clear: both;
	padding: 20px 0;
}

.article-content .pic-profile img{
	float: left;
	padding-right: 10px;
}

.article-content .pic-profile .ppc-content{
	color: #666 !important;
	margin-top: 0;
	padding-top: 0;
}

@media (max-width: 800px) {

	.article-content {
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	.column-left, .column-big, .column-bigger {
		width: 100% !important;
		clear: both;
	}

	.column-right, .column-small, .column-smaller {
		padding-top: 15px; /*from 20px*/
		width: 100%;
		clear: both;
	}

	.text-box {
		width: 90%;
	}

	.article-content table td {
		font-size: 10px;
		padding: 2px;
	}

	.article-content table td p {
		font-size: 10px;
	}
}

@media (max-width: 400px) {
	.article-content table td {
		padding: 1px;
	}

	div.logo-title h1 a{letter-spacing: 2px;}
}

/******* End Article Content Style ********/

/*added to toggle 4 buttons on top of menu */
.jp-topmenu li a {
	display: block;
	text-decoration: none;
	padding: 3px 4px;
	margin:0;
	border-bottom:none;
	text-align:left;
	font-weight:normal;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background:#5d3eaf;
	font-size:11px;
	margin:30px 4px 0 4px; /* from 30px*/
	color:#ffffff;
}