$(document).ready(function() {

	$('.shadowBox').each(function(item){
		var cw = 20;
		var ch = 20;
		var dimW = $(this).innerWidth();
		var dimH = $(this).outerHeight();
		var m = "<span class='bt'></span><span class='bl'></span><span class='br'></span><span class='btl'></span><span class='btr'></span>";
		$(this).append(m);


		$(".shadowBox .bt").css({
			width: (dimW-(cw))+"px",
			height: ch+"px",
			top:0,
			left: (cw-10)+"px"
		});
		$(".shadowBox .bb").css({
			width: (dimW-(cw))+"px",
			height: ch+"px",
			bottom:0,
			left: (cw-10)+"px"
		});

		$(".shadowBox .bl").css({
			width: cw+"px",
			height: (dimH-(ch/2))+"px",
			top: (ch-10)+"px"
		});
		$(".shadowBox .br").css({
			width: cw+"px",
			height: (dimH-(ch/2))+"px",
			top: (ch-10)+"px"
		});
	});

 
	$('.borderLineBox').each(function(item){
		var cw = 8;
		var ch = 8;
		var dimW = $(this).innerWidth();
		var dimH = $(this).outerHeight();
		var m = "<span class='bt'></span><span class='bb'></span><span class='bl'></span><span class='br'></span><span class='btl'></span><span class='btr'></span><span class='bbl'></span><span class='bbr'></span>";
		$(this).append(m);


		$(".borderLineBox .bt").css({
			width: (dimW-(cw))+"px",
			height: ch+"px",
			top:0,
			left: (cw-4)+"px"
		});
		$(".borderLineBox .bb").css({
			width: (dimW-(cw))+"px",
			height: ch+"px",
			bottom:0,
			left: (cw-4)+"px"
		});

		$(".borderLineBox .bl").css({
			width: cw+"px",
			height: (dimH-(ch))+"px",
			top: (ch-4)+"px"
		});
		$(".borderLineBox .br").css({
			width: cw+"px",
			height: (dimH-(ch))+"px",
			top: (ch-4)+"px"
		});
	});

	$(".colorbox").colorbox({width:"80%", height:"80%", iframe:true});
});