@media screen {

/*  =reset.css 
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0; padding : 0; border : 0; outline : 0; font-weight : inherit; font-style : inherit; font-size : 100%; font-family : inherit; vertical-align: baseline; background : transparent; }

body {
background-image: url(images/bodyBg_04.jpg);
background-position: center top;
background-repeat: no-repeat;
background-color: #f4f4f4;
margin: 0px;
padding: 0px;
}

#bodyWrap {
background-image: url(images/bodyWrapBg_02.jpg);
background-position: center bottom;
background-repeat: no-repeat;
position: relative;
visibility: visible;
width: 100%;
height: 100%;
}

#websiteContainer {
font-size: 12px;
color: #101010;
font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
position: relative;
visibility: visible;
margin: 0 auto;
width: 1000px;
height: 100%;
}

/* Navigation */
#header {
position: relative;
visibility: visible;
width: 1000px;
height: 124px;
}

#mainNavigation {
position: absolute;
visibility: visible;
width: auto;
height: auto;
top: 0px;
left: 261px;
}

#mainNavigation ul {
width: 653px;
height: 124px;
position: absolute;
top: 0px;
left: 0px;
background: url(images/mainMenu_01.jpg) no-repeat 0 0;
list-style: none;
margin: 0;
padding: 0;
}

#mainNavigation li {
display: inline;
}

#mainNavigation li.main a:link, #mainNavigation li.main a:visited {
border: none;
width: 72px;
height: 124px;
display: block;
position: absolute;
top: 0;
outline: none;
left: 0;
text-indent: -7000px;
}

#mainNavigation li.main a.active {
background: url(images/mainMenu_01.jpg) no-repeat 0 -124px;
text-indent: -7000px;
}

#mainNavigation li.company a:link, #mainNavigation li.company a:visited {
border: none;
width: 111px;
height: 124px;
display: block;
position: absolute;
top: 0;
outline: none;
left: 72px;
text-indent: -7000px;
}

#mainNavigation li.company a.active {
background: url(images/mainMenu_01.jpg) no-repeat -72px -124px;
text-indent: -7000px;
}

#mainNavigation li.website a:link, #mainNavigation li.website a:visited {
border: none;
width: 98px;
height: 124px;
display: block;
position: absolute;
top: 0;
outline: none;
left: 183px;
text-indent: -7000px;
}

#mainNavigation li.website a.active {
background: url(images/mainMenu_01.jpg) no-repeat -183px -124px;
text-indent: -7000px;
}

#mainNavigation li.graphic a:link, #mainNavigation li.graphic a:visited {
border: none;
width: 103px;
height: 124px;
display: block;
position: absolute;
top: 0;
outline: none;
left: 281px;
text-indent: -7000px;
}

#mainNavigation li.graphic a.active {
background: url(images/mainMenu_01.jpg) no-repeat -281px -124px;
text-indent: -7000px;
}

#mainNavigation li.photo a:link, #mainNavigation li.photo a:visited {
border: none;
width: 85px;
height: 124px;
display: block;
position: absolute;
top: 0;
outline: none;
left: 384px;
text-indent: -7000px;
}

#mainNavigation li.photo a.active {
background: url(images/mainMenu_01.jpg) no-repeat -384px -124px;
text-indent: -7000px;
}

#mainNavigation li.video a:link, #mainNavigation li.video a:visited {
border: none;
width: 79px;
height: 124px;
display: block;
position: absolute;
top: 0;
outline: none;
left: 469px;
text-indent: -7000px;
}

#mainNavigation li.video a.active {
background: url(images/mainMenu_01.jpg) no-repeat -469px -124px;
text-indent: -7000px;
}

#mainNavigation li.conCre a:link, #mainNavigation li.conCre a:visited {
border: none;
width: 105px;
height: 124px;
display: block;
position: absolute;
top: 0;
outline: none;
left: 548px;
text-indent: -7000px;
}

#mainNavigation li.conCre a.active {
background: url(images/mainMenu_01.jpg) no-repeat -548px -124px;
text-indent: -7000px;
}

#mainNavigation li.main a:hover {
background: url(images/mainMenu_01.jpg) no-repeat 0 -124px;
}

#mainNavigation li.company a:hover {
background: url(images/mainMenu_01.jpg) no-repeat -72px -124px;
}

#mainNavigation li.website a:hover {
background: url(images/mainMenu_01.jpg) no-repeat -183px -124px;
}

#mainNavigation li.graphic a:hover {
background: url(images/mainMenu_01.jpg) no-repeat -281px -124px;
}

#mainNavigation li.photo a:hover {
background: url(images/mainMenu_01.jpg) no-repeat -384px -124px;
}

#mainNavigation li.video a:hover {
background: url(images/mainMenu_01.jpg) no-repeat -469px -124px;
}

#mainNavigation li.conCre a:hover {
background: url(images/mainMenu_01.jpg) no-repeat -548px -124px;
}

/* Komputer Clinic Sliding Panel */
.ghostPanel {
position: absolute;
top: 62px;
right: 10px;
display: none;
background: #333333;
color: #ffffff;
border:1px solid #666666;
font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
width: 330px;
height: auto;
padding: 70px 30px 30px 30px;
z-index: 5;
}

h4 { margin-top: 10px; margin-bottom: 10px; color:#00aeef; font:18px Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }

.ghostPanel p{
margin: 0 0 10px 0;
padding: 0;
color: #ffffff;
}

.ghostPanel a, .ghostPanel a:visited{
margin: 0;
padding: 0;
color: #2feb1d;
text-decoration: none;
border-bottom: 1px solid #2feb1d;
}

.ghostPanel a:hover, .ghostPanel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.ghostTrigger {
position: absolute;
text-decoration: none;
top: 16px; right: 0;
font-size: 20px;
letter-spacing:-1px;
color:#fff;
font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
padding: 20px 15px 20px 40px;
font-weight: 700;
background:#111111 url(images/plus.png) 5% 32% no-repeat;
border:1px solid #666666;
display: block;
z-index: 6;
}

a.ghostTrigger:hover {
position: absolute;
text-decoration: none;
top: 16px; right: 0;
font-size: 20px;
letter-spacing:-1px;
color:#fff;
font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
padding: 20px 20px 20px 40px;
font-weight: bold;
background:#444444 url(images/plus.png) 5% 32% no-repeat;
border:1px solid #666666;
display: block;
z-index: 6;
}

a.active.ghostTrigger {
font-family: Arial, Verdana, Lucida, Geneva, Helvetica, sans-serif;
background:#222222 url(images/minus.png) 5% 32% no-repeat;
z-index: 6;
}

.ghostPanel ul{
margin-top: 4px;
margin-left: 23px;
margin-bottom: 10px;
}

.ghostPanel ul li{
list-style-image: url(images/bulletG.gif);
list-style-position: outside;
}

.borderImgGhost {
background-color: #222222;
padding: 10px;
margin: 5px;
border: 1px solid #2feb1d;
}

.floatRightGhost {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}

/* Main Title Box Style */
#titleBoxTop {
padding-left: 15px;
padding-top: 20px;
padding-bottom: 6px;
position: relative;
visibility: visible;
width: 985px;
height: auto;
}

#titleBoxMiddle {
clear: both;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
visibility: visible;
width: 985px;
height: auto;
}

/* News Ticker */
#newsticker-demo { 
width:1000px; 
height: 288px;
overflow: hidden;
}

.newsticker-jcarousellite { width:1000px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }

.clear { clear: both; }

/* Main Website Image Title Slider */
a { color:#00aeef; font-weight:bold; }
a:hover { color:#ff60c9; font-weight:bold; }
h3 { margin: 5px 10px 3px 10px; color:#00aeef; font:18px Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
		
.boxgrid { 
width: 495px; 
height: 288px; 
float:left; 
overflow: hidden; 
position: relative; 
}

.boxgrid2 { 
font-size: 12px;
width: 484px; 
height: auto; 
float:left;  
position: relative; 
top: 13px;
}

.boxgrid2 ul { 

}

.boxgrid2 li { 
list-style-type: none;
float: left;
position: relative;
width: 200px;
height: auto;
}

.boxgrid2 h2 {
height: 22px;
margin-top: 13px;
margin-bottom: 6px;
color:#333333;
font:18px Arial, sans-serif;
letter-spacing:-1px;
font-weight: bold;
border-bottom: thin dotted #333333;
}

.boxgrid img { 
position: absolute; 
top: 0; 
left: 0; 
border: 0; 
}

.boxgrid p { 
padding: 0 10px; 
color:#f8f8f8; 
font-weight:bold; 
font:14px Arial, sans-serif; 
}

#webPortfolio .boxgrid p { 
letter-spacing: 0px;
}

.boxcaption {
margin-left: 17px;
float: left; 
position: absolute; 
background-color: #000000; 
height: 100px; 
width: 461px; 
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 292px;
left: 0px;
}
.caption .boxcaption {
top: 292px;
left: 0px;
}

/* Main Simple Collapsing Box */
#contentCollapse {
width: auto;
display: none;
padding-bottom: 8px;
}
#collapseToggle {
display: block;
width: auto;
padding-bottom: 8px;
border-bottom: thin dotted #333333;
}

#contentCollapse2 {
width:100%;
display: none;
padding-bottom: 8px;
}
#collapseToggle2 {
display:block;
width:100%;
padding-bottom: 8px;
border-bottom: thin dotted #333333;
}

#contentCollapse3 {
width:100%;
display: none;
padding-bottom: 8px;
}
#collapseToggle3 {
display:block;
width:100%;
padding-bottom: 8px;
border-bottom: thin dotted #333333;
}

.offset {
margin-bottom: -5px;
}


/* Content Scroller Style */
#scroller-header a {
text-decoration: none;  
padding: 0 4px;
}

#scroller-header a:hover {
text-decoration:none; 
color:#ff60c9;
}

a.selected {
text-decoration:underline !important; 
color:#333333 !important;
}

#scroller-header {
color: #333333;
width:auto;
height:30px;
padding-top:15px;
margin-left:12px;
padding-bottom:10px;
font-size:14px;
font-weight: bold;
letter-spacing: -1px;
}

#scroller-body {
width:980px;
padding-bottom:20px;
padding-left: 15px;
}

#mask {
width: 980px;
overflow: hidden;
margin: 0 auto;
z-index: 10000;
}

#panel {

}

#panel .panelDiv {
float:left;

}

/* Extra styling for each panel*/

#panel-1 {
}

#panel-2 {
}

#panel-3 {
}


/* Fancy Thumbnail Styles */
.container {
	height: auto;
	width: 910px;
	left: 32px;
	position: relative;
}
#fullRailcom1 ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 930px;
}
#fullRailcom1 ul.thumb li {
	margin: 0; padding: 8px;
	float: left;
	position: relative;
	width: 135px;
	height: 82px;
}
#fullRailcom1 ul.thumb li img {
	width: 125px; 
	height: 72px;
	padding: 5px;
	background: #333333;
	position: absolute;
	left: 0; top: 0;
	-ms-interpolation-mode: bicubic; 
}
#fullRailcom1 ul.thumb li img.hover {
	background:url(images/thumb_bg2.png) no-repeat center center;
	border: none;
}
#main_view {
	float: left;
	padding: 9px 0;
	margin-left: -10px;
}
.containerLatest {
	height: auto;
	width: 248px;
	left: 0px;
	position: relative;
}
#latest ul.thumb {
	list-style: none;
	margin: 0; padding: 10px;
	width: auto;
}
#latest ul.thumb li {
	list-style: none;
	margin: 0; padding: 8px;
	position: relative;
	width: 135px;
	height: 82px;
}
#latest ul.thumb li img {
	list-style: none;
	width: 125px; 
	height: 72px;
	padding: 5px;
	background: #333333;
	position: absolute;
	left: 0; top: 0;
	-ms-interpolation-mode: bicubic; 
}
#latest ul.thumb li img.hover {
	background:url(images/thumb_bg2.png) no-repeat center center;
	border: none;
}

/* Main Content Box */
#contentContainer {
width: 1000px;
height: auto;
position: relative;
overflow: auto;
}


/* Profile Image Styles */
.profilePics {  
height:  293px;  
width:   231px;  
padding: 0;  
margin:  0;  
} 

.profilePics img {
padding: 10px;   
background-color: #333333;  
width:  208px; 
height: 273px; 
top:  0; 
left: 0; 
}

#right {
left: 2px;
cursor: pointer
}

.profilePics2 {  
height:  293px;  
width:   231px; 
padding: 0;  
margin:  0;  
} 

.profilePics2 img {
padding: 10px;   
background-color: #333333;  
width:  208px; 
height: 273px; 
top:  0; 
left: 0; 
}

#right2 {
left: 2px;
cursor: pointer
}

.profilePics3 {  
height:  293px;  
width:   231px; 
padding: 0;  
margin:  0;  
} 

.profilePics3 img {
padding: 10px;   
background-color: #333333;  
width:  208px; 
height: 273px;
top:  0; 
left: 0; 
}

#right3 {
left: 2px;
cursor: pointer
}

.profilePics4 {  
height:  293px;  
width:   231px;  
padding: 0;  
margin:  0;  
} 

.profilePics4 img {
padding: 10px;   
background-color: #333333;  
width:  208px; 
height: 273px; 
top:  0; 
left: 0; 
}

#right4 {
left: 2px;
cursor: pointer
}

.profilePics5 {  
height:  293px;  
width:   231px;
padding: 0;  
margin:  0;  
} 

.profilePics5 img {
padding: 10px;   
background-color: #333333;  
width:  208px; 
height: 273px;
top:  0; 
left: 0; 
}

#right5 {
left: 2px;
cursor: pointer
}

.profilePics6 {  
height:  293px;  
width:   231px;  
padding: 0;  
margin:  0;  
} 
 
.profilePics6 img {
padding: 10px;   
background-color: #333333;  
width:  208px; 
height: 273px; 
top:  0; 
left: 0; 
}

#right6 {
left: 2px;
cursor: pointer
}

/* Left Content */
#leftRail {
color: #333333;
font-size: 14px;
letter-spacing: 1px;
line-height: 18px;
height: auto;
padding: 15px;
float: left;
width: 680px;
position: relative;
overflow: auto;
}


#leftRail h1 a{ color:#00aeef; text-decoration:none; }
#leftRail h1 a:hover{ color:#ff60c9; text-decoration:none; }

#leftRailcom1 {
color: #333333;
font-size: 14px;
letter-spacing: 1px;
line-height: 18px;
height: auto;
float: left;
width: 680px;
padding-right: 15px;
position: relative;
}

#fullRailcom1 {
color: #333333;
font-size: 14px;
letter-spacing: 1px;
line-height: 18px;
height: auto;
width: 980px;
padding-right: 15px;
position: relative;
}

#leftRailcom1 ul {
margin-left: 10px;
}

#leftRailcom1 li {
list-style: square;
list-style-position: inside;
}

#leftRailcom {
left: 2px;
color: #333333;
font-size: 12px;
letter-spacing: 1px;
line-height: 18px;
height: auto;
float: left;
width: 231px;
padding-right: 15px;
position: relative;
}

#leftRailcom ul {
margin-left: 10px;
}

#leftRailcom li {
list-style: square;
list-style-position: inside;
}

#leftRail h1 {
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 8px;
font-weight: bold;
font-size: 20px;
}

#leftRailcom h1 {
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 8px;
font-weight: bold;
font-size: 20px;
}

#leftRailcom h2 {
letter-spacing: -1px;
margin-top: 8px;
margin-bottom: 8px;
font-weight: bold;
font-size: 14px;
border-bottom: thin solid #333333;
}

#leftRailcom1 h1 {
height: 22px;
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 8px;
font-weight: bold;
font-size: 20px;
border-bottom: thin solid #333333;
}

#fullRailcom1 h1 {
height: 22px;
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 8px;
font-weight: bold;
font-size: 20px;
border-bottom: thin solid #333333;
}


/* Right Content */
#rightRail {
color: #333333;
font-size: 12px;
letter-spacing: 1px;
line-height: 18px;
height: auto;
padding: 15px;
float: left;
width: 248px;
position: relative;
overflow: auto;
}

#rightRailcom1 {
color: #333333;
font-size: 12px;
letter-spacing: 1px;
line-height: 18px;
height: auto;
float: left;
width: 248px;
position: relative;
}

#rightRailcom1 ul {
margin-left: 22px;
}

#rightRailcom1 li {
list-style: square;
list-style-position: outside;
}

#rightRailcom {
color: #333333;
font-size: 14px;
letter-spacing: 1px;
line-height: 18px;
height: auto;
float: left;
width: 680px;
position: relative;
}

#rightRail h1 {
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 8px;
font-weight: bold;
font-size: 20px;
}

#rightRailcom h1 {
height: 22px;
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 4px;
font-weight: bold;
font-size: 18px;
border-bottom: thin solid #333333;
}

#rightRailcom1 h1 {
height: 22px;
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 8px;
font-weight: bold;
font-size: 20px;
border-bottom: thin solid #333333;
}

#rightRailcom1 h2 {
letter-spacing: -1px;
margin-top: 8px;
margin-bottom: 8px;
font-weight: bold;
font-size: 14px;
border-bottom: thin solid #333333;
}

/* Company Image Title Website Portfolio Slider */
.boxgridPort { 
width: 322px; 
height: 185px; 
float:left; 
overflow: hidden; 
position: relative; 
margin-left: 12px;
}
.boxgridPort img { 
position: absolute; 
top: 0; 
left: 0; 
border: 0; 
}
.boxgridPort p { 
padding: 2px 10px; 
color:#f8f8f8; 
font:12px Arial, sans-serif;
}

.boxcaptionPort {
margin-left: 8px;
float: left; 
position: absolute; 
background-color: #000000; 
height: 157px; 
width: 306px; 
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.boxcaptionPort ul {
font:12px Arial, sans-serif;
color:#f8f8f8;
margin-left: 11px;
}

.boxcaptionPort li {
list-style: square;
list-style-position: inside;
}

.captionfullPort .boxcaptionPort {
top: 185px;
left: 0px;
}
.captionPort .boxcaptionPort {
top: 185px;
left: 0px;
}

/* Website Image Title Website Portfolio Slider */
.boxgridPortWeb { 
width: 322px; 
height: 185px; 
float:left; 
overflow: hidden; 
position: relative; 
margin-left: 12px;
}
.boxgridPortWeb img { 
position: absolute; 
top: 0; 
left: 0; 
border: 0; 
}
.boxgridPortWeb p { 
padding: 2px 10px; 
color:#f8f8f8; 
font:12px Arial, sans-serif;
}

.boxcaptionPortWeb {
margin-left: 8px;
float: left; 
position: absolute; 
background-color: #000000; 
height: 157px; 
width: 306px; 
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.boxcaptionPortWeb ul {
font:12px Arial, sans-serif;
color:#f8f8f8;
margin-left: 11px;
}

.boxcaptionPortWeb li {
list-style: square;
list-style-position: inside;
}

.captionfullPortWeb .boxcaptionPortWeb {
top: 185px;
left: 0px;
}
.captionPortWeb .boxcaptionPortWeb {
top: 185px;
left: 0px;
}

/* Lightbox Testimonial Style */
.testimonial {
margin:5px;
}

.testimonial h3 {
margin-bottom:3px;
color:#00aeef;
font:18px Arial, sans-serif;
letter-spacing:-1px;
font-weight: bold; 
}

.testimonial p {
margin-left:12px;
margin-bottom:5px;
color:#333333;
font:12px Arial, sans-serif;
letter-spacing:1px;
font-weight: bold; 
}

.testimonial p .quote {
font-size:20px;
color:#00aeef;
}

/* Profile Portfolio Thumbnails */
.thumbContainer {
height: auto;
width: auto;
position: relative;
}
ul.thumbNail {
float: left;
list-style: none;
margin: 0; padding: 20px;
width: 680px;
}
ul.thumbNail li {
padding: 5px;
float: left;
position: relative;
width: 135px;
height: 82px;
}
ul.thumbNail li img {
width: 125px; height: 72px;
padding: 5px;
background: #333333;
position: absolute;
left: 0; top: 0;
}
ul.thumbNail li img:hover {
background: #999999;
}

/* Portfolio Thumbnail Popups */
.container {
height: auto;
width: auto;
position: relative;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 680px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 135px;
height: 82px;
}
ul.thumb li img {
width: 125px; height: 72px;
padding: 5px;
background: #333333;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {
background:url(images/thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}

#video {
float: left;
padding-left: 20px;
}

#video p {
font-size: 12px;
}

/* Footer Box */
#footer {
clear: both;
padding-left: 15px;
position: relative;
visibility: visible;
width: 1000px;
height: 349px;
}

.floatRight {
float: right;
}

#leftBox01 {
margin-top: 12px;
letter-spacing: 2px;
color: #ffffff;
line-height: 18px;
position: absolute;
visibility: visible;
width: auto;
height: auto;
}

#leftBox01 h1 {
height: 23px;
letter-spacing: -1px;
margin-top: 3px;
margin-bottom: 4px;
font-weight: bold;
font-size: 20px;
border-bottom: thin dotted;
}

/* Classes */
.bold {
font-weight: bold;
}

.boldU {
font-weight: bold;
text-decoration: underline;
}

.boldIt {
font-weight: bold;
font-style: italic;
}

.jumpTo {
font-weight: bold;
font-size: 12px;
}

.blue {
color: #00aeef;
}

.green {
color: #2feb1d;
}

.pink {
color: #ff60c9;
}

.yellow {
color: #fff003;
}

.orange {
color: #f15b26;
}

.maroon {
color: #640e27;
}

.dark {
color: #333333;
}

.scrolLink {
letter-spacing: -1px;
position: relative;
top: -2px;
font-size: 14px;
}

.floatLeft {
float: left;
margin-right: 10px;
}

.floatRight {
float: right;
margin-left: 10px;
}

}