/* circlewebs - sample.css - box layout for portfolio*/

body#sampl div#main {
	margin:0 !important;
	padding:0 0 20px 0 !important;
}

body#sampl div#main_content {
	background:url(../assets/png/25pcwit.png) repeat top left !important;
	padding:20px;
	-moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 15px 0  0 15px !important;
}

div#examples, div#examples_rt {
  display:block;
	float:left;
	font-size: 0.9em;
	font-weight: normal; 
	margin-right: 4em;
	padding: 0;
	position: relative;
	text-decoration: none;
	width: 380px;
}

div.portentry {
	background-color:transparent;
	display: block;
	font-family:Arial , Tahoma, Arial, sans-serif !important;
	height:160px;
	margin: 0;
	padding:5px;
	width:140px;
}

div#examples_rt div.portentry {
	display: block;
	margin: 0;
	padding-left:30px;
	height:160px;
	background-color:transparent;
	width:140px;
}

.portentry  p {
	padding-bottom:30px;
}

.portentry img {
	margin: 5px;
}

/* Examples Left Pane - for text
------------------------------------------------------------------------*/
.exleft {
	position: absolute;
	display: block;
	float: left;
	text-decoration: none;
	width: 165px;
}

.exleft a {
	color: #69F;
	font-size: 1.2em;
	font-weight: 400;
	text-decoration: none;
}

.exleft a:hover {
	color: #69D;
	font-size: 1.2em;
	text-decoration: underline;
}

.exleft p {
	color: #333 !important; /*#69F; */
	float: left;
  font-size:160%;
  padding-top:1em;
	position: relative;
	text-align:justify;
	text-decoration: none;
}

.exleft a {
	border: none;
	color: #2B4560; /*#69F;*/
  font-size:160%;
	text-decoration: none;
}

.exleft a:hover {
	border: none;
	color: #69F;
}


/* Examples Right Pane - for thumbnail
------------------------------------------------------------------------*/
.exright{
	position: absolute;
	display: block;
	float: right;
	right: 0.1em;
	width: 175px;
max-width:180px;
min-width:150px;
}

div.exright p a img{
	border: 4px solid #BBB !important;
}

div.exright p a:hover img {
	border: 4px solid #777 !important;
}

.exright p {
	color: #333 !important; /*#69F; */
	float: left;
  font-size:160%;
  padding-top:1em;
	position: relative;
	text-align:justify;
	text-decoration: none;
}

.exright a {
	border: none;
	color: #2B4560; /*#69F;*/
  font-size:160%;
	text-decoration: none;
}

.exright a:hover {
	border: none;
	color: #69F;
}

/* =Template id's, comments etc
------------------------------------------------------------------------*/
/*div#examples p.templateid a, div#examples_rt p.templateid a {
	background: url(../assets/gif/chev.gif) no-repeat left;
	display: block;
	font-size:1em;
	float: right;
	padding-left:20px;
	position:relative;
	width: 80px !important;
}*/

div#examples p.templateid,
div#examples_rt p.templateid {
	/*background: #D9CFCF;*/
	display: block;
	float: left !important;
	height:2em;
width: 165px !important;
}

div#examples p.templateid a,
div#examples_rt p.templateid a {
	background: url(../assets/gif/chev.gif) no-repeat right;
	display: block;
        font-size:1em;
	padding-left: 0px;
	text-align:left;
	width: 165px !important;
}

/* safari workaround */
@media screen and (-webkit-min-device-pixel-ratio:0) {

div#examples p.templateid,
div#examples_rt p.templateid {
	/*background: #D9CFCF;*/
	display: block;
	float: left !important;
	height:2em;
}

div#examples p.templateid a,
div#examples_rt p.templateid a {
	background: url(../assets/gif/chev.gif) no-repeat right;
	display: inline;
  font-size:1em;
	padding-left: 0px;
	text-align:left;
	width: 165px !important;
}
}

p.templateid {
	color: #ccc !important;
	display:block;
	position:absolute;
	top:8em;
	text-align: left;
	text-decoration: none;
}

p.templateid a{
	color: #ccc !important;
	text-align: right;
	text-decoration: none;
}
	
p.templateid a:hover {
	border: none;
	color: #FFC !important;
	text-decoration: underline;
}

body.sampl #main,body.sampl #main_content, body.sampl .post_wide {
	font: normal 0.9em Verdana,sans-serif;
  padding-top:15px;
	width: 680px;
}

#post_wide {
  padding:5px;
	width: 840px;
	background:url(../assets/png/25pcwit.png) repeat top left;
}

#post_wide p {
color: #333 !important;
font-size:180% !important;
}

#post_wide p a {
color: #333 !important;
font-size:100% !important;
}

.colshiftleft{
    width: 20em;
    left: 0em;
    position: relative;
    z-index:1; /* Opera7.54 */
}

/* IE mac hack */
* html>body .colshiftleft {
    overflow: auto;
}

.colshiftright{
    width: 35em;
    left:0;
    position: relative;
    z-index:2; /* Opera7.54 */
}

div.left a, div.right a {
  color: #2B4560 !important
}