/*
CSS for http://www.seanmcauliffe.com
Transparent, rounded borders CSS and JS
based on original code by Roger Johansson,
http://www.456bereastreet.com

Version 2.0

dark green: 13181A,
medium green: 333E43,
light greenish blue: 66818F,
aqua: C9EDEC,
fuschia: D44ED4

1. primary content outer
2. secondary content outer
3. primary content inner
4. basic border **NOT USED**
5. blue rounded box (used in side bar)
6. comments
7. portfolio page
*/

/* Basic styling, used when JavaScript is unsupported */
.border_primary_outer {
	margin:0 4px;
	padding: 0;
	background:#fff;
	border: #1e2527 solid;
	border-width: 8px;
}
.border_secondary_outer {
	margin:0 4px;
	padding:15px;
	background: #13181A;
	border: #1e2527 solid 5px;
}
.border_primary_inner {
	margin:0;
	padding:15px;
}
.basic_border {
	margin:0;
	padding: 0;
	background:#9c3a31;
}
.blue_rounded_box {
	margin: 25px 0;
	padding: 10px 5px;
	background:#e2ebf1;
}
.border_comments {
	margin:0;
	padding: 2px;
	background:#efefff;
}
.portfolio_border {
	background: #1e2527;
	color: #fff;
	height: 100%;
	margin: 0 4px;
	padding: 50px 50px 0 50px;
}

/* The class names above get changed to the ones below by the Javascript */

.border2,.border3,.border4,.border5,.border6,.border7 {margin:0;padding:0;}
.border1 {margin: 0;padding: 0;}
.border6 {margin: 3em 0;}
.border7 {height: 100%;}

/* Top borders */

.bt1, .bt2, .bt3, .bt4, .bt5, .bt6, .bt7 {padding: 0; margin: 0;}
.bt2, .bt6 {margin:0 0 0 260px;}
.bt3, .bt4, .bt5 {margin:0 0 0 20px;}

.bt2 {background:url(images/borders/border_secondary_outer.png) no-repeat 100% 0;}
.bt3 {background:url(images/borders/content_box_full.gif) no-repeat 100% 0;}
.bt4 {background:url(images/borders/basic_box.gif) no-repeat 100% 0;}
.bt5 {background:url(images/borders/basic_box2.gif) no-repeat 100% 0;}
.bt6 {background:url(images/borders/border_comments.gif) no-repeat 100% 0;}

.bt2 {height:60px;}
.bt3, .bt4 {height:20px;}
.bt6 {height:55px;}
.bt5 {height: 14px;margin-top: 25px;}

/* Top corners */

.bt1 div, .bt2 div, .bt3 div, .bt4 div, .bt5 div, .bt6 div, .bt7 div {padding: 0; margin: 0;}

.bt2 div, .bt3 div, .bt4 div, .bt5 div, .bt6 div {
	position:relative;
	left:-20px;
	font-size:0;
	overflow: visible;
}
.bt2 div {left: -260px; height:60px; width: 260px}
.bt6 div {width:260px;left: -260px;}
.bt3 div, .bt4 div {width:20px; height:20px;}
.bt5 div {width:110px;height:14px;}
.bt6 div {height:55px;}
.bt2 div {background:url(images/borders/border_secondary_outer.png) no-repeat 0 0;}
.bt3 div {background:url(images/borders/content_box_full.gif) no-repeat 0 0;}
.bt4 div {background:url(images/borders/basic_box.gif) no-repeat 0 0;}
.bt5 div {background:url(images/borders/basic_box2.gif) no-repeat 0 0;}
.bt6 div {background:url(images/borders/border_comments.gif) no-repeat 0 0;}

/* Bottom borders */
.bb1, .bb2, .bb3, .bb4, .bb6, .bb7 {height:20px;margin:0 0 0 20px;}
.bb5 {height:14px;margin:0 0 20px 20px;}
.bb1 {background:url(images/borders/border-primary-outer.png) no-repeat 100% 100%;}
.bb2 {background:url(images/borders/border-primary-outer.png) no-repeat 100% 100%;}
.bb3 {background:url(images/borders/content_box_full.gif) no-repeat 100% 100%;}
.bb4 {background:url(images/borders/basic_box.gif) no-repeat 100% 100%;}
.bb5 {background:url(images/borders/basic_box2.gif) no-repeat 100% 100%;}
.bb6 {background:url(images/borders/border_comments.gif) no-repeat 100% 100%;}
.bb7 {background:url(images/borders/border-primary-outer.png) no-repeat 100% 100%;}

/* Bottom corners */
.bb1 div, .bb2 div, .bb3 div, .bb4 div, .bb5 div, .bb6 div, .bb7 div {
	position:relative;
	left:-20px;
	width:20px;
	height:20px;
	font-size:0;
	line-height:0;
}
.bb5 div {height:14px;}
.bb1 div {background:url(images/borders/border-primary-outer.png) no-repeat 0 100%;}
.bb2 div {background:url(images/borders/border-primary-outer.png) no-repeat 0 100%;}
.bb3 div {background:url(images/borders/content_box_full.gif) no-repeat 0 100%;}
.bb4 div {background:url(images/borders/basic_box.gif) no-repeat 0 100%;}
.bb5 div {background:url(images/borders/basic_box2.gif) no-repeat 0 100%;}
.bb6 div {background:url(images/borders/border_comments.gif) no-repeat 0 100%;}
.bb7 div {background:url(images/borders/border-primary-outer.png) no-repeat 0 100%;}

/* Left borders */
.i1_1,.i1_2,.i1_4,.i1_5,.i1_6,.i1_7 {
	margin: 0;padding:0;
}
.i1_1,
.i1_7 {padding-left:4px;}
.i1_2 {padding-left:4px;}
.i1_3 {padding-left:15px;}
.i1_4 {margin-left: 5px;}
.i1_5 {border: #c8d9e4 solid;border-width: 0 0 0 1px;}
.i1_6 {padding-left:8px;}
.i1_7 {height: 100%;}

.i1_1 {background:url(images/borders/edge-primary-outer.png) repeat-y 0 0;}
.i1_2 {background:url(images/borders/edge-primary-outer.png) repeat-y 0 0;}
.i1_3 {background:url(images/borders/edge-inner-L.gif) repeat-y 0 0;}
.i1_6 {background:url(images/borders/border_comments_left.gif) repeat-y 0 0;}
.i1_7 {background:url(images/borders/edge-primary-outer.png) repeat-y 0 0;}

/* Right borders */
.i2_1,.i2_2,.i2_4,.i2_5,.i2_6,.i2_7 {
	margin: 0;padding: 0;
}
.i2_1,
.i2_2,
.i2_7 {padding-right:4px;}
.i2_3 {padding-right:15px;}
.i2_4 {padding-right:5px;}
.i2_5 {border: #c8d9e4 solid;border-width: 0 3px 0 0;}
.i2_6 {padding-right:8px;}
.i2_7 {height: 100%;}

.i2_1 {background:url(images/borders/edge-primary-outer.png) repeat-y 100% 0;}
.i2_2 {background:url(images/borders/edge-primary-outer.png) repeat-y 100% 0;}
.i2_3 {background:url(images/borders/edge-inner-R.gif) repeat-y 100% 0;}
.i2_6 {background:url(images/borders/border_comments_right.gif) repeat-y 100% 0;}
.i2_7 {background:url(images/borders/edge-primary-outer.png) repeat-y 100% 0;}

/*
Wrappers for the content.
Use it to set the background colour
and insert some padding between the
borders and the content.
*/

.i3_1,.i3_2,.i3_3,.i3_4,.i3_5,.i3_6,.i3_7 {
	display:block;
	margin:0;
	padding:0;
}
.i3_7 {height: 100%;padding: 0;}

.i3_1 {background: #fff;}
.i3_2 {background: #1e2527;}
.i3_3 {background: #fff;}
.i3_4 {background: #000;}
.i3_5 {background: #e2ebf1 url(images/borders/basic_box2_inside.gif) no-repeat 0 0;}
.i3_6 {background: #eceffb;}
.i3_7 {background: #1e2527;}

/* Make the content wrappers auto clearing so it will contain floats
(see http://positioniseverything.net/easyclearing.html). */

.i3_1:after, .i3_2:after, .i3_3:after, .i3_4:after, .i3_5:after, .i3_6:after, .i3_7:after,
.border_primary_outer:after, .border_secondary_outer:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.i3_1, .i3_2, .i3_3, .i3_4, .i3_5, .i3_6, .i3_7,
.border_primary_outer:after, .border_secondary_outer:after {display:inline-block;}
.i3_1, .i3_2, .i3_3, .i3_4, .i3_5, .i3_6, .i3_7,
.border_primary_outer:after, .border_secondary_outer:after {display:block;}