/*  
Some basic style used throuout my page
Version: 1.0
Author: Nawapunth Manusitthipol
*/

span.code {
	font-family:monospace;
	font-size:1em;
	font-style:italic;
	padding:0.5em;
	text-align:left;
	white-space:pre;
}

*[tooltip="true"] {
	/* Important!!! */
	position: relative;

	/* These are just to emphasize that the item is tool-tiped */
	border:     dotted 1px;	
	background:    #FFFFCC;
}

*[tooltip="true"] > tooltip {
	/* Important!!! */
	visibility: hidden;
	position:   absolute;
}

*[tooltip="true"]:hover > tooltip {
	/* Important!!! */
	visibility: visible;
	display:      block;

	/* Layout position */
	top:       1.3em;
	left:        1em;
	min-width:  20em;
	z-index:       2;

	/* Decoration */
	/*color     :       #333;*/
	background:       #FFC;
	padding   :        3px;
	border    : dotted 1px;
	font-size :        90%;

	/* Default to be center */
	text-align: center;
}

/* Set tooltip to be centered by default */
tooltip[center="false"] {
	text-align: left;
}

div.post img.figure {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

div.post img.figure[location="right"] {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* Resize the image to 200 and keep the aspect ratio */
img.resize { width: 200px; height : auto;  }
img.resize { width: auto;  	height: 200px; }

switch {
	/* Important!!! */
	position: relative;
	
	color:  #FF9900;
}
switch[shrink="true"] {
	font-size: 70%;
}
switch > content {
	/* Important!!! */
	visibility: hidden;
	display:    none;
	position:   absolute;
	
	font-size:   100%;
	color:       #002;
	margin-left: 50px;
	width:       500px;
	top:         1.2em;
	left:        2em;
}
switch[on="true"] > content {
	/* Important!!! */
	visibility: visible;
	display:    block;
}

.comment-in-code {
    color: #000000;
    font-style: italic;
}
.string-in-code {
    color: #00A54E;
}